React Prompt Editor

树形 Prompt 编辑器 React 组件，适用于复杂 AI 工作流、节点编排和多段内容协作编辑。

当前 npm 版本基于 Ant Design UI 体系构建，宿主项目需要提供 antd 与 @ant-design/x。后续会逐步提供其他 UI 库版本。

• 官网文档: https://www.rpeditor.asia
• npm: https://www.npmjs.com/package/react-prompt-editor
• GitHub: https://github.com/SquabbyZ/react-prompt-editor

安装

pnpm add react-prompt-editor antd @ant-design/x

react、react-dom、antd 和 @ant-design/x 为 peerDependencies。其中 React 应由你的应用本身提供，当前 UI 版本需要你额外安装 antd 与 @ant-design/x。

快速开始

import { PromptEditor } from 'react-prompt-editor';
import 'react-prompt-editor/styles/index.css';

const initialValue = [
  {
    id: 'root-1',
    title: 'System Prompt',
    content: '# Role\n\nYou are a helpful assistant.',
    children: [],
    isLocked: false,
    hasRun: false,
    dependencies: [],
  },
];

export default function App() {
  return (
    <PromptEditor
      initialValue={initialValue}
      onChange={(data) => {
        console.log('tree changed:', data);
      }}
      theme="system"
      draggable
    />
  );
}

常用 Props

| Prop | 说明 | | --- | --- | | initialValue | 非受控初始树数据 | | value | 受控模式数据 | | onChange | 树数据变化回调 | | onRunRequest | 节点运行请求回调 | | optimizeConfig | 内置 AI 优化配置 | | onOptimizeRequest | 自定义 AI 优化流程 | | previewMode | 只读预览模式 | | previewRenderMode | 预览渲染模式，支持 readonly-editor 和 markdown | | draggable | 是否启用拖拽排序 | | theme | 主题模式，支持 system / light / dark | | locale | 国际化语言包 | | renderToolbar | 自定义顶部工具栏渲染函数 | | dataSelector | 数据选择器组件，支持 @ 变量插入功能 |

额外导出

import { enUS, zhCN } from 'react-prompt-editor';

主要特性

🔖 数据选择器（变量插入）

支持通过 @ 符号触发数据选择器，在编辑器中插入变量标签。变量在编辑器中以高亮 Tag 样式显示，并在运行节点时自动替换为实际值：

import { PromptEditor } from 'react-prompt-editor';
import { SimpleDataSelector } from './MyDataSelector';

const App = () => (
  <PromptEditor
    initialValue={initialValue}
    dataSelector={SimpleDataSelector}
    onRunRequest={(request) => {
      // request.content 中的变量标签已被自动替换为实际值（如 {{user.name}}）
      console.log('处理后的内容:', request.content);
      // 执行异步请求...
      request.meta?.onNodeRun?.(request.nodeId, { result: '✅ 成功' });
    }}
  />
);

多选模式

数据选择器支持多选模式，允许用户一次性选择多个变量并批量插入到编辑器中：

import { PromptEditor } from 'react-prompt-editor';
import { MultiSelectDataSelector } from './MultiSelectDataSelector';

const App = () => (
  <PromptEditor
    initialValue={initialValue}
    dataSelector={MultiSelectDataSelector} // 支持多选的选择器组件
  />
);

🔗 节点依赖管理

通过 dependencies 字段建立节点间的依赖关系。运行节点时，onRunRequest 回调的 dependenciesContent 会自动包含所有依赖节点的详细信息（包括 id、标号、标题、内容和运行状态）：

const [value, setValue] = useState<TaskNode[]>([
  {
    id: 'role',
    title: '角色定义',
    content: '# Role\n\nYou are a helpful assistant.',
    hasRun: true,
    dependencies: [],
  },
  {
    id: 'task',
    title: '当前任务',
    content: '基于角色定义完成任务...',
    dependencies: ['role'], // 依赖 "角色定义" 节点
  },
]);

<PromptEditor
  value={value}
  onChange={setValue}
  onRunRequest={(request) => {
    // request.dependenciesContent 包含依赖节点的完整信息
    console.log('依赖节点:', request.dependenciesContent.map(d => ({
      id: d.nodeId,
      number: d.nodeNumber, // 节点标号，如 "1", "1.1"
      title: d.title,
      content: d.content,
      hasRun: d.hasRun,
    })));
  }}
/>

🎨 自定义工具栏

使用 renderToolbar 完全控制顶部工具栏的内容和布局：

<PromptEditor
  initialValue={initialValue}
  renderToolbar={(actions) => (
    <div style={{ display: 'flex', gap: '8px' }}>
      <span>📝 我的 Prompt 工作区</span>
      <button onClick={() => actions.addRootNode()}>添加节点</button>
    </div>
  )}
/>

👁️ 预览模式

提供两种预览渲染方式：

// 只读编辑器模式
<PromptEditor
  previewMode
  previewRenderMode="readonly-editor"
/>

// Markdown 阅读模式
<PromptEditor
  previewMode
  previewRenderMode="markdown"
/>

文档

• 完整使用文档与示例: https://www.rpeditor.asia
• 问题反馈: https://github.com/SquabbyZ/react-prompt-editor/issues

License

MIT