Web MCP Wizard

🧙 Web MCP向导

通过4个简单步骤将任何网站转换为模型上下文协议（MCP）规范。

特性

✨ 四步向导

1. 输入网站网址
2. 分析和付款
3. 生成MCP规范
4. 部署并获取代码

💳 Stripe支付集成

• 29美元一次性访问
• 每月订阅9美元

🤖 AI驱动的分析

• 使用Claude 3.5 Sonnet分析网站
• 自动提取工具和资源
• 生成有效的MCP 2024-11-05规范

⚛️ 技术栈

• 后端：Bun、TypeScript、Hono、Cheerio、Anthropic SDK
• 前端：React、TypeScript、顺风CSS、Vite
• 部署：Cloudflare Pages+Fly.io

快速开始

先决条件

• Bun运行时已安装
• 无烟煤API键
• 条纹API密钥（用于支付）

设置

1. 克隆并安装

cd /root/.openclaw/workspace/projects/web-mcp-wizard
bun install
cd backend && bun install && cd ..
cd frontend && bun install && cd ..

1. 配置环境

cp .env.example .env
# Edit .env with your API keys

1. 在本地运行

# Run both backend and frontend
bun run dev

该应用程序将在以下网址提供：

• 前端：http://localhost:5173
• 后端：http://localhost:3001

建筑

# Build both
bun run build

# Build separately
bun run build:backend
bun run build:frontend

API终点

POST /api/analyze

抓取并分析网站。

请求：

{
  "url": "https://example.com"
}

答复：

{
  "url": "https://example.com",
  "title": "Example Site",
  "description": "Description",
  "tools": [...],
  "resources": [...],
  "rawContent": "..."
}

POST /api/checkout

创建Stripe结账会话。

请求：

{
  "plan": "once" | "monthly"
}

POST /api/generate-spec

根据分析生成MCP规范。

请求：

{
  "analysis": { ... }
}

答复：

{
  "name": "web-mcp-spec",
  "description": "...",
  "version": "2024-11-05",
  "tools": [...],
  "resources": [...]
}

项目结构

web-mcp-wizard/
├── backend/
│   ├── src/
│   │   ├── index.ts              # Main server
│   │   ├── types.ts              # TypeScript types
│   │   └── services/
│   │       ├── analyzer.ts       # Website crawling & analysis
│   │       ├── mcp-generator.ts  # MCP spec generation
│   │       └── stripe.ts         # Payment handling
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── main.tsx              # Entry point
│   │   ├── App.tsx               # Main app component
│   │   ├── index.css             # Tailwind styles
│   │   └── components/
│   │       ├── ProgressBar.tsx   # Step progress indicator
│   │       ├── Step1URLInput.tsx # Step 1 form
│   │       ├── Step2Analyze.tsx  # Step 2 analysis & payment
│   │       ├── Step3GenerateSpec.tsx # Step 3 spec generation
│   │       └── Step4Deploy.tsx   # Step 4 deployment info
│   └── package.json
├── .gitignore
├── .env.example
└── README.md

开发笔记

添加克劳德集成

这 analyzer.ts 该服务使用Anthropic SDK来分析网站。确保你的 ANTHROPIC_API_KEY 已设置。

条纹集成

默认情况下启用演示模式。设置有效 STRIPE_SECRET_KEY 以实现真正的支付。

部署

• 前端部署到Cloudflare页面
• 后端部署到Fly.io
• 有关设置，请参阅部署文档

许可证

麻省理工学院