AI导哈

网站MCP规范生成工具

一款通过四步向导将任何网站转换为模型上下文协议（MCP）规范的工具，支持AI分析和支付集成。

  • by ocodista
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 ocodista/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
  • 有关设置，请参阅部署文档

许可证

麻省理工学院

相关 MCP