使用说明

衍生的

代理生成UI平台

从自然语言到React应用程序只需几秒钟。

关于 • 技术栈 • 建筑 • 入门指南 • 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模式。
2. 视觉接地： 代理可选择接受截图验证网站的空间关系和排版。
3. 翻译： 分析Markdown/截图上下文并生成高保真Tailwind代码。
4. 部署： 提供一个E2B沙盒，并在 交互式沙盒 以获得即时反馈。

2.交互式需求收集（自适应UI）

脚本： “为我构建一个项目管理应用程序。”

代理循环：
1. 意图分析： 代理检测到请求是高级/模糊的。
2. 指导： 它不是猜测，而是呈现 AppSpecSheet 组件直接在聊天中。
3. 协作： 用户通过UI选择功能（看板、分析、验证）和设计风格。
4. 执行： 代理从可交互组件中读取提交的道具，并根据这些特定的护栏构建整个项目结构。

3.深度架构重构

脚本： “重构中的所有功能组件 components/ 文件夹，以使用我们刚才讨论的新复合组件模式。"

代理循环：
1. 发现： 代理使用 主控程序 (list_files)以映射整个目录结构。
2. 语境阅读： 使用MCP系统地读取每个文件(read_file)了解依赖关系。
3. 外科编辑： 使用 generateCode 该工具应用多文件更新，确保整个代码库的导入和导出保持一致。
4. 验证： 在后台监控Vite构建过程。如果重构破坏了类型，则代理会捕获错误并自我纠正。

4.自主故障排除（自愈）

脚本： “预览是空白的，你能修复它吗？”

代理循环：
1. 诊断： 代理调用 monitor-vite-logs 从沙箱读取运行时输出。
2. 错误隔离： 识别缺失的对等依赖关系（例如。， framer-motion 版本不匹配）或语法错误。
3. 补救措施： 自主呼叫 manageSandbox 随着 install_deps 行为或用途 generateCode 以修复语法。
4. 恢复： 重新启动Vite服务器并验证 InteractableSandbox 状态返回到 active.

5.无缝项目出口

脚本： “我对仪表板很满意。给我代码，这样我就可以部署它了。”

代理循环：
1. 一致性检查： 代理通过MCP运行最终验证，以确保所有请求的功能都已实现，并且构建是稳定的。
2. 包装： 调用 create-zip 编排层，用于捆绑整个项目文件系统（剥离不必要的构建工件）。
3. 移交： 提供可下载的生产就绪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反击 编程马拉松。

报告Bug • 请求功能

建于使用Tambo AI