10分钟上手 Tinyflow为 Web 应用添加 AI 工作流设计画布的完整教程【免费下载链接】tinyflowTinyflow is a lightweight AI agent solution.项目地址: https://gitcode.com/gh_mirrors/tin/tinyflowTinyflow 是一款轻量级 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 元素 });初始化参数很简单参数说明element挂载的目标容器必填data工作流初始数据包含 nodes节点和 edges连线provider数据提供者可动态注入大模型列表、知识库列表第 3 步给容器设置宽高画布需要一个有明确尺寸的区域例如div idapp stylewidth: 800px; height: 600px;/div完成刷新页面你会看到一块完整的 AI 工作流设计画布节点从左侧面板拖入连线、配置参数即可编排。三、画布内置哪些 AI 工作流节点Tinyflow 开箱即用的节点覆盖了 AI 应用最常见的编排需求节点类型用途Start / End工作流的开始与结束LLM调用大模型配置提示词与模型参数Http发起 HTTP 请求对接任意业务接口Code执行代码逻辑Template文本模板渲染Condition条件分支判断Loop循环节点Confirm人工确认挂起等待用户操作后继续Knowledge / SearchEngine知识库检索、搜索引擎节点Custom自定义节点扩展你自己的业务节点之间通过连线组成执行链路支持失败重试、循环控制等执行策略全部可以通过配置完成无需编码。自定义节点AI 工作流即插即用当内置节点不够用时可以注册自定义节点前端画一个配置面板后端实现执行逻辑通过 type 契约对接核心代码零改动。四、设计完成后导出 JSON交给后端执行画布编好的工作流如何真正跑起来Tinyflow 的分工非常清晰前端导出调用tinyflow.getData()即可拿到完整的节点与连线数据标准 JSON后端执行Java 后端引入tinyflow-core依赖即可解析并执行工作流不绑定任何 Java 框架JDK8 起步对接大模型框架如果你的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
