项目介绍
Deco AI 应用模板
快速构建具有即时访问数千个API功能的人工智能应用程序。
这是当你运行 npm create deco@latest 来启动你的AI应用时使用的官方模板。基于 模型上下文协议（MCP），此模板提供了创建能够连接任何服务、API或数据源的强大AI应用所需的一切。
🌟 你可以构建什么
使用这个模板，你可以迅速创建AI应用程序，这些应用程序可以：
- 🔌 连接到数千个API：通过MCP协议即时集成到OpenAI、Stripe、SendGrid、数据库等流行服务中
- 🤖 AI原生工具：创建利用AI进行数据处理、分析和自动化的智能工具
- ⚡ 实时协作：构建具有实时更新和共享状态的协作AI体验
- 🎨 美观界面：现代React前端，使用Tailwind CSS和shadcn/ui组件
- 🚀 生产就绪：一键部署到Cloudflare Workers，并实现全球边缘分布
🔥 MCP协议的力量
模型上下文协议使你的AI应用能够无缝连接到：
- 外部API（REST、GraphQL、webhooks）
- 数据库（PostgreSQL、MySQL、MongoDB等）
- AI服务（OpenAI、Anthropic、本地模型）
- 业务工具（CRM、分析、支付处理器）
- 自定义集成（你自己的服务和API）
所有这些都具备类型安全、自动生成客户端代码和零配置的特点。
📝 开发历史
本仓库使用Specstory来跟踪用于编码此仓库的提示的历史。你可以在.specstory/文件夹中检查完整的开发历史。
✨ 模板特性
- 🤖 MCP服务器：基于Cloudflare Workers的服务器，带有类型化的AI工具
- ⚛️ React前端：使用Vite、TanStack Router和Tailwind CSS的现代React应用
- 🎨 UI组件：预配置的shadcn/ui组件，用于快速开发
- 🔧 类型安全：全面支持TypeScript，自动生成RPC客户端类型
- 🚀 热重载：前端和后端的实时开发，自动重建
- ☁️ 部署就绪：一键部署到Cloudflare Workers
- 🔗 API集成：通过deco市场连接到数千种服务
- 🛡️ 内置认证：与Google、GitHub等流行提供商的OAuth集成
- 🗄️ 集成数据库：每个项目包含10GB存储空间的SQLite数据库
🚧 即将推出：可视化工作流编辑器
我们正在完成一个可视化工作流编辑器，你将能够：
- 🎨 拖放：通过直观的界面视觉组合AI工具
- 🤝 实时协作：与团队一起在工作流程上合作
- 🧠 AI生成的工作流：让AI帮助你构建复杂的自动化流程
- ⚡ 实时预览：在构建它们时查看你的工作流
这将彻底改变你创建AI驱动的自动化和数据处理流水线的方式。
🚀 快速开始
创建你的AI应用的两种方式
方案1：使用npm create（推荐）
# 从此模板创建一个新的AI应用
npm create deco@latest my-ai-app
# 导航到你的项目
cd my-ai-app
# 配置你的应用（设置名称、范围和工作区）
npm run configure
# 启动开发服务器
npm run dev
方案2：使用GitHub模板
你也可以通过将此仓库作为GitHub模板来创建新的应用：
- 在GitHub上点击“使用此模板”以创建一个新的仓库
- 克隆你的新仓库
- 安装依赖并配置：
git clone <your-new-repo-url>
cd <your-new-repo>
# 安装依赖
npm install
# 配置你的应用（必需 - 设置名称、范围和工作区）
npm run configure
# 启动开发服务器
npm run dev
服务器将在http://localhost:8787启动，提供MCP端点和React前端。
前提条件
- Node.js ≥22.0.0
- Deco CLI - 开发和部署所需：
npm install -g deco-cli - Deco账户 - 在admin.decocms.com注册
⚠️ 重要设置说明
在创建你的应用（通过npm create或GitHub模板）之后，你需要：
-
全局安装Deco CLI：
npm install -g deco-cli -
登录Deco：
deco login -
配置你的应用（首次使用前必需）：
npm run configure这会配置：
- 应用名称：确定你的部署URL（
<app-name>.deco.page） - 范围：映射到你的deco组织/项目
- 工作区：映射到你的deco组织/项目
- 应用名称：确定你的部署URL（
-
部署以启用OAuth认证：
npm run deploy
注意：模板附带默认值（name = "deco-create"，scope = "kmute"）。在开发或部署之前，必须运行npm run configure来设置你自己的值。
📁 项目结构
├── server/ # MCP服务器（Cloudflare Workers + Deco运行时）
│ ├── main.ts # 包含AI工具的服务器入口点
│ ├── tools/ # 按领域组织的AI工具
│ └── deco.gen.ts # 自动生成的集成类型
└── view/ # React前端（Vite + Tailwind CSS）
├── src/
│ ├── lib/rpc.ts # 用于服务器通信的类型化RPC客户端
│ ├── routes/ # TanStack Router路由
│ └── components/ # 使用Tailwind CSS的UI组件
└── package.json
🛠️ 开发命令
npm run dev- 启动热重载开发npm run gen- 为外部集成生成类型npm run deploy- 部署到生产环境npm run configure- 配置你的应用和工作区
🔗 前端 ↔ 服务器通信
模板包括一个完全类型化的RPC客户端，它将你的React前端连接到你的MCP服务器：
// 对你的AI工具的类型化调用
const result = await client.MY_AI_TOOL({ input: "data" });
const analysis = await client.ANALYZE_DATA({ dataset: data });
🌐 API集成系统
通过你的deco项目即时连接到数千种服务：
- 🤖 AI服务：OpenAI、Anthropic、Cohere、本地模型
- 💳 支付：Stripe、PayPal、Square
- 📧 通讯：SendGrid、Twilio、Slack
- 🗄️ 数据库：PostgreSQL、MongoDB、Redis、Supabase
- 📊 分析：Google Analytics、Mixpanel、Segment
- 等等，还有更多...
添加集成
在你的deco项目仪表板中安装的所有应用都可以用来创建新的工具或视图：
- 在你的deco项目仪表板中安装应用
- 运行集成：
npm run configure或bun run configure - 自动生成类型：MCP类型下载到
shared/deco.gen.ts - 开始构建：立即使用类型的客户端在你的工具中
所有集成都自带自动生成的TypeScript类型和零配置设置。
🗄️ 集成数据库
每个deco项目都包含一个带有10GB存储空间的SQLite数据库：
- 零设置：数据库开箱即用
- 类型安全ORM：内置支持TypeScript的Drizzle ORM
- 自动迁移：模式更改会自动应用
- 生产就绪：随着你的应用需求扩展
非常适合存储用户数据、应用状态和业务逻辑，无需外部数据库设置。
🎯 示例用例
构建强大的AI应用，如：
- 📊 数据分析工具：连接到数据库和API，使用AI分析业务数据
- 🤖 客户支持机器人：与CRM和支持系统集成，提供智能协助
- 📝 内容生成：结合AI与内容管理系统和社会媒体API
- 💼 商业自动化：创建连接多个服务并自动执行任务的工作流
- 🔍 研究助手：构建从多个来源收集和分析信息的工具
- 📈 分析仪表盘：从你的业务数据中创建AI驱动的洞察
📖 资源
- 🚀 开始：创建你的第一个AI应用
- 📚 文档：docs.deco.page
- 💬 社区：加入我们的Discord
- 🐙 源代码：deco-cx/deco
💡 开发技巧
考虑在你的AI编辑器中使用SpecStory来跟踪你的开发历史和提示，当你构建AI应用时。这是一个记录你的开发过程并与团队分享知识的好方法。
准备好构建下一代AI应用了吗？