highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-03-17 21:32:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

updating readme for widget (#2132)

Browse Source 
Co-authored-by: Jos Van der westhuizen <jos@danser.ai>
This commit is contained in:
josvdw 2024-08-14 09:55:59 -07:00 committed by GitHub
parent 3540aa579b
commit 0530f4283e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/widget/.env.example Normal file
View File

@ -0,0 +1,2 @@
NEXT_PUBLIC_API_URL=https://example.danswer.ai
NEXT_PUBLIC_API_KEY=some_long_api_key_here

59
examples/widget/README.md
View File

@ -1,19 +1,70 @@
This is a code example for how you can use Danswer's APIs to build a chat bot widget for a website! The main code to look at can be found in `src/app/widget/Widget.tsx`.
# Danswer Chat Bot Widget
Note: The widget requires a Danswer API key, which is a paid (cloud/enterprise) feature.
If you want to get fancier, then take a peek at the Chat implementation within Danswer itself [here](https://github.com/danswer-ai/danswer/blob/main/web/src/app/chat/ChatPage.tsx#L82).
This is a code example for how you can use Danswer's APIs to build a chat bot widget for a website! The main code to look at can be found in `src/app/widget/Widget.tsx`.
## Getting Started
First, install the requirements:
To get the widget working on your webpage, follow these steps:
### 1. Install Dependencies
Ensure you have the necessary dependencies installed. From the `examples/widget/README.md` file:
```bash
npm i
```
Then run the development server:
### 2. Set Environment Variables
Make sure to set the environment variables `NEXT_PUBLIC_API_URL` and `NEXT_PUBLIC_API_KEY` in a `.env` file at the root of your project:
```bash
NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_API_KEY=
```
### 3. Run the Development Server
Start the development server to see the widget in action.
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### 4. Integrate the Widget
To integrate the widget into your webpage, you can use the `ChatWidget` component. Here’s an example of how to include it in a page component:
```jsx
import ChatWidget from 'path/to/ChatWidget';
function MyPage() {
return (
<div>
<h1>My Webpage</h1>
<ChatWidget />
</div>
);
}
export default MyPage;
```
### 5. Deploy
Once you are satisfied with the widget, you can build and start the application for production:
```bash
npm run build
npm run start
```
### Custom Styling and Configuration
If you need to customize the widget, you can modify the `ChatWidget` component in the `examples/widget/src/app/widget/Widget.tsx` file.
By following these steps, you should be able to get the chat widget working on your webpage.
If you want to get fancier, then take a peek at the Chat implementation within Danswer itself [here](https://github.com/danswer-ai/danswer/blob/main/web/src/app/chat/ChatPage.tsx#L82).