零基础上手SmythOS Studio：手把手构建你的第一个拖拽式AI Agent

SmythOS Studio 是一款开源的可视化 AI Agent 构建与部署平台，通过拖拽式画布连接 LLM、API 和数据处理组件，让你不用写代码也能在几分钟内搭建出智能体，并一键部署为聊天机器人、API 等多种形态。本文将带你从零开始完成环境部署，并亲手构建、测试、上线你的第一个拖拽式 AI Agent。

一、SmythOS Studio 是什么？为什么新手友好？

一句话概括：把"写 Agent"变成"画流程图"。它的核心设计理念有三点（见 README.md）：

平台采用 monorepo 架构，主要由三个部分组成：

• App 包：可视化构建器 + React 前端 + 后端 API，是你日常打交道的界面
• Middleware 包：核心 API 服务与数据库管理
• Runtime 包：高性能 Agent 执行引擎，负责真正"跑"你的 Agent

💡 如果你更喜欢纯代码方式构建 Agent，官方还提供了独立的 Runtime SDK 与 CLI 生态，两套方式可以互相配合。

二、一键部署：用 Docker 快速搭建开发环境

新手最推荐Docker Compose方式，一条命令拉起完整技术栈（应用 + MySQL + Redis + 反向代理 Traefik）。

环境要求

• Docker 20.10+ 与 Docker Compose 2.0+
• 至少 8GB 内存、10GB 磁盘空间
• 确保 80、443、5050、5053、8080 端口空闲

三步启动

# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/sm/smythos-studio cd smythos-studio # 2. 初始化环境配置 cp .env.compose.example .env # 3. 启动全部服务 docker compose up -d

服务健康后，访问http://localhost:6060即可进入主应用。

如果启动失败，用docker compose ps查看状态、docker compose logs smythos查看日志；端口冲突时先释放 80/443 端口。完整的排错清单在 DOCKER_COMPOSE.md 的 Troubleshooting 一节。

三、认识主界面：新手引导会带你飞

登录后你会看到团队仪表盘（Team Dashboard），这里有三条最快上线路径：

1. Quickstart with Example：跟随现成示例 Agent 学习完整流程（推荐零基础从这里开始）
2. Start With Template：直接用内置模板（如内容策略生成器、客户分析 Agent）
3. Join Community：加入社区获取更多支持

点击示例 Agent 进入 Builder 后，系统会自动播放交互式引导，依次介绍四个核心区域（引导步骤定义在 packages/app/src/builder-ui/tutorials/index.ts）：

四、构建第一个 Agent：拖、连、配三步走

第 1 步：拖入组件

从左侧组件面板把组件拖到画布上。常用组件都有现成实现，位于 packages/app/src/builder-ui/components/ 目录，例如：

• GenAILLM.class.ts：通用大语言模型调用，负责"思考"
• LLMAssistant.class.ts：LLM 助手组件
• APICall.class.ts：调用外部 API
• DataSourceLookup.class.ts：查询数据源（知识库检索）
• MemoryWriteKeyVal.class.ts等记忆组件：让 Agent 记住上下文
• Classifier.class.ts：按条件分流工作流

第 2 步：连线编排逻辑

在组件之间拉线连接，数据沿着连线从一个组件的Output流到下一个组件的Input。一个典型的最小对话 Agent 就是：用户输入 → LLM → 返回回答。画布支持平移缩放、小地图导航与快捷键操作，核心逻辑见 packages/app/src/builder-ui/workspace/Workspace.class.ts。

第 3 步：配置组件参数

点击组件即可打开配置面板，选择模型、填写提示词（Prompt）、设置温度等参数。懒得上手配置？直接在Agent Weaver里用一句话描述需求（比如"做一个能总结文档的客服助手"），它会自动帮你生成组件和连线。

五、调试、测试与部署上线

工具栏的Debug / Test / Deploy覆盖了 Agent 的完整生命周期：

1. Debug：单步执行，逐组件检查输入输出，快速定位问题
2. Test：通过表单预览（Form Preview）或直接调 API 测试整个 Agent
3. Deploy：一键让 Agent 上线，自动获得 SSL/TLS 证书与版本管理

部署时你可以选择 Agent 的"化身"（Embodiment）——决定它以什么形态服务用户，对应实现在 packages/app/src/react/features/embodiments/：

• 🤖Chatbot：网页聊天机器人
• 🔌API：标准 REST 接口，供其他系统调用
• 📝Form：表单式交互（如智能表单）
• 🎙️Voice：语音对话形态
• 以及 MCP、GPT 生态集成等更多形态

🎉 至此，你的第一个拖拽式 AI Agent 已经跑起来了！

六、进阶路线与延伸资料

新手建议的行动清单：

• 用 Docker 启动平台并访问 http://localhost:6060
• 跟随 Quickstart Example 跑通一个示例 Agent
• 在画布中拖入一个 LLM 组件，写出你的第一条提示词
• 把它部署成 Chatbot，分享给同事试试

SmythOS Studio 让 AI Agent 开发从"堆代码"变成"画蓝图"——从今天起，把重复劳动交给你的第一个智能体吧。