Wayflow — 嵌入式 AI 工作流编辑器与运行时

Wayflow 快速入门

一句话卖点: 想把 AI 工作流嵌入到你的产品里？Wayflow 让你像嵌入富文本编辑器一样嵌入一个 AI 工作流构建器——拖拽节点、连线、导出 JSON、运行时执行，零外部依赖，MIT 开源。

这是什么？适合谁？

Wayflow 是一个可嵌入的 AI 工作流构建器，核心架构简洁：编辑器生成 JSON 图对象，运行时消费该 JSON 执行。内置 LLM（支持 tool calling）、图像生成、数组操作、条件分支等节点，支持自定义节点扩展。零外部依赖，框架无关，可嵌入任意前端项目（React/Vue/Svelte 等）。

核心特性：

• 编辑器与运行时分离：编辑器负责可视化构建，运行时负责执行，互不耦合
• Provider 中立：兼容 OpenAI API 格式的所有模型提供商
• 流式执行：支持实时流式输出，用户可看到每一步的进展
• 人机协作：支持暂停恢复，人工介入后再继续执行
• 自定义节点：通过接口扩展业务特有的节点类型

适合谁？前端开发者——需要在自己的 SaaS/工具产品中嵌入 AI 工作流编排能力；AI 产品经理——需要让用户可视化构建自定义 AI 流程；开源爱好者——MIT 协议，零依赖，可自由集成和二次开发。

不适合：只想用现成的可视化工作流平台（直接用 n8n/Flowise 即可）；不需要嵌入到其他产品中的场景（Wayflow 的核心价值在于可嵌入性）。

准备工作

1. Node.js 18+ 环境
2. 一个前端项目（React/Vue/Svelte/原生 JS 均可）
3. LLM API Key（OpenAI 兼容格式，如 OpenAI / Anthropic / 本地 Ollama）
4. 基础的 npm/JavaScript 知识

5 步快速上手

第 1 步：安装 Wayflow

npm install wayflow

Wayflow 零外部依赖，安装后即可在你的前端项目中引入。

第 2 步：挂载编辑器并构建工作流

import { createWorkflowEditor } from 'wayflow';

// 挂载编辑器到 DOM 容器
const editor = createWorkflowEditor({
  container: document.getElementById('editor-container'),
  theme: 'light', // 或 'dark'
});

// 编辑器已就绪，可以拖拽节点构建工作流

编辑器内置节点类型：

• Input 节点：定义工作流的输入参数
• LLM 节点：调用大语言模型，支持 tool calling
• Image Generation 节点：调用图像生成 API
• Array Operations 节点：对数组进行映射、过滤、归约等操作
• Conditional 节点：根据条件分支执行不同路径
• Output 节点：输出最终结果

第 3 步：导出 JSON 图定义

// 用户完成工作流构建后，导出 JSON 图
const graphJson = editor.exportGraph();
console.log(JSON.stringify(graphJson, null, 2));

// 可以保存到数据库、发送到后端、或让用户下载

导出的 JSON 图对象包含所有节点、连线、配置信息，完全可序列化，可以版本控制。

第 4 步：运行时执行工作流

import { WorkflowRuntime } from 'wayflow';

const runtime = new WorkflowRuntime({
  apiKey: 'your-llm-api-key',
  provider: 'openai', // 兼容 OpenAI API 格式
});

// 加载 JSON 图并执行
const result = await runtime.execute(graphJson, {
  input: { topic: 'AI Agent 的未来趋势' },
  onProgress: (step) => {
    console.log(`执行步骤: ${step.nodeName}`, step.status);
  },
});

console.log('最终结果:', result.output);

运行时支持流式执行，通过 onProgress 回调可以实时获取每个节点的执行状态。

第 5 步：自定义节点扩展

import { registerNode } from 'wayflow';

// 注册自定义节点类型
registerNode('web-search', {
  name: 'Web Search',
  category: 'Tools',
  inputs: [{ name: 'query', type: 'string' }],
  outputs: [{ name: 'results', type: 'array' }],
  async execute(inputs, config) {
    const response = await fetch(`https://api.search.com?q=${inputs.query}`);
    return { results: await response.json() };
  },
});

// 自定义节点现在出现在编辑器的节点面板中

自定义节点接口简单，只需定义输入输出和执行函数，即可无缝集成到编辑器和工作流中。

常见踩坑

1. API Key 配置错误：LLM 节点需要有效的 API Key，确保在运行时初始化时正确传入
2. 节点数据类型不匹配：JSON 图中节点之间的数据类型必须兼容，否则运行时执行会报错
3. 大体积 JSON 图：过于复杂的工作流可能导致 JSON 图体积过大，建议拆分为子工作流
4. 前端编辑器性能：如果工作流节点超过 100+，考虑使用虚拟化渲染优化性能
5. 浏览器兼容性：Wayflow 使用现代 Web API，需要 Chrome 90+ / Firefox 90+ / Safari 15+

初级用法

1. 基础 AI 流水线：Input → LLM → Output，最简单的 AI 文本处理
2. 多步处理链：Input → LLM1（翻译）→ LLM2（摘要）→ Output
3. 条件路由：Input → Conditional（分类）→ 分支 A/B → Output
4. 图像生成流程：Input → LLM（生成 Prompt）→ Image Generation → Output
5. 数据变换：Input → Array Operations（映射/过滤）→ Output

高级玩法

1. 人机协作工作流：设置暂停节点，人工审核后继续执行
2. 子工作流嵌套：将完整工作流打包为自定义节点，在其他工作流中复用
3. 多 Provider 混合：不同 LLM 节点使用不同的模型提供商
4. 实时流式展示：利用 onProgress 回调构建实时进度 UI
5. 工作流市场：让用户保存和分享他们的 JSON 图定义

小技巧

1. 先在线体验：访问 https://wayflow.build 试用在线 Demo，无需安装
2. 从简单开始：先用 Input → LLM → Output 验证链路，再逐步添加节点
3. JSON 图版本控制：将导出的 JSON 图纳入 Git，就像管理代码一样管理工作流
4. 善用模板：将常用的工作流模式保存为 JSON 模板，一键复用
5. 自定义节点命名：给自定义节点起个好名字，方便用户理解

常见问题 FAQ

Q1: Wayflow 和 n8n/Langflow 有什么区别？ Wayflow 定位是嵌入式工作流引擎，集成到其他产品中。n8n/Langflow 是独立的工作流平台。Wayflow 更像是一个”组件”，n8n 更像是一个”应用”。信息来源：GitHub README。

Q2: 支持哪些 LLM 提供商？ 支持所有兼容 OpenAI API 格式的提供商，包括 OpenAI、Anthropic、Google AI、Ollama、LM Studio 等。信息来源：GitHub README。

Q3: 可以自托管吗？ Wayflow 不是服务端应用，而是前端库。你将它集成到自己的应用中，完全由你控制部署。运行时可以在 Node.js 后端执行。信息来源：GitHub README。

Q4: 支持多用户协作吗？ 编辑器本身不包含多用户协作功能，但可以通过 WebSocket 等技术在 JSON 图层面实现实时协作。信息来源：GitHub README。

Q5: 生产环境可用吗？ 2026 年 7 月发布，项目较新。MIT 协议开源，代码质量好，但社区规模和生态还在早期阶段。建议在非关键场景试用后再决定是否用于生产。信息来源：GitHub 页面。

进阶学习建议 / 参考链接

• GitHub 仓库：https://github.com/TahaSh/wayflow
• 在线体验：https://wayflow.build
• npm 包：https://www.npmjs.com/package/wayflow
• n8n 文档（竞品参考）：https://docs.n8n.io
• Langflow（竞品参考）：https://github.com/langflow-ai/langflow

---

本文基于官方文档和公开资料整理，AI 辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。 评分依据全部可追溯至公开数据源，见「评分与标签」章节。