MCP-UI Monorepo
一个完整的Bun monorepo，支持Next.js、tRPC、Supabase、Drizzle ORM、AI SDK和Docker，用于构建MCP-UI应用程序。
🏗️ 建筑
- 应用程序：
- @app/web -Next.js 14前端，带有样式化组件和tRPC客户端 - @app/server -Express+tRPC服务器，具有MCP端点、Supabase、Drizzle和AI集成
- 包装：
- @pkg/ui -共享样式化组件图元（按钮、卡片、全局样式） - @pkg/db -Drizzle ORM模式和数据库实用程序
🚀 快速开始
# Install dependencies
bun install
# Copy environment template
cp .env.example .env
# Start development servers
bun run dev📍 端点
- Web应用程序： http://localhost:3000
- 服务器运行状况： http://localhost:8787/health
- tRPC端点： http://localhost:8787/trpc
- MCP端点： http://localhost:8787/mcp
🧪 测试MCP-UI流量
- 打开http://localhost:3000
- 点击“通过tRPC加载”或“通过HTTP加载”
- iframe将呈现MCP UI资源
- 点击iframe中的“Emit mcp ui:event”按钮
- web应用程序将收到postMessage并显示警报
📜 可用脚本
# Development
bun run dev # Start both server and web in parallel
# Build
bun run build # Build server and web apps
# Type checking
bun run typecheck # Check types across all workspaces
# Database (in packages/db)
bun run drizzle:gen # Generate Drizzle migrations
bun run drizzle:push # Push schema to database🐳 码头工人
# Build and run with Docker Compose
docker-compose up --build
# Server will be available at http://localhost:8787
# Web will be available at http://localhost:3000🔧 环境变量
复制 .env.example 到 .env 并配置：
- Supabase：
SUPABASE_URL,SUPABASE_ANON_KEY,SUPABASE_SERVICE_ROLE_KEY - 数据库：
DATABASE_URL（PostgreSQL连接字符串） - 人工智能服务：
ANTHROPIC_API_KEY,MORPH_API_KEY,RELACE_API_KEY - 服务器：
PORT（默认值：8787） - 网状物：
NEXT_PUBLIC_TRPC_SERVER_URL,NEXT_PUBLIC_MCP_SERVER_URL
📝 下一步/扩展思路
- 安全： 添加安全的postMessage来源检查以验证iframe通信
- MCP协议： 实施
application/vnd.mcp-ui.remote-dom高级UI渲染的资源类型 - 身份验证： 连接用户管理的Supabase Auth
- 数据库： 创建并运行Drizzle迁移以进行模式管理
- AI集成： 用实际的Anthropic/Morph/Relace SDK调用替换AI占位符
apps/server/src/ai/ - 附加工具： 在hello示例之外添加更多MCP工具和资源
- 状态管理： 为复杂的UI交互实施适当的状态管理
- 测试： 为单元测试添加Jest/Vitest，为E2E测试添加Playwright
📦 技术栈
- 运行时间： 包子
- 前端： Next.js 14，React 18，样式化组件
- 后端： 快速，tRPC v11
- 数据库： PostgreSQL，Drizzle ORM
- 认证： Supabase
- 人工智能： Anthropic SDK、Vercel AI SDK
- DevOps： Docker，Docker编写
- 类型安全： 带有严格模式的TypeScript 5.6
📄 许可证
麻省理工学院