EasyEditor AI 聊天助手：让低代码开发更简单

在使用 EasyEditor 的过程中，我们发现即使在低代码环境下，用户仍需要逐个拖拽组件、配置属性，面对复杂页面时这个过程依然繁琐。

能否进一步简化这个流程？让用户像日常对话一样，直接描述需求就能生成页面？基于这个想法，我们开发了 EasyEditor AI 聊天助手。

在线查看：easy-editor-dashboard.vercel.app/

如何使用

启动 AI 助手

在 EasyEditor 编辑器界面，你会看到右下角有一个浮动的 AI 助手按钮。

点击这个按钮，AI 聊天窗口会从右侧滑入。

与 AI 对话

打开聊天窗口后，你可以直接输入你的需求，比如：

"帮我生成一个用户管理页面"
"我要做一个数据展示的仪表板"
"创建一个登录表单"

使用智能建议

如果不知道该说什么，可以点击"显示建议"按钮，会出现预设的建议选项：

快速建议：最常用的几个功能，直接点击就能使用
更多建议：按类别分组的详细建议，包括页面生成、组件配置、数据展示、表单设计等

快捷键操作

为了提升使用效率，支持以下快捷键：

Enter：发送消息
Shift + Enter：换行
ESC：关闭聊天窗口

核心实现：从 Prompt 到画布操作的转换

这是整个系统的核心技术难点------如何将用户的自然语言需求转换为具体的画布操作。

1. 系统提示词设计

首先需要通过详细的系统提示词来约束 AI 的行为：

操作类型定义：

txt 复制代码

// 支持的操作类型
- add：添加组件到画布
- update：更新组件属性
- replace：替换现有组件
- remove：删除组件
- batch：批量执行多个操作
- move：移动组件位置
- wrap：使用容器包裹组件
- insertBefore/insertAfter：在指定位置插入组件

组件物料约束：通过预定义的组件库来限制 AI 只能使用已有的组件类型：

json 复制代码

// 文本组件配置示例
{
  "componentName": "Text",
  "props": {
    "text": "string",
    "style": { /* 自定义样式 */ }
  }
}
// 图表组件配置示例
{
  "componentName": "BarChart",
  "props": {
    "data": [...],           // 图表数据
    "xField": "category",    // X轴字段
    "yField": "value"        // Y轴字段
  }
}

2. 上下文注入机制

为了让 AI 理解当前画布状态，每次用户发送消息时会自动注入画布信息：

typescript 复制代码

const systemMessage: Message = {
  id: Date.now().toString(),
  content: `当前画布的 JSON 信息：\n${JSON.stringify(project.currentDocument?.export())}`,
  role: 'system',
  createdAt: new Date(),
}

这种机制确保了：

AI 能够感知画布的当前状态
避免重复创建相同功能的组件
基于现有组件进行智能调整
保持新旧组件之间的协调性

3. JSON 配置解析与执行

AI 返回的内容包含文字描述和 JSON 配置，需要准确提取并执行：

配置提取：

typescript 复制代码

// 支持多种 JSON 格式的识别
const jsonMatch = content.match(/```(?:json)?\s*(\{[\s\S]*?\})\s*```/i)
if (jsonMatch) {
  jsonContent = jsonMatch[1]  // 从代码块中提取
} else {
  const jsonObjectMatch = content.match(/\{[\s\S]*\}/)
  if (jsonObjectMatch) {
    jsonContent = jsonObjectMatch[0]  // 直接提取 JSON 对象
  }
}

操作执行：

typescript 复制代码

const executeOperation = (operation: AiOperation, document: Document) => {
  const { type, payload } = operation
  switch (type) {
    case 'add': {
      // 添加组件到画布
      const rootNode = document.getRoot()
      document.insertNode(rootNode, nodeSchema, position)
      break
    }
    case 'batch': {
      // 批量执行操作
      batchPayload.forEach(op => executeOperation(op, document))
      break
    }
    // ... 其他操作类型的处理
  }
}

4. 实际应用示例

以用户输入"帮我生成一个用户管理页面"为例：

需求理解：AI 分析用户需求，识别出需要标题、表格等组件

配置生成：

typescript 复制代码

{
  "type": "batch",
  "payload": [
    {
      "type": "add",
      "payload": {
        "componentName": "Text",
        "props": { "text": "用户管理" },
        "$dashboard": { "rect": { "x": 800, "y": 100, "width": 300, "height": 50 } }
      }
    },
    {
      "type": "add",
      "payload": {
        "componentName": "Table",
        "props": { "title": "用户列表" },
        "$dashboard": { "rect": { "x": 800, "y": 200, "width": 600, "height": 400 } }
      }
    }
    // 更多组件配置...
  ]
}

画布渲染：系统自动创建相应组件并按指定位置和大小进行布局

5. 用户界面优化

为了提供更好的用户体验，我们对 AI 返回的内容进行了过滤处理：

typescript 复制代码

export const filterMessageContent = (content: string): string => {
  // 移除 JSON 配置，只保留文字描述
  let filteredContent = content
  filteredContent = filteredContent.replace(/```(?:json)?\s*\{[\s\S]*?\}\s*```/gi, '')
  filteredContent = filteredContent.replace(/^\s*\{[\s\S]*?\}\s*$/gm, '')
  return filteredContent.trim()
}

这样用户看到的是友好的文字说明，而非复杂的技术配置。