---
order: 1
title: 快速开始
mobile: false
group:
title: 使用教程
order: 0
---
XFlow
画布流程编排解决方案
## 安装
```bash
npm install @xrenders/xflow
```
## 基础使用
### 1. 引入组件
```js
import XFlow from '@xrenders/xflow';
```
### 2. 配置节点菜单以及节点面板
```js
const nodeSettings = [
{
title: '开始',
type: 'Start',
hidden: true,
targetHandleHidden: true,
icon: {
type: 'icon-start',
bgColor: '#17B26A',
},
settingSchema: {
type: 'object',
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
},
},
},
{
title: '结束',
type: 'End',
hidden: true,
sourceHandleHidden: true,
icon: {
type: 'icon-end',
bgColor: '#F79009',
},
settingSchema: {
type: "object",
properties: {
input: {
title: '变量一',
type: 'string',
widget: 'input',
},
}
}
},
{
title: 'LLM',
type: 'LLM',
description: '调用大语言模型回答问题或者对自然语言进行处理',
icon: {
type: 'icon-model',
bgColor: '#6172F3',
},
settingSchema: {
type: 'object',
properties: {
model: {
title: '模型',
type: 'string',
enum: ['gpt-3.5', 'gpt-4'],
default: 'gpt-3.5'
},
temperature: {
title: '温度',
type: 'number',
default: 0.7,
minimum: 0,
maximum: 1
}
}
}
},
{
title: 'Prompt',
type: 'Prompt',
description: '通过精心设计提示词，提升大语言模型回答效果',
icon: {
type: 'icon-prompt',
bgColor: '#17B26A',
},
},
{
title: '知识库',
type: 'knowledge',
description: '允许你从知识库中查询与用户问题相关的文本内容',
icon: {
type: 'icon-knowledge',
bgColor: '#6172F3',
},
},
];
```
### 3. 使用组件
```js
const Demo = () => {
return (
);
};
```
## 完整示例