企业官网建设流程全解析

10分钟上手 Tinyflow：为 Web 应用添加 AI 工作流设计画布的完整教程

【免费下载链接】tinyflowTinyflow is a lightweight AI agent solution.项目地址: https://gitcode.com/gh_mirrors/tin/tinyflow

Tinyflow 是一款轻量级 AI 工作流编排组件，它不是一个独立的 AI 产品，而是一个可以嵌入任何 Web 应用的设计器组件。本教程将带你用 10 分钟完成集成：安装 npm 包、引入一个类、挂上一个容器，就能让传统 Web 应用拥有可视化编排 AI 智能体工作流的能力，支持 React、Vue、Svelte 以及原生 JavaScript，前后端技术栈互不绑定。

一、Tinyflow 是什么？为什么需要 AI 工作流设计画布

很多团队做 AI 应用时会遇到同样的困境：大模型能力很强，但业务逻辑（调用大模型、请求接口、条件判断、循环执行）散落在代码里，无法可视化、无法让非开发者参与编排。

Tinyflow 的解决思路是"小而美"：

• 🧩前端是组件，不是产品：基于 Web Component 开发，体积仅 100+ KB，零框架依赖，不与你的 UI 库冲突；
• 🔗前后端解耦：前端专注可视化编排，后端专注执行逻辑，两者通过标准 JSON 契约通信；
• 🚀契约驱动扩展：通过 type + parameters 机制扩展节点，新增能力只需注册实现，无需改核心代码。

也就是说，你的订单系统、CRM、管理后台，只需嵌入这个组件，就能内置一块 AI 工作流设计画布。

二、最快安装方法：3 步集成 Tinyflow 画布

第 1 步：安装 npm 包

原生 JS 或想直接控制底层能力，安装核心 UI 包：

npm install @tinyflow-ai/ui

如果你的项目是 React 或 Vue，可以直接使用对应封装（更贴近框架习惯）：

npm install @tinyflow-ai/react # React 项目 npm install @tinyflow-ai/vue # Vue 项目

第 2 步：引入并初始化

以原生 JavaScript 为例，核心只有 3 行代码：

import { Tinyflow } from '@tinyflow-ai/ui'; import '@tinyflow-ai/ui/dist/index.css'; const tinyflow = new Tinyflow({ element: '#app' // 挂载容器：CSS 选择器或 DOM 元素 });

初始化参数很简单：

第 3 步：给容器设置宽高

画布需要一个有明确尺寸的区域，例如：

<div id="app" style="width: 800px; height: 600px;"></div>

完成！刷新页面，你会看到一块完整的 AI 工作流设计画布，节点从左侧面板拖入，连线、配置参数即可编排。

三、画布内置哪些 AI 工作流节点？

Tinyflow 开箱即用的节点覆盖了 AI 应用最常见的编排需求：

节点之间通过连线组成执行链路，支持失败重试、循环控制等执行策略，全部可以通过配置完成，无需编码。

自定义节点：AI 工作流即插即用

当内置节点不够用时，可以注册自定义节点：前端画一个配置面板，后端实现执行逻辑，通过 type 契约对接，核心代码零改动。

四、设计完成后：导出 JSON，交给后端执行

画布编好的工作流如何真正跑起来？Tinyflow 的分工非常清晰：

1. 前端导出：调用tinyflow.getData()即可拿到完整的节点与连线数据（标准 JSON）；
2. 后端执行：Java 后端引入tinyflow-core依赖即可解析并执行工作流，不绑定任何 Java 框架（JDK8 起步）；
3. 对接大模型框架：如果你的 Java 后端使用 Spring AI 或 Agents-Flex，官方提供了对应的 support 模块，Llm 节点可直接复用这些框架管理的大模型实例。

后端还提供 Node.js 与 Python 版本（开发中），覆盖更多语言生态。

五、新手常见问题避坑清单

• ❓画布是空白/不显示？检查挂载容器是否有明确的宽高样式，这是新手最常踩的坑；
• ❓样式和现有 UI 冲突？组件不依赖任何 UI 样式框架，如需定制可覆盖默认的tf-theme-light类；
• ❓大模型列表怎么配置？通过初始化参数provider.llms提供模型下拉选项，支持同步或异步返回；
• ❓能用 React/Vue 吗？可以，@tinyflow-ai/react和@tinyflow-ai/vue已提供组件封装和 ref 方法，getData()用法一致。

写在最后

到这里，你的 Web 应用已经拥有了完整的 AI 工作流设计画布。想要深入了解，可以查看仓库中的以下资料：

• 快速开始文档：docs/zh/quick-start.md
• 组件原理说明：docs/zh/what-is-tinyflow.md
• 各框架集成指南：docs/zh/integration/目录（含 react、vue、native、springai 等）
• 核心组件源码：packages/ui/src/components/目录

Tinyflow 是一个"小而美"的开源项目，如果你的业务系统想低成本地接入 AI 编排能力，它值得 10 分钟一试。

【免费下载链接】tinyflowTinyflow is a lightweight AI agent solution.项目地址: https://gitcode.com/gh_mirrors/tin/tinyflow