LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

models+guide-upd+extentions

Browse Source
This commit is contained in:
Pavel
2025-02-12 14:38:21 +03:00
parent 28cdbe407c
commit b44b9d8016
31 changed files with 955 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/pages/Extensions/Chatwoot-extension.md → docs/pages/Extensions/Chatwoot-extension.mdx
View File

@@ -1,3 +1,7 @@
---
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

4
docs/pages/Extensions/Chrome-extension.mdx
View File

@@ -1,3 +1,7 @@
---
title: Add DocsGPT Chrome Extension to Your Browser
description: Install the DocsGPT Chrome extension to access AI-powered document assistance directly from your browser for enhanced productivity.
---
import {Steps} from 'nextra/components'
import { Callout } from 'nextra/components'

2
docs/pages/Extensions/_meta.json
View File

@@ -3,7 +3,7 @@
"title": "🔑 Getting API key",
"href": "/Extensions/api-key-guide"
},
"react-widget": {
"chat-widget": {
"title": "💬️ Chat Widget",
"href": "/Extensions/chat-widget"
},

22
docs/pages/Extensions/api-key-guide.md → docs/pages/Extensions/api-key-guide.mdx
View File

@@ -1,22 +1,20 @@
## Guide to DocsGPT API Keys
---
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.
---
DocsGPT API keys are essential for developers and users who wish to integrate the DocsGPT models into external applications, such as the our 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.
# Guide to DocsGPT API Keys
### Uploading Your Document
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.
Before creating your first API key, you must upload the document that will be linked to this key. You can upload your document through two methods:
- **GUI Web App Upload:** A user-friendly graphical interface that allows for easy upload and management of documents.
- **Using `/api/upload` Method:** For users comfortable with API calls, this method provides a direct way to upload documents.
### Obtaining Your API Key
## 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 API Keys option, and press 'Create New' to generate your key.
- **API Call:** Alternatively, you can use the `/api/create_api_key` endpoint to create a new API key. For detailed instructions, visit [DocsGPT API Documentation](https://docs.docsgpt.cloud/API/API-docs#8-apicreate_api_key).
- **API Call:** Alternatively, you can use the `/api/create_api_key` endpoint to create a new API key. For detailed instructions, visit [DocsGPT API Documentation](https://gptcloud.arc53.com/).
### Understanding Key Variables
## Understanding Key Variables
Upon creating your API key, you will encounter several key variables. Each serves a specific purpose:
@@ -27,4 +25,4 @@ Upon creating your API key, you will encounter several key variables. Each serve
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 API key, allowing you to bypass fields like `selectDocs` and `active_docs` during implementation.
Congratulations on taking the first step towards enhancing your applications with DocsGPT! With this guide, you're now equipped to navigate the process of obtaining and understanding DocsGPT API keys.
Congratulations on taking the first step towards enhancing your applications with DocsGPT!

16
docs/pages/Extensions/react-widget.md → docs/pages/Extensions/chat-widget copy.md
View File

@@ -1,12 +1,12 @@
### Setting up the DocsGPT Widget in Your React Project
# Setting up the DocsGPT Widget in Your React Project
### Introduction:
## Introduction:
The DocsGPT Widget is a powerful tool that allows you to integrate AI-powered documentation assistance into your web applications. This guide will walk you through the installation and usage of the DocsGPT Widget in your React project. Whether you're building a web app or a knowledge base, this widget can enhance your user experience.
### Installation
## Installation
First, make sure you have Node.js and npm installed in your project. Then go to your project and install a new dependency: `npm install docsgpt`.
### Usage
## Usage
In the file where you want to use the widget, import it and include the CSS file:
```js
import { DocsGPTWidget } from "docsgpt";
@@ -29,7 +29,7 @@ Now, you can use the widget in your component like this :
buttonBg = "#222327"
/>
```
### Props Table for DocsGPT Widget
## Props Table for DocsGPT Widget
| **Prop** | **Type** | **Default Value** | **Description** |
|--------------------|------------------|-------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
@@ -47,7 +47,7 @@ Now, you can use the widget in your component like this :
---
### Notes
## Notes
- **Customizing Props:** All properties can be overridden when embedding the widget. For example, you can provide a unique avatar, title, or color scheme to better align with your brand.
- **Default Theme:** The widget defaults to the dark theme unless explicitly set to `"light"`.
- **API Key:** If the `apiKey` is not required for your application, leave it empty.
@@ -55,7 +55,7 @@ Now, you can use the widget in your component like this :
This table provides a clear overview of the customization options available for tailoring the DocsGPT widget to fit your application.
### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
## How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
Install your widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
```js
import { DocsGPTWidget } from "docsgpt";
@@ -69,7 +69,7 @@ export default function MyApp({ Component, pageProps }) {
)
}
```
### How to use DocsGPTWidget with HTML
## How to use DocsGPTWidget with HTML
```html
<!DOCTYPE html>
<html lang="en">

158
docs/pages/Extensions/chat-widget.mdx Normal file
View File

@@ -0,0 +1,158 @@
---
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"`. |
---
## 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
docs/pages/Extensions/search-widget.md
View File

116
docs/pages/Extensions/search-widget.mdx Normal file
View File

@@ -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.