# 前端框架集成
作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。
## 有爱文档安装
我们需要安装 UAI Editor 软件，软件已经打包发布到 [https://www.npmjs.com/](https://www.npmjs.com/) 平台，可以直接通过以下命令安装：
```bash
npm i @uai-team/uai-editor
```
## 软件集成
然后，我们可以将 UAI Editor 与自己的项目进行集成。
### 独立使用
* index.html
```html
UAI Editor
```
* main.ts
```js
import { UAIEditor } from '@uai-team/uai-editor';
import '@uai-team/uai-editor/dist/style.css';
new UAIEditor({
element: "#uai-editor",
content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
})
```
### 与 VUE 集成
```ts
```
### 与 React 集成
```js
import {useEffect, useRef} from 'react';
import { UAIEditor } from '@uai-team/uai-editor';
import '@uai-team/uai-editor/dist/style.css';
function App() {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
const uaiEditor = new UAIEditor({
element: divRef.current,
content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
})
return ()=>{
uaiEditor.destroy();
}
}
}, [])
return (
<>
)
}
export default App
```
## 与人工智能集成
如果要在 UAI Editor 中使用 AI 功能，需要在初始化 UAIEditor 的时候配置相关的配置项：
```js
new UAIEditor({
element: "#uai-editor",
content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
ai: { // AI 配置项
chat: { // 聊天配置项
models: { // 模型配置项
"default": {
modelType: 'openai',
baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
apiKey: process.env.CHATGLM_APIKEY,
model: 'glm-4-flash'
},
"GLM-4": { // 聊天功能选择使用的模型，配置智谱AI的GLM-4-Flash模型
modelType: 'openai',
baseUrl: 'https://open.bigmodel.cn/api/paas/v4',
apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key
model: 'glm-4-flash'
},
"InternLM2.5": { // 聊天功能选择使用的模型，配置上海人工智能实验室的InternLM2.5模型
modelType: 'openai',
baseUrl: 'https://internlm-chat.intern-ai.org.cn/puyu/api/v1',
apiKey: process.env.INTERNLM_TOKEN, // 此处填写您上海人工智能实验室的 API Key
model: 'internlm2.5-latest'
},
},
},
image: { // 图像配置项
models: { // 模型配置项
text2image: { // 文本生成图像模型配置项
"default": {
modelType: 'openai',
baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations
apiKey: process.env.CHATGLM_APIKEY,
model: 'cogview-3-flash'
},
"CogView-3": { // 绘图功能选择使用的模型，配置智谱AI的CogView-3-Flash模型
modelType: 'openai',
baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations
apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key
model: 'cogview-3-flash'
},
}
}
}
}
})
```
## 软件运行
最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目：
```bash
npm install
npm run dev
```