chore: import upstream snapshot with attribution
Build and push multi-arch DocsGPT Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Has been cancelled
Backend release / release (push) Has been cancelled
Bandit Security Scan / bandit_scan (push) Has been cancelled
Build and push multi-arch DocsGPT Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Has been cancelled
Build and push multi-arch DocsGPT Docker image / manifest (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / build (linux/amd64, ubuntu-latest, amd64) (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / manifest (push) Has been cancelled
Python linting / ruff (push) Has been cancelled
Run python tests with pytest / Run tests and count coverage (3.12) (push) Has been cancelled
React Widget Build / build (push) Has been cancelled
Build and push multi-arch DocsGPT Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Has been cancelled
Backend release / release (push) Has been cancelled
Bandit Security Scan / bandit_scan (push) Has been cancelled
Build and push multi-arch DocsGPT Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Has been cancelled
Build and push multi-arch DocsGPT Docker image / manifest (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / build (linux/amd64, ubuntu-latest, amd64) (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Has been cancelled
Build and push DocsGPT FE Docker image for development / manifest (push) Has been cancelled
Python linting / ruff (push) Has been cancelled
Run python tests with pytest / Run tests and count coverage (3.12) (push) Has been cancelled
React Widget Build / build (push) Has been cancelled
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Comprehensive Guide to Setting Up the Chatwoot Extension with DocsGPT
|
||||
description: This step-by-step guide walks you through the process of setting up the Chatwoot extension with DocsGPT, enabling seamless integration for automated responses and enhanced customer support. Learn how to launch DocsGPT, retrieve your Chatwoot access token, configure the .env file, and start the extension.
|
||||
---
|
||||
## Chatwoot Extension Setup Guide
|
||||
|
||||
### Step 1: Prepare and Start DocsGPT
|
||||
|
||||
- **Launch DocsGPT**: Follow the instructions in our [Quickstart](/quickstart) to start DocsGPT. Make sure to load your documentation.
|
||||
|
||||
### Step 2: Get Access Token from Chatwoot
|
||||
|
||||
- Go to Chatwoot.
|
||||
- In your profile settings (located at the bottom left), scroll down and copy the **Access Token**.
|
||||
|
||||
### Step 3: Set Up Chatwoot Extension
|
||||
|
||||
- Navigate to `/extensions/chatwoot`.
|
||||
- Copy the `.env_sample` file and create a new file named `.env`.
|
||||
- Fill in the values in the `.env` file as follows:
|
||||
|
||||
```env
|
||||
docsgpt_url=<Docsgpt_API_URL>
|
||||
chatwoot_url=<Chatwoot_URL>
|
||||
docsgpt_key=<OpenAI_API_Key or Other_LLM_Key>
|
||||
chatwoot_token=<Token from Step 2>
|
||||
```
|
||||
|
||||
### Step 4: Start the Extension
|
||||
|
||||
- Use the command `flask run` to start the extension.
|
||||
|
||||
### Step 5: Optional - Extra Validation
|
||||
|
||||
- In app.py, uncomment lines 12-13 and 71-75.
|
||||
- Add the following lines to your .env file:
|
||||
```account_id=(optional) 1
|
||||
assignee_id=(optional) 1
|
||||
```
|
||||
These Chatwoot values help ensure you respond to the correct widget and handle questions assigned to a specific user.
|
||||
|
||||
### Stopping Bot Responses for Specific User or Session
|
||||
|
||||
- If you want the bot to stop responding to questions for a specific user or session, add a label `human-requested` in your conversation.
|
||||
|
||||
### Additional Notes
|
||||
|
||||
- For further details on training on other documentation, refer to our [wiki](https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation).
|
||||
@@ -0,0 +1,18 @@
|
||||
export default {
|
||||
"api-key-guide": {
|
||||
"title": "🔑 Getting API key",
|
||||
"href": "/Extensions/api-key-guide"
|
||||
},
|
||||
"chat-widget": {
|
||||
"title": "💬️ Chat Widget",
|
||||
"href": "/Extensions/chat-widget"
|
||||
},
|
||||
"search-widget": {
|
||||
"title": "🔎 Search Widget",
|
||||
"href": "/Extensions/search-widget"
|
||||
},
|
||||
"Chatwoot-extension": {
|
||||
"title": "🗣️ Chatwoot Extension",
|
||||
"href": "/Extensions/Chatwoot-extension"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: API Keys for DocsGPT Integrations
|
||||
description: Learn how to obtain, understand, and use DocsGPT API keys to integrate DocsGPT into your external applications and widgets.
|
||||
---
|
||||
|
||||
# Guide to DocsGPT API Keys
|
||||
|
||||
DocsGPT API keys are essential for developers and users who wish to integrate the DocsGPT models into external applications, such as [our widget](/Extensions/chat-widget). This guide will walk you through the steps of obtaining an API key, starting from uploading your document to understanding the key variables associated with API keys.
|
||||
|
||||
## Obtaining Your API Key
|
||||
|
||||
After uploading your document, you can obtain an API key either through the graphical user interface or via an API call:
|
||||
|
||||
- **Graphical User Interface:** Navigate to the Settings section of the DocsGPT web app, find the Agents option, and press 'Create New' to generate a new agent (which includes an API key).
|
||||
- **API Call:** Alternatively, you can use the `/api/create_agent` endpoint to create a new agent. An API key is automatically generated for each agent. For detailed instructions, visit [DocsGPT API Documentation](https://gptcloud.arc53.com/).
|
||||
|
||||
## Understanding Key Variables
|
||||
|
||||
Upon creating your agent, you will encounter several key variables. Each serves a specific purpose:
|
||||
|
||||
- **Name:** Assign a name to your agent for easy identification.
|
||||
- **Source:** Indicates the source document(s) linked to your agent, which DocsGPT will use to generate responses.
|
||||
- **ID:** A unique identifier for your agent. You can view this by making a call to `/api/get_agents`.
|
||||
- **Key:** The API key for the agent, which will be used in your application to authenticate API requests.
|
||||
|
||||
With your API key ready, you can now integrate DocsGPT into your application, such as the DocsGPT Widget or any other software, via `/api/answer` or `/stream` endpoints. The source document is preset with the agent, allowing you to bypass fields like `selectDocs` and `active_docs` during implementation.
|
||||
|
||||
Congratulations on taking the first step towards enhancing your applications with DocsGPT!
|
||||
@@ -0,0 +1,159 @@
|
||||
---
|
||||
title: Integrate DocsGPT Chat Widget into Your Web Application
|
||||
description: Embed the DocsGPT Widget in your React, HTML, or Nextra projects to provide AI-powered chat functionality to your users.
|
||||
---
|
||||
import { Tabs } from 'nextra/components'
|
||||
|
||||
# Integrating DocsGPT Chat Widget
|
||||
|
||||
## Introduction
|
||||
|
||||
The DocsGPT Widget is a powerful tool that allows you to integrate AI-driven document assistance directly into your web applications. This guide will walk you through embedding the DocsGPT Widget into your projects, whether you're using React, plain HTML, or Nextra. Enhance your user experience by providing seamless access to intelligent document search and chatbot capabilities.
|
||||
|
||||
Try out the interactive widget showcase and customize its parameters at the [DocsGPT Widget Demo](https://widget.docsgpt.cloud/).
|
||||
|
||||
## Setup
|
||||
<Tabs items={['React', 'HTML', 'Nextra']}>
|
||||
<Tabs.Tab>
|
||||
|
||||
### Installation
|
||||
|
||||
Make sure you have Node.js and npm (or yarn, pnpm) installed in your project. Navigate to your project directory in the terminal and install the `docsgpt` package:
|
||||
|
||||
```bash npm
|
||||
npm install docsgpt
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
In your React component file, import the `DocsGPTWidget` component:
|
||||
|
||||
```js
|
||||
import { DocsGPTWidget } from "docsgpt";
|
||||
```
|
||||
|
||||
Now, you can embed the widget within your React component's JSX:
|
||||
|
||||
```jsx
|
||||
<DocsGPTWidget
|
||||
apiHost="https://your-docsgpt-api.com"
|
||||
apiKey=""
|
||||
avatar="https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"
|
||||
title="Get AI assistance"
|
||||
description="DocsGPT's AI Chatbot is here to help"
|
||||
heroTitle="Welcome to DocsGPT !"
|
||||
heroDescription="This chatbot is built with DocsGPT and utilises GenAI,
|
||||
please review important information using sources."
|
||||
theme="dark"
|
||||
buttonIcon="https://your-icon"
|
||||
buttonBg="#222327"
|
||||
/>
|
||||
```
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab>
|
||||
|
||||
### Installation
|
||||
|
||||
To use the DocsGPT Widget directly in HTML, include the widget script from a CDN in your HTML file:
|
||||
|
||||
```html filename="html"
|
||||
<script
|
||||
src="https://unpkg.com/docsgpt/dist/legacy/main.js"
|
||||
type="module"
|
||||
></script>
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
In your HTML `<body>`, add a `<div>` element where you want to render the widget. Set an `id` for easy targeting.
|
||||
|
||||
```html filename="html"
|
||||
<div id="app"></div>
|
||||
```
|
||||
|
||||
Then, in a `<script type="module">` block, use the `renderDocsGPTWidget` function to initialize the widget, passing the `id` of your `<div>` and a configuration object. To link the widget to your DocsGPT API and specific documents, pass the relevant parameters within the configuration object of `renderDocsGPTWidget`.
|
||||
|
||||
```html filename="html"
|
||||
<!DOCTYPE html>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
window.onload = function() {
|
||||
renderDocsGPTWidget('app', {
|
||||
apiHost: 'http://localhost:7001', // Replace with your API Host
|
||||
apiKey:"",
|
||||
avatar: 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
|
||||
title: 'Get AI assistance',
|
||||
description: "DocsGPT's AI Chatbot is here to help",
|
||||
heroTitle: 'Welcome to DocsGPT!',
|
||||
heroDescription: 'This chatbot is utilises GenAI, please review important information.',
|
||||
theme:"dark",
|
||||
buttonIcon:"https://your-icon",
|
||||
buttonBg:"#222327"
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab>
|
||||
|
||||
### Installation
|
||||
|
||||
Make sure you have Node.js and npm (or yarn, pnpm) installed in your project. Navigate to your project directory in the terminal and install the `docsgpt` package:
|
||||
|
||||
```bash npm
|
||||
npm install docsgpt
|
||||
```
|
||||
|
||||
### Usage with Nextra (Next.js + MDX)
|
||||
|
||||
To integrate the DocsGPT Widget into a [Nextra](https://nextra.site/) documentation site (built with Next.js and MDX), create or modify your `pages/_app.js` file as follows:
|
||||
|
||||
```js filename="pages/_app.js"
|
||||
import { DocsGPTWidget } from "docsgpt";
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<>
|
||||
<Component {...pageProps} />
|
||||
<DocsGPTWidget selectDocs="local/docsgpt-sep.zip/"/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
||||
## Properties Table
|
||||
|
||||
The DocsGPT Widget offers a range of customizable properties that allow you to tailor its appearance and behavior to perfectly match your web application. These parameters can be modified directly when embedding the widget in your React components or HTML code. Below is a detailed overview of each available prop:
|
||||
|
||||
| **Prop** | **Type** | **Default Value** | **Description** |
|
||||
|--------------------|------------------|-------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
|
||||
| **`apiHost`** | `string` | `"https://gptcloud.arc53.com"` | **Required.** The URL of your DocsGPT API backend. This endpoint handles vector search and chatbot queries. |
|
||||
| **`apiKey`** | `string` | `"your-api-key"` | API key for authentication with your DocsGPT API. Leave empty if no authentication is required. |
|
||||
| **`avatar`** | `string` | [`dino-icon-link`](https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png) | URL for the avatar image displayed in the chatbot interface. |
|
||||
| **`title`** | `string` | `"Get AI assistance"` | Title text shown in the chatbot header. |
|
||||
| **`description`** | `string` | `"DocsGPT's AI Chatbot is here to help"` | Sub-title or descriptive text displayed below the title in the chatbot header. |
|
||||
| **`heroTitle`** | `string` | `"Welcome to DocsGPT !"` | Welcome message displayed when the chatbot is initially opened. |
|
||||
| **`heroDescription`** | `string` | `"This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources."` | Introductory text providing context or disclaimers about the chatbot. |
|
||||
| **`theme`** | `"dark" \| "light"` | `"dark"` | Color theme of the widget interface. Options: `"dark"` or `"light"`. Defaults to `"dark"`. |
|
||||
| **`buttonIcon`** | `string` | `"https://your-icon"` | URL for the icon image used in the widget's launch button. |
|
||||
| **`buttonBg`** | `string` | `"#222327"` | Background color of the widget's launch button. |
|
||||
| **`size`** | `"small" \| "medium"` | `"medium"` | Size of the widget. Options: `"small"` or `"medium"`. Defaults to `"medium"`. |
|
||||
| **`showSources`** | `boolean` | `false` | Enables displaying source URLs for data fetched within the widget. When set to `true`, the widget will show the original sources of the fetched data. |
|
||||
|
||||
---
|
||||
|
||||
## Notes on Widget Properties
|
||||
|
||||
* **Full Customization:** Every property listed in the table can be customized. Override the defaults to create a widget that perfectly matches your branding and application context. From avatars and titles to color schemes, you have fine-grained control over the widget's presentation.
|
||||
* **API Key Handling:** The `apiKey` prop is optional. Only include it if your DocsGPT backend API is configured to require API key authentication. `apiHost` for DocsGPT Cloud is `https://gptcloud.arc53.com/`
|
||||
|
||||
## Explore and Customize Further
|
||||
|
||||
The DocsGPT Widget is fully open-source, allowing for deep customization and extension beyond the readily available props.
|
||||
|
||||
The complete source code for the React-based widget is available in the `extensions/react-widget` directory within the main [DocsGPT GitHub Repository](https://github.com/arc53/DocsGPT). Feel free to explore the code, fork the repository, and tailor the widget to your exact requirements.
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Integrate DocsGPT Search Bar into Your Web Application
|
||||
description: Embed the DocsGPT Search Bar Widget in your React or HTML projects to provide AI-powered document search functionality to your users.
|
||||
---
|
||||
import { Tabs } from 'nextra/components'
|
||||
|
||||
# Integrating DocsGPT Search Bar Widget
|
||||
|
||||
## Introduction
|
||||
|
||||
The DocsGPT Search Bar Widget offers a simple yet powerful way to embed AI-powered document search directly into your web applications. This widget allows users to perform searches across your documents or pages, enabling them to quickly find the information they need. This guide will walk you through embedding the Search Bar Widget into your projects, whether you're using React or plain HTML.
|
||||
|
||||
Try out the interactive widget showcase and customize its parameters at the [DocsGPT Widget Demo](https://widget.docsgpt.cloud/).
|
||||
|
||||
## Setup
|
||||
|
||||
<Tabs items={['React', 'HTML']}>
|
||||
<Tabs.Tab>
|
||||
## React Setup
|
||||
|
||||
### Installation
|
||||
|
||||
Make sure you have Node.js and npm (or yarn, pnpm) installed in your project. Navigate to your project directory in the terminal and install the `docsgpt` package:
|
||||
|
||||
```bash npm
|
||||
npm install docsgpt
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
In your React component file, import the `SearchBar` component:
|
||||
|
||||
```js
|
||||
import { SearchBar } from "docsgpt";
|
||||
```
|
||||
|
||||
Now, you can embed the widget within your React component's JSX:
|
||||
|
||||
```jsx
|
||||
<SearchBar
|
||||
apiKey="your-api-key"
|
||||
apiHost="https://your-docsgpt-api.com"
|
||||
theme="light"
|
||||
placeholder="Search or Ask AI..."
|
||||
width="300px"
|
||||
/>
|
||||
```
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab>
|
||||
|
||||
### Installation
|
||||
|
||||
To use the DocsGPT Search Bar Widget directly in HTML, include the widget script from a CDN in your HTML file:
|
||||
|
||||
```html filename="html"
|
||||
<script
|
||||
src="https://unpkg.com/docsgpt/dist/legacy/main.js"
|
||||
type="module"
|
||||
></script>
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
In your HTML `<body>`, add a `<div>` element where you want to render the Search Bar Widget. Set an `id` for easy targeting.
|
||||
|
||||
```html filename="html"
|
||||
<div id="search-bar-container"></div>
|
||||
```
|
||||
|
||||
Then, in a `<script type="module">` block, use the `renderSearchBar` function to initialize the widget, passing the `id` of your `<div>` and a configuration object. To link the widget to your DocsGPT API and configure its behaviour, pass the relevant parameters within the configuration object of `renderSearchBar`.
|
||||
|
||||
```html filename="html"
|
||||
<!DOCTYPE html>
|
||||
<div id="search-bar-container"></div>
|
||||
<script type="module">
|
||||
window.onload = function() {
|
||||
renderSearchBar('search-bar-container', {
|
||||
apiKey: 'your-api-key-here',
|
||||
apiHost: 'https://your-api-host.com',
|
||||
theme: 'light',
|
||||
placeholder: 'Search here...',
|
||||
width: '300px'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
||||
## Properties Table
|
||||
|
||||
The DocsGPT Search Bar Widget offers a range of customizable properties that allow you to tailor its appearance and behavior to perfectly match your web application. These parameters can be modified directly when embedding the widget in your React components or HTML code. Below is a detailed overview of each available prop:
|
||||
|
||||
| **Prop** | **Type** | **Default Value** | **Description** |
|
||||
|-----------------|-----------|-------------------------------------|--------------------------------------------------------------------------------------------------|
|
||||
| **`apiKey`** | `string` | `"your-api-key"` | API key for authentication with your DocsGPT API. Leave empty if no authentication is required. |
|
||||
| **`apiHost`** | `string` | `"https://gptcloud.arc53.com"` | **Required.** The URL of your DocsGPT API backend. This endpoint handles vector similarity search queries. |
|
||||
| **`theme`** | `"dark" \| "light"` | `"dark"` | Color theme of the search bar. Options: `"dark"` or `"light"`. Defaults to `"dark"`. |
|
||||
| **`placeholder`** | `string` | `"Search or Ask AI..."` | Placeholder text displayed in the search input field. |
|
||||
| **`width`** | `string` | `"256px"` | Width of the search bar. Accepts any valid CSS width value (e.g., `"300px"`, `"100%"`, `"20rem"`). |
|
||||
|
||||
---
|
||||
|
||||
## Notes on Widget Properties
|
||||
|
||||
* **Full Customization:** Every property listed in the table can be customized. Override the defaults to create a Search Bar Widget that perfectly matches your branding and application context.
|
||||
* **API Key Handling:** The `apiKey` prop is optional. Only include it if your DocsGPT backend API is configured to require API key authentication. `apiHost` for DocsGPT Cloud is `https://gptcloud.arc53.com/`
|
||||
|
||||
## Explore and Customize Further
|
||||
|
||||
The DocsGPT Search Bar Widget is fully open-source, allowing for deep customization and extension beyond the readily available props.
|
||||
|
||||
The complete source code for the React-based widget is available in the `extensions/react-widget` directory within the main [DocsGPT GitHub Repository](https://github.com/arc53/DocsGPT). Feel free to explore the code, fork the repository, and tailor the widget to your exact requirements.
|
||||
Reference in New Issue
Block a user