衍生的
代理生成UI平台
从自然语言到React应用程序只需几秒钟。
](https://github.com/Sri-Krishna-V/Derived-WMD)   
关于 • 技术栈 • 建筑 • 入门指南 • Tambo整合
想知道更多吗？
______________________________________________________________________
关于本项目
衍生的 是AI第一 代理发展环境 它将自然语言转化为实时的React应用程序。与在真空中运行的传统“文本到代码”工具不同，Derived采用了自主的 Tambo代理 它主动地实时探索、理解和修改你的代码库。
通过组合 生成式UI，the 模型上下文协议（MCP），以及安全 E2B沙盒运行时，衍生品弥合了高层想法和执行之间的差距。它管理整个应用程序生命周期——从使用Firecrawl克隆设计到在现有代码库上实现复杂功能——自主安装包、修复构建错误，以及直接在聊天流中呈现交互式进度组件。
关键转变
- 从强制性到声明性：不再手动单击文件。描述你的意图，然后代理协调工具。
- 盲目接地：代理人使用 主控程序 在编写一行代码之前扫描项目文件，几乎消除了幻觉。
- 静态到可交互：UI不仅仅是预览；这是一个 交互式沙盒 代理可以在其中代表您切换视口、切换控制台和导航路线。
______________________________________________________________________
我们如何在衍生作品中使用Tambo
Derived是一个“生成UI优先”的应用程序。我们使用了 Tambo SDK 将界面从被动聊天流转换为主动、人工智能编排的工作空间。
1.作为代理编排者（工具）
我们注册了高级 Tambo工具 代理可以自主选择和调用：
generateCode：一个用于原子文件操作的结构化工具，具有Zod验证功能。它支持事务回滚——如果一个文件失败，整个更改都会恢复。manageSandbox：允许代理启动、停止或重新启动E2B microVM，并根据构建日志安装NPM依赖项。
2.生成UI反馈（组件）
Tambo渲染丰富 React组件 在聊天流中，提供对Agent思维过程的实时可见性：
BuildStatus：显示代理正在做什么的实时进度卡（例如。， *“正在安装框架运动…”*, *“脚手架Vite…”*).AppSpecSheet：Agent为新手用户呈现的交互式需求表单，以便在开始构建之前收集规格。InteractableSandbox：Agent使用的实时预览组件 *控制*。它可以通过更新其内部状态来响应“显示移动视图”。
3.弥合发现差距（MCP）
我们整合 模型上下文协议（MCP） 直接向Tambo提供商提供支持。
- 它解决了什么： 通常，AI会“猜测”你有什么文件。
- 它是如何工作的： 我们的本地MCP服务器公开了E2B文件系统。代理人使用
list_files和read_file在提出更改之前，通过MCP使用工具“查看”您的代码。
______________________________________________________________________
架构图
技术栈
Derived基于先进的现代堆栈构建：
核心情报
- 代理编排器:
@tambo-ai/react+Vercel AI SDK - 发现协议：模型上下文协议（MCP）SDK
- LLM：谷歌双子座2.5专业版（推理），GPT-5（代码），克劳德·索内特3.5
- Web剪贴: 火爬 （站点到Markdown提取）
前端和UI
- 框架：Next.js 15（应用路由器、Turbopack）
- 语言：Types/React 19
- 样式：顺风CSS v4，Framer Motion，Radix UI
运行时和执行
- 沙箱: E2B代码解释器 （安全云微型虚拟机）
- 开发服务器：Vite（启用HMR）
- 程序包管理器：NPM（由代理自动管理）
______________________________________________________________________
系统架构
派生遵循a 声明意图 建筑。界面会根据Agent对工具和组件的选择进行调整。
graph TB
User[👤 Developer] -->|Natural Language| Agent[🧠 Tambo Agent]
subgraph "🛠️ Tool Registry"
Agent -->|Invoke| GC[generateCode]
Agent -->|Invoke| MS[manageSandbox]
end
subgraph "🔌 Discovery (MCP)"
Agent -->|Query| MCPServer[MCP Server Bridge]
MCPServer -->|Read/List| FS[E2B Filesystem]
end
subgraph "🎨 Generative UI (Tambo)"
Agent -->|Render| BS[BuildStatus]
Agent -->|Render| AS[AppSpecSheet]
Agent -->|Sync State| IS[InteractableSandbox]
end
subgraph "📦 Infrastructure"
GC -->|Apply| FS
MS -->|Control| Node[Node.js Runtime]
FS -->|HMR| IS
end
classDef agent fill:#7c3aed,stroke:#5b21b6,stroke-width:2px,color:#fff;
classDef tool fill:#059669,stroke:#047857,stroke-width:2px,color:#fff;
classDef mcp fill:#0ea5e9,stroke:#0369a1,stroke-width:2px,color:#fff;
class Agent agent;
class GC,MS tool;
class MCPServer mcp;______________________________________________________________________
演示视频
Click the thumbnail above to watch the full project demo on YouTube.
演示幻灯片
______________________________________________________________________
入门指南
先决条件
- Node.js 18+
- pnpm （首选）或npm
- API密钥用于：
- E2B_API_键: e2b.dev - NEXT_PUBLIC_TAMBO_API_KEY: console.tambo.co - FIRECRAWL_API_键：（可选）用于设计克隆 - LLM密钥：（Anthropic、谷歌或OpenAI）
安装
- 克隆存储库:
git clone https://github.com/Sri-Krishna-V/Derived-WMD.git
cd Derived-WMD- 安装依赖项:
pnpm install- 配置环境:
创建一个 .env.local 文件：
# Required
E2B_API_KEY=e2b_...
NEXT_PUBLIC_TAMBO_API_KEY=your_tambo_key
GOOGLE_GENERATIVE_AI_API_KEY=AIza...
# Optional
FIRECRAWL_API_KEY=fc_...
ANTHROPIC_API_KEY=sk-ant...
OPENAI_API_KEY=sk-...- 运行开发服务器:
pnpm dev______________________________________________________________________
项目结构
app/ # Next.js App Router routes
api/ # API endpoints (Sandbox, Scraping, MCP)
components/ # Main layout components (Theme, Logo)
tambo/ # Tambo Generative UI chat interface
components/ # Shared UI components
tambo/ # AI-renderable components (BuildStatus, AppSpecSheet)
ui/ # Base Radix+Tailwind components
lib/ # Core logic and utilities
tools/ # Tambo Tool definitions (generateCode, manageSandbox)
tambo-config.ts # Central registry for Tambo tools/components
specs/ # Design and requirement specifications
types/ # TypeScript definitions______________________________________________________________________
配置
自定义行为 config/tambo-config.ts 和 app.config.ts.
| 设置 | 默认值 | 说明 |
|---|---|---|
e2b.timeoutMinutes | 15 | 沙盒会话生命周期 |
ai.defaultModel | gemini-2.5-pro | 主要高效模型 |
tambo.maxSuggestions | 3 | AI跟进建议数量 |
code.hmrDelay | 2000 | Vite热装等待时间 |
// Example: Switch to GPT-5
export const appConfig = {
ai: {
defaultModel: 'openai/gpt-5-o1',
reasoningEffort: 'high'
}
}______________________________________________________________________
故障排除
| 问题 | 解决方案 |
|---|---|
| “Vite服务器未就绪” | 沙盒需要大约10秒才能启动。等待 BuildStatus 卡片显示绿色。 |
| “幻觉文件” | 代理人使用 主控程序 为了避免这种情况。如果问题仍然存在，请询问“再次列出文件”。 |
| 预览404 | 如果预览为空，请让代理“重新启动沙盒”。 |
| 包错误 | 代理自动检测丢失的软件包，并通过以下方式安装它们 manageSandbox. |
______________________________________________________________________
高级用例
1.视觉继承与设计克隆
脚本： *“我喜欢Linear主页的布局。使用我品牌的原色（#7C3AED）重建英雄部分。”*
- 代理循环：
1. 报废： 代理使用 火爬 以提取目标URL的语义结构和CSS模式。 1. 视觉接地： 代理可选择接受 截图 验证网站的空间关系和排版。 1. 翻译： 分析Markdown/截图上下文并生成高保真Tailwind代码。 1. 部署： 提供一个E2B沙盒，并在 交互式沙盒 以获得即时反馈。
2.交互式需求收集（自适应UI）
脚本： *“为我构建一个项目管理应用程序。”*
- 代理循环：
1. 意图分析： 代理检测到请求是高级/模糊的。 1. 指导： 它不是猜测，而是呈现 AppSpecSheet 组件直接在聊天中。 1. 协作： 用户通过UI选择功能（看板、分析、验证）和设计风格。 1. 执行： 代理从可交互组件中读取提交的道具，并根据这些特定的护栏构建整个项目结构。
3.深度架构重构
脚本： *“重构中的所有功能组件 components/ 文件夹，以使用我们刚才讨论的新复合组件模式。"*
- 代理循环：
1. 发现： 代理使用 主控程序 (list_files)以映射整个目录结构。 1. 语境阅读： 使用MCP系统地读取每个文件(read_file)了解依赖关系。 1. 外科编辑： 使用 generateCode 该工具应用多文件更新，确保整个代码库的导入和导出保持一致。 1. 验证： 在后台监控Vite构建过程。如果重构破坏了类型，则代理会捕获错误并自我纠正。
4.自主故障排除（自愈）
脚本： *“预览是空白的，你能修复它吗？”*
- 代理循环：
1. 诊断： 代理调用 monitor-vite-logs 从沙箱读取运行时输出。 1. 错误隔离： 识别缺失的对等依赖关系（例如。， framer-motion 版本不匹配）或语法错误。 1. 补救措施： 自主呼叫 manageSandbox 随着 install_deps 行为或用途 generateCode 以修复语法。 1. 恢复： 重新启动Vite服务器并验证 InteractableSandbox 状态返回到 active.
5.无缝项目出口
脚本： *“我对仪表板很满意。给我代码，这样我就可以部署它了。”*
- 代理循环：
1. 一致性检查： 代理通过MCP运行最终验证，以确保所有请求的功能都已实现，并且构建是稳定的。 1. 包装： 调用 create-zip 编排层，用于捆绑整个项目文件系统（剥离不必要的构建工件）。 1. 移交： 提供可下载的生产就绪React应用程序的ZIP，与Vercel、Netlify或自托管完全兼容。
______________________________________________________________________
贡献
我们欢迎社区的贡献！无论您是在修复错误、添加新的Tambo工具还是改进文档，我们都非常感谢您的帮助。
- 分叉 存储库。
- 创建 一个新的分支(
git checkout -b feature/amazing-feature). - 提交 您的更改(
git commit -m 'Add some amazing feature'). - 推 到分行(
git push origin feature/amazing-feature). - 打开 拉取请求。
______________________________________________________________________
开发
衍生的 是为以下目的而构建的实验平台 *UI反击* 编程马拉松。
建于 使用Tambo AI