From 26f7a9be0a4a811b51b395f7cb556fc7da55c8c6 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 15 Sep 2023 11:00:59 +0100 Subject: [PATCH 1/2] updated deployment and create react widget guide --- .env-template | 2 +- docs/pages/Deploying/Hosting-the-app.md | 52 ++++++++++++++++++------- docs/pages/Extensions/_meta.json | 6 ++- docs/pages/Extensions/react-widget.md | 37 ++++++++++++++++++ 4 files changed, 80 insertions(+), 17 deletions(-) create mode 100644 docs/pages/Extensions/react-widget.md diff --git a/.env-template b/.env-template index 9dbddb2..4152b97 100644 --- a/.env-template +++ b/.env-template @@ -1,6 +1,6 @@ OPENAI_API_KEY= -EMBEDDINGS_KEY= SELF_HOSTED_MODEL=false +VITE_API_STREAMING=true #For Azure OPENAI_API_BASE= diff --git a/docs/pages/Deploying/Hosting-the-app.md b/docs/pages/Deploying/Hosting-the-app.md index 1ec908a..089b252 100644 --- a/docs/pages/Deploying/Hosting-the-app.md +++ b/docs/pages/Deploying/Hosting-the-app.md @@ -46,45 +46,67 @@ Once it has finished cloning the repository, it is time to download the package `sudo apt update` -#### Install python3 +#### Install Docker and Docker Compose -DocsGPT backend uses python, which means it needs to be installed in order to use it. +DocsGPT backend and worker use python, Frontend is written on React and the whole application is containerized using Docker. To install Docker and Docker Compose, enter the following commands: -`sudo apt install python3-pip` +`sudo apt install docker.io` + +And now install docker-compose: + +`sudo apt install docker-compose` #### Access the DocsGPT folder -Enter the following command to access the folder in which DocsGPT application was installed. +Enter the following command to access the folder in which DocsGPT docker-compose file is. + +`cd DocsGPT/` + +#### Prepare the environment + +Inside the DocsGPT folder create a .env file and copy the contents of .env_sample into it. -`cd DocsGPT/application` +`nano .env` -#### Install the required dependencies +Make sure your .env file looks like this: -Inside the applications folder there's a .txt file with a list of all dependencies required to run DocsGPT. +``` +OPENAI_API_KEY=(Your OpenAI API key) +VITE_API_STREAMING=true +SELF_HOSTED_MODEL=false +``` -`pip3 install -r requirements.txt` +To save the file, press CTRL+X, then Y and then ENTER. + +Next we need to set a correct IP for our Backend. To do so, open the docker-compose.yml file: + +`nano docker-compose.yml` + +And change this line 7 `VITE_API_HOST=http://localhost:7091` +to this `VITE_API_HOST=http://:7091` + +This will allow the frontend to connect to the backend. #### Running the app You're almost there! Now that all the necessary bits and pieces have been installed, it is time to run the application. To do so, use the following command: -`tmux new` - -And then: +`sudo docker-compose up -d` -`python3 -m flask run --host 0.0.0.0 --port 5000` +If you launch it for the first time it will take a few minutes to download all the necessary dependencies and build. Once this is done you can go ahead and close the terminal window. -#### Enabling port 5000 +#### Enabling ports Before you being able to access your live instance, you must first enable the port which it is using. Open your Lightsail instance and head to "Networking". -Then click on "Add rule" under "IPv4 Firewall", enter 5000 as your your port and hit "Create". +Then click on "Add rule" under "IPv4 Firewall", enter 5173 as your your port and hit "Create". +Repeat the process for port 7091. #### Access your instance -Your instance will now be available under your Public IP Address and port 5000. Enjoy! +Your instance will now be available under your Public IP Address and port 5173. Enjoy! diff --git a/docs/pages/Extensions/_meta.json b/docs/pages/Extensions/_meta.json index 66312f4..785e0a0 100644 --- a/docs/pages/Extensions/_meta.json +++ b/docs/pages/Extensions/_meta.json @@ -2,5 +2,9 @@ "Chatwoot-extension": { "title": "💬️ Chatwoot Extension", "href": "/Extensions/Chatwoot-extension" - } + }, + "react-widget": { + "title": "🏗️ Widget setup", + "href": "/Extensions/react-widget" + }, } \ No newline at end of file diff --git a/docs/pages/Extensions/react-widget.md b/docs/pages/Extensions/react-widget.md new file mode 100644 index 0000000..393c736 --- /dev/null +++ b/docs/pages/Extensions/react-widget.md @@ -0,0 +1,37 @@ +### How to set up react docsGPT widget on your website: + +### Installation +Got to your project and install a new dependency: `npm install docsgpt` + +### Usage +Go to your project and in the file where you want to use the widget import it: +```js +import { DocsGPTWidget } from "docsgpt"; +import "docsgpt/dist/style.css"; +``` + + +Then you can use it like this: `` + +DocsGPTWidget takes 3 props: +- `apiHost` - url of your DocsGPT API +- `selectDocs` - documentation that you want to use for your widget (eg. `default` or `local/docs1.zip`) +- `apiKey` - usually its empty + +### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX) +Install you 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"; +import "docsgpt/dist/style.css"; + +export default function MyApp({ Component, pageProps }) { + return ( + <> + + + + ) +} +``` + + From 88fe454962af06257c4fbfbc28e9b8cfac8a148e Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 15 Sep 2023 11:08:21 +0100 Subject: [PATCH 2/2] removed unecessary comma --- docs/pages/Extensions/_meta.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/Extensions/_meta.json b/docs/pages/Extensions/_meta.json index 785e0a0..05a4991 100644 --- a/docs/pages/Extensions/_meta.json +++ b/docs/pages/Extensions/_meta.json @@ -6,5 +6,5 @@ "react-widget": { "title": "🏗️ Widget setup", "href": "/Extensions/react-widget" - }, + } } \ No newline at end of file