DocsGPT react widget

This widget will allow you to embed a DocsGPT assistant in your React app.

Installation

``bash
npm install docsgpt
`

Usage

$3

`javascript
import { DocsGPTWidget } from "docsgpt-react";

const App = () => {
return ;
};
`

To link the widget to your api and your documents you can pass parameters to the component.

`javascript
import { DocsGPTWidget } from "docsgpt-react";

const App = () => {
return apiHost="https://gptcloud.arc53.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"
/>;
};
`

$3

`html

















`

To link the widget to your api and your documents you can pass parameters to the renderDocsGPTWidget('div id', { parameters }).

`html

















`

SearchBar

The SearchBar component is an interactive search bar designed to provide search results based on vector similarity search. It also includes the capability to open the AI Chatbot, enabling users to query.

---

$3


`tsx
import { SearchBar } from "docsgpt-react";
`

---

$3

`tsx
apiKey="your-api-key"
apiHost="https://gptcloud.arc53.com"
theme="light"
placeholder="Search or Ask AI..."
width="300px"
/>
`

---

HTML embedding for Search bar

`html
















`

$3

| Prop | Type | Default Value | Description |
|-----------------|-----------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| apiKey | string | "74039c6d-bff7-44ce-ae55-2973cbf13837" | Your API key generated from the app. Used for authenticating requests. |
| apiHost | string | "https://gptcloud.arc53.com" | The base URL of the server hosting the vector similarity search and chatbot services. |
| theme | "dark" \| "light" | "dark" | The theme of the search bar. Accepts "dark" or "light". |
| 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"). |


Feel free to reach out if you need help customizing or extending the SearchBar`!

Our github

DocsGPT

You can find the source code in the extensions/react-widget folder.