Deco AI 应用模板
构建AI驱动应用的最快方式，即刻访问数千个API。
这是您运行时使用的官方模板 npm create deco@latest 为您的AI应用进行初始化配置。基于 模型上下文协议（MCP）这个模板为你提供了创建强大AI应用所需的一切，这些应用能够连接到任何服务、API或数据源。
🌟 你能构建什么
使用这个模板，您可以快速创建以下AI应用：
- 🔌 连接数千个API通过MCP协议，即时集成OpenAI、Stripe、SendGrid、数据库等流行服务
- 🤖 AI原生工具开发利用人工智能进行数据处理、分析和自动化的智能工具
- ⚡ 实时协作构建具有实时更新和共享状态的协作式AI体验
- 🎨 精美的界面使用Tailwind CSS和shadcn/ui组件的现代React前端
- 🚀 准备就绪，可投入生产立即部署到具有全球边缘分布的 Cloudflare Workers
🔥 MCP协议的力量
模型上下文协议使您的AI应用能够无缝连接至：
- 外部API (REST, GraphQL, webhooks)
- 数据库 （PostgreSQL、MySQL、MongoDB 等）
- 人工智能服务 （OpenAI、Anthropic、本地模型）
- 商务工具 （客户关系管理（CRM）、数据分析、支付处理器）
- 自定义集成 （您自己的服务和API）
全部都与 类型安全的， 自动生成的 客户端代码和 零配置.
📝 发展历程
这个仓库使用 Specstory（假设为一个虚构的项目或故事名称）可以翻译为“特别故事”或“专题故事”，具体翻译可能需根据上下文调整 追踪……的历史 用于为这个仓库编写代码的提示。您可以查看完整的 发展历程中的 .specstory/ 文件夹。
✨ 模板特性
- 🤖 MCP 服务器基于Cloudflare Workers的服务器，配备类型化AI工具
- ⚛️ React 前端使用Vite、TanStack Router和Tailwind CSS构建的现代React应用
- 🎨 用户界面组件预配置的 shadcn/ui 组件，用于快速开发
- 🔧 类型安全全面支持TypeScript，并自动生成RPC客户端类型
- 🚀 热重载实时开发，前端和后端自动重建
- ☁️ 准备部署一键部署到 Cloudflare Workers
- 🔗 API 集成通过Deco市场连接数千种服务
- 🛡️ 内置认证与流行服务提供商（如Google、GitHub等）的OAuth集成
- 🗄️ 集成数据库每个项目均包含一个10GB存储空间的SQLite数据库
🚧 即将推出：可视化工作流编辑器
我们正在完成我们的 可视化工作流编辑器 在那里，你将能够：
- 🎨 拖放通过直观的界面，可视化地组合AI工具
- 🤝 实时协作与您的团队一起协作处理工作流程
- 🧠 人工智能生成的工作流程让AI帮助您构建复杂的自动化流程
- ⚡ 实时预览在构建工作流的过程中实时查看其运行情况
*这将彻底改变您创建基于人工智能的自动化和数据处理流程的方式。*
🚀 快速入门
创建AI应用程序的两种方法
选项1：使用npm create（推荐）
# Create a new AI app from this template
npm create deco@latest my-ai-app
# Navigate to your project
cd my-ai-app
# Configure your app (sets name, scope, and workspace)
npm run configure
# Start development server
npm run dev选项2：使用GitHub模板
你也可以使用这个仓库作为GitHub模板来创建一个新的应用程序：
- 在GitHub上点击“使用此模板”来创建一个新的仓库
- 克隆你的新仓库
- 安装依赖项并进行配置：
git clone
cd
# Install dependencies
npm install
# Configure your app (REQUIRED - sets name, scope, and workspace)
npm run configure
# Start development server
npm run dev服务器将在 http://localhost:8787 同时为您的MCP终端和React前端提供服务。
先决条件
- Node.js ≥22.0.0
- Deco CLI（注：Deco通常指装饰或设计相关的软件/工具，CLI代表命令行界面） - 开发和部署所需：
npm install -g deco-cli- Deco账户 - 在……注册 admin.decocms.com 翻译为中文是：“decocms.com 的管理后台”
⚠️ 重要的设置说明
创建你的应用后（通过npm create或GitHub模板），你必须：
- 全局安装Deco CLI：
npm install -g deco-cli- 登录到Deco:
deco login- 配置您的应用程序 （首次使用前必需）：
npm run configure这配置为：
- 应用名称确定您的部署URL（.deco.page) - 范围映射到您的装饰组织/项目 - 工作区映射到您的Deco组织/项目
- 部署 启用OAuth认证：
npm run deploy注该模板附带默认值（name = "deco-create"， scope = "kmute"）。 你必须跑 npm run configure 在开发或部署之前设置您自己的值。
📁 项目结构
├── server/ # MCP Server (Cloudflare Workers + Deco runtime)
│ ├── main.ts # Server entry point with AI tools
│ ├── tools/ # Domain-organized AI tools
│ └── deco.gen.ts # Auto-generated integration types
└── view/ # React Frontend (Vite + Tailwind CSS)
├── src/
│ ├── lib/rpc.ts # Typed RPC client for server communication
│ ├── routes/ # TanStack Router routes
│ └── components/ # UI components with Tailwind CSS
└── package.json🛠️ 开发命令
npm run dev- 开始开发并启用热重载npm run gen- 为外部集成生成类型npm run deploy- 部署到生产环境npm run configure- 配置您的应用程序和工作区
🔗 前端 ↔ 服务器通信
该模板包含一个完全类型化的RPC客户端，用于将您的React前端与MCP服务器连接起来：
// Typed calls to your AI tools
const result = await client.MY_AI_TOOL({ input: "data" });
const analysis = await client.ANALYZE_DATA({ dataset: data });🌐 API集成系统
通过您的（设备/账户）即时连接到数千项服务 装饰项目：
- 🤖 人工智能服务OpenAI、Anthropic、Cohere、本地模型
- 💳 支付Stripe、PayPal、Square
- 📧 通信SendGrid，Twilio，Slack
- 🗄️ 数据库PostgreSQL，MongoDB，Redis，Supabase
- 📊 分析Google Analytics（谷歌分析）、Mixpanel、Segment
- 还有成千上万（这样的例子）。。。
添加集成
您安装的所有应用程序 装饰项目 可用于创建新的工具或视图：
- 安装应用程序 在您的装饰项目仪表盘中
- 运行集成：
npm run configure或者bun run configure - 自动生成的类型MCP类型被下载到
shared/deco.gen.ts - 开始构建立即在你的工具中使用已输入的客户端
所有集成都配备自动生成功能的TypeScript类型和零配置设置。
🗄️ 集成数据库
每个装饰项目都包含一个 具有10GB存储空间的SQLite数据库：
- 零设置数据库开箱即用
- 类型安全的ORM（对象关系映射）内置支持TypeScript的Drizzle ORM
- 自动迁移模式更改会自动应用
- 已准备好投入生产根据您的应用需求进行扩展
非常适合存储用户数据、应用程序状态和业务逻辑，无需设置外部数据库。
🎯 示例用例
构建强大的人工智能应用，如：
- 📊 数据分析工具连接数据库和API，利用AI分析业务数据
- 🤖 客户支持机器人与CRM（客户关系管理）和支持系统集成，提供智能辅助
- 📝 内容创作将人工智能与内容管理系统及社交媒体API相结合
- 💼 业务自动化创建连接多个服务的工作流并实现任务自动化
- 🔍 研究助理构建工具，用于收集和分析来自多个来源的信息
- 📈 分析仪表板从您的业务数据中创建人工智能驱动的见解
📖 资源
- 🚀 开始使用： 创建你的第一个AI应用
- 📚 文档： docs.deco.page 翻译为中文可以是“装饰文档页面”或“装饰资料页面”，具体取决于上下文和“deco”在该网站中的具体含义（可能代表“装饰”、“设计”或其他相关词汇）。在这里，我选择了“装饰”作为翻译，因为它是一个比较通用且能涵盖多种设计或美化意图的词汇
- 💬 社区: 加入我们的Discord
- 🐙 源代码： deco-cx/deco
💡 开发小贴士
考虑使用 “SpecStory”可以翻译为“特殊故事”或“规格故事”，具体翻译取决于上下文和该词在特定语境中的含义。如果“Spec”指的是某种特定的规格、标准或特性，那么“特殊故事”可能更贴切；如果“Spec”只是作为前缀，没有特定含义，那么“规格故事”可能是一个较为中性的翻译 在您的AI编辑器中，可以跟踪您在构建AI应用程序过程中的开发历史和提示。这是记录开发过程并与团队分享知识的绝佳方式。
______________________________________________________________________
准备好构建下一代人工智能应用了吗？
🚀 表情符号“🚀”通常表示火箭、快速前进或加速等含义，在中文中没有直接对应的文字翻译，但可以意译为“🚀（火箭/快速前进/加速）”。不过，直接使用这个表情符号在中文语境中也是完全可以理解的，它传达了一种积极、快速或向前发展的意味。 立即开始建造 • 📖 书籍 阅读文档 • 💬 加入社区