# gptx-chatbot-ui
> Use [gptx-chatbot-ui](https://www.npmjs.com/package/gptx-chatbot-ui) to integrate an assistant into third-party pages.
## Steps
### 1.Get sharedKey
Create a chat assistant by：
- SafeGen AI(International)：[https://safegen.ai](https://safegen.ai)
- 千问千答(China)：[https://chat.dappworks.cn](https://chat.dappworks.cn)
Assistant -> Publish -> Web page share -> configuration completed -> get sharedKey
### 2.Install
```bash
npm install gptx-chatbot-ui
# or
pnpm add gptx-chatbot-ui
```
### 3.Usage
#### 1. Using Vue framework as an example, similar for other frameworks
```js
```
#### 2. Using js (ESM)
```HTML
demo
```
#### 3. gptx-chatbot-ui VS gptx-chatbot-ui-lite
The only difference between the two is that the lite version does not use [highlight.js](https://highlightjs.org/) to highlight the code syntax. If you do not have code syntax output or do not care about the beauty of the code syntax display, it is recommended to use the lite version, which will significantly reduce the size (about 63%).
## Config
| key | type | required | default | desc |
| ------------ | ------ | ---- | ---------|------------ |
| el | string | true | none |The DOM element where the chat will be mounted |
| chatBaseApi | string | true | none |SafeGen AI(International)：, 千问千答(China)： |
| sharedKey | string | true | none | - |
| locale | string | false | 'en' |'zh-CN', 'en', 'zh-TW' |
| theme | string | false | 'light' |'light'(default), 'dark' |
| customIcon.ask | string | false | 'default' | Don't use relative paths |
| customIcon.answer | string | false | 'default' | Don't use relative paths |