内容
# VibeFlare MCP Server 🚀
**由 Cloudflare Workers 和模型上下文协议 (Model Context Protocol, MCP) 驱动的代理控制内容管理系统 (CMS)**
VibeFlare 是一个原生于 Cloudflare 的 CMS，提供与 MCP 兼容的 API，允许 AI 代理在无需人工 DevOps 干预的情况下创建、编辑和管理网页内容、数据和资产。
## ✨ 特性
- **🤖 MCP 兼容 API** - 完全支持模型上下文协议以便代理交互
- **⚡ Cloudflare 原生** - 基于 Workers、KV、D1 和 R2 构建，提供全球边缘性能
- **✏️ 行内编辑** - 在任何 URL 后添加 `?edit` 以实现即时所见即所得 (WYSIWYG) 编辑
- **🎨 主题系统** - CSS 变量和运行时主题切换
- **📦 零构建** - 直接使用 TypeScript 部署，无需复杂的构建管道
- **🔗 SSR 准备就绪** - 使用 `mono-jsx` 进行服务器端渲染
## 🚀 快速开始
### 1. 安装依赖
```bash
npm install mono-jsx wrangler
# 或
yarn add mono-jsx wrangler
```
### 2. 设置 Cloudflare 资源
创建所需的 Cloudflare 资源：
```bash
# 创建 KV 命名空间
wrangler kv:namespace create "CONTENT"
# 创建 D1 数据库
wrangler d1 create vibeflare
# 创建 R2 存储桶
wrangler r2 bucket create your-bucket-name
```
### 3. 配置 wrangler.toml
使用您的实际资源 ID 更新 `wrangler.toml`：
```toml
name = "vibeflare-mcp-server"
main = "index.ts"
compatibility_date = "2024-01-01"
kv_namespaces = [
{ binding = "CONTENT", id = "YOUR_ACTUAL_KV_ID" }
]
d1_databases = [
{ binding = "DB", database_name = "vibeflare", database_id = "YOUR_ACTUAL_D1_ID" }
]
r2_buckets = [
{ binding = "BUCKET", bucket_name = "your-actual-bucket-name" }
]
```
### 4. 部署
```bash
wrangler publish
```
### 5. 开始创建
访问 `https://your-worker.workers.dev/?edit` 并开始输入！
## 📡 MCP API 参考
VibeFlare 提供完整的 MCP 兼容 API 以进行程序化内容管理：
### 页面
```bash
# 列出所有页面
GET /mcp/pages
# 响应: {"pages": ["home", "about", "contact"]}
# 获取页面内容
GET /mcp/page/:slug
# 响应: {"slug": "about", "content": "<h1>About</h1>..."}
# 创建/更新页面
POST /mcp/page/:slug
Content-Type: application/json
{"content": "<h1>New Page</h1><p>Content here</p>"}
# 响应: {"success": true, "slug": "about"}
```
### 数据 (D1 数据库)
```bash
# 查询表数据
GET /mcp/data/:table
# 响应: {"results": [...], "success": true}
# 插入数据
POST /mcp/data/:table
Content-Type: application/json
{"title": "Post Title", "content": "Post content", "author": "Agent"}
# 响应: {"success": true, "result": {...}}
```
### 资产 (R2 存储)
```bash
# 上传文件
POST /mcp/upload/:key
Content-Type: image/jpeg
[binary data]
# 响应: {"success": true, "key": "photo.jpg"}
# 下载文件
GET /mcp/upload/:key
# 响应: [binary data with correct Content-Type]
```
## 🎨 主题系统
颜色和样式通过 `theme.json` 和 CSS 变量进行控制：
```javascript
// theme.json 定义设计令牌
{
"colors": {
"primary": "#3b82f6",
"background": "#ffffff",
// ...
}
}
// 自动转换为 CSS 变量:
// --color-primary: #3b82f6
// --color-background: #ffffff
```
您可以通过更新 CSS 变量在运行时切换主题。
## ✏️ 编辑模式
在任何 URL 后添加 `?edit` 以启用行内编辑：
- `/?edit` - 编辑主页
- `/about?edit` - 编辑关于页面
- `/blog/post-1?edit` - 编辑博客文章
编辑器提供：
- **ContentEditable** 区域，带有视觉反馈
- **右上角的保存按钮**
- **通过 `/api/save/:slug` 自动保存到 KV 存储**
## 🧠 代理集成示例
### 使用 cURL
```bash
# 创建新的博客文章
curl -X POST https://your-worker.workers.dev/mcp/page/blog/hello-world \
-H "Content-Type: application/json" \
-d '{"content": "<h1>Hello World</h1><p>My first post!</p>"}'
# 添加一些数据
curl -X POST https://your-worker.workers.dev/mcp/data/posts \
-H "Content-Type: application/json" \
-d '{"title": "Hello World", "slug": "hello-world", "published": true}'
# 上传一张图片
curl -X POST https://your-worker.workers.dev/mcp/upload/hero.jpg \
-H "Content-Type: image/jpeg" \
--data-binary @hero.jpg
```
### 代理提示示例
```
为一个 SaaS 产品创建一个着陆页，包含：
- 带有 CTA 的英雄部分
- 特性网格
- 定价表
- 联系表单
使用 VibeFlare MCP API：
1. POST /mcp/page/landing 发送 HTML 内容
2. POST /mcp/data/signups 创建潜在客户表
3. 使用现有主题变量进行样式设置
```
## 🏗️ 架构
```
┌─────────────────┐ ┌──────────────┐ ┌─────────────┐
│ AI 代理 │───▶│ MCP API │───▶│ Cloudflare │
│ (Claude 等) │ │ /mcp/* │ │ Workers │
└─────────────────┘ └──────────────┘ └─────────────┘
│
┌─────────────┐ │
│ 编辑模式 │◀────────────┤
│ ?edit │ │
└─────────────┘ │
│
┌─────────────┐ │
│ SSR 页面 │◀────────────┤
│ mono-jsx │ │
└─────────────┘ │
▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ KV 存储 │ │ D1 数据库 │ │ R2 存储桶 │
│ (页面) │ │ (数据) │ │ (资产) │
└─────────────┘ └─────────────┘ └─────────────┘
```
## 🔒 安全注意事项
此实现专注于核心功能。对于生产使用，请考虑添加：
- **身份验证** - Cloudflare Access、API 密钥或 JWT 令牌
- **速率限制** - Cloudflare 速率限制规则
- **输入验证** - 清理 HTML 内容和 SQL 查询
- **CORS 配置** - 限制浏览器请求的来源
```javascript
// 示例：添加身份验证中间件
if (!request.headers.get('Authorization')) {
return new Response('Unauthorized', { status: 401 });
}
```
## 🚧 下一步
准备扩展 VibeFlare 吗？考虑添加：
- **React 水合** 以实现交互组件
- **Markdown 支持** 及前置内容解析
- **通过 Cloudflare Images 进行图像优化**
- **使用 KV TTL 和缓存 API 的缓存策略**
- **外部集成的 Webhooks**
- **命名空间隔离的多租户支持**
## 📖 学习资源
- [模型上下文协议规范](https://spec.modelcontextprotocol.io/)
- [Cloudflare Workers 文档](https://developers.cloudflare.com/workers/)
- [mono-jsx 文档](https://github.com/trueadm/mono-jsx)
## 🤝 贡献
VibeFlare 旨在由社区扩展。欢迎您：
- 添加新的 MCP 端点
- 改进主题系统
- 增强编辑器体验
- 构建代理集成
---
**为代理优先的网络而构建 ❤️**
