Web Dev MCP

全栈Web开发工具包MCP服务器

一个模型上下文协议（MCP）服务器，为现代全栈web开发提供精心策划的文档、快速入门命令和堆栈指南。通过启用MCP的AI助手，您可以即时访问流行框架的设置说明、部署清单和个性化堆栈建议。

特性

• 工具目录 -浏览20多种按类别组织的精选web开发工具（运行时、框架、UI库、数据库、部署平台等）
• 文档查找 -获取目录中任何工具的官方文档、摘要和CLI安装命令
• 框架快速入门 -准备好在npm、pnpm、yarn和bun上运行Next.js、SvelteKit、Vue.js、Remix和Nuxt的脚手架命令
• 堆栈建议 -接收根据您的项目类型、经验水平和实时要求量身定制的有主见的全栈组合
• 部署检查表 -获取Vercel、Netlify和Cloudflare Pages的分步部署指南
• 设计知识目录 -探索色彩理论、排版、品牌心理学和设计系统的精选参考

可用工具

服务器公开了以下MCP工具：

• list_tool_categories -列出可用类别及其工具成员
• fetch_tool_reference -获取特定工具的文档、安装命令和可选状态检查
• framework_quickstart -使用您首选的包管理器为框架生成启动器命令
• recommend_stack -根据项目描述获得个性化的堆栈推荐
• deployment_checklist -获取托管提供商的部署步骤和注意事项
• design_knowledge_sources -查看策划的设计参考或搜索颜色、排版和品牌资源

先决条件

在开始之前，请确保已安装以下内容：

• Python 3.8+ - 下载Python
• 点 -通常附带Python
• MCP客户端 -例如：

- 克劳德桌面 （推荐） - 任何支持stdio传输的MCP兼容客户端

安装和设置

步骤1：克隆或下载存储库

# If you have git
git clone  web-dev-mcp
cd web-dev-mcp

# Or download and extract the files to a directory

步骤2：创建虚拟环境（推荐）

# Create virtual environment
python3 -m venv .venv

# Activate it
# On macOS/Linux:
source .venv/bin/activate

# On Windows:
# .venv\Scripts\activate

步骤3：安装依赖项

pip install -r requirements.txt

这将安装：

• mcp[cli]>=1.2.0 -模型上下文协议SDK
• httpx>=0.27.0 -异步HTTP客户端用于状态检查

步骤4：在本地测试服务器（可选）

您可以通过直接运行来验证服务器是否正常工作：

python fullstack_webdev_server.py

服务器将启动并等待stdin上的MCP协议消息。您应该看到如下日志输出：

INFO - Starting Full Stack Web Dev MCP server...

按 Ctrl+C 阻止它。

为了进行更完整的测试，您可以发送协议握手：

printf '%s\n' \
  '{"jsonrpc":"2.0","id":0,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"local-test","version":"0.0.1"}}}' \
  '{"jsonrpc":"2.0","method":"notifications/initialized","params":{}}' \
  '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' \
  | python fullstack_webdev_server.py

步骤5：配置MCP客户端

对于Claude Desktop：

1. 打开克劳德桌面设置（文件>设置>开发人员）
2. 编辑MCP配置文件（通常 ~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）
3. 将此服务器添加到 mcpServers 章节：

{
  "mcpServers": {
    "fullstack_webdev": {
      "command": "python",
      "args": ["/absolute/path/to/web-dev-mcp/fullstack_webdev_server.py"],
      "env": {
        "FULLSTACK_WEBDEV_DEFAULT_PROVIDER": "vercel"
      }
    }
  }
}

重要提示： 替换 /absolute/path/to/web-dev-mcp/ 使用安装目录的实际绝对路径。

1. 如果你使用的是虚拟环境，你可能想使用venv的Python：

{
  "mcpServers": {
    "fullstack_webdev": {
      "command": "/absolute/path/to/web-dev-mcp/.venv/bin/python",
      "args": ["/absolute/path/to/web-dev-mcp/fullstack_webdev_server.py"],
      "env": {
        "FULLSTACK_WEBDEV_DEFAULT_PROVIDER": "vercel"
      }
    }
  }
}

1. 重新启动克劳德桌面

对于其他MCP客户：

使用以下命令使用stdio传输配置服务器：

python /path/to/fullstack_webdev_server.py

用法示例

配置后，您可以向AI助手提出以下问题：

• “列出您所知道的所有web开发工具”
• “显示目录中的UI库”
• “给我Prisma的文档和安装步骤”
• “如何使用pnpm引导SvelteKit应用程序？”
• “为实时SaaS仪表板推荐一个堆栈”
• “Netlify的部署步骤是什么？”
• “演示如何使用bun设置Next.js”

服务器将提供：

• 官方文件链接
• CLI安装命令
• 框架脚手架命令
• 量身定制的堆栈建议
• 分步部署指南

配置

环境变量

• FULLSTACK_WEBDEV_DEFAULT_PROVIDER （可选）

- 检查表的默认部署提供程序 - 选项： vercel, netlify, cloudflare pages - 违约： vercel

不需要API密钥或机密。

目录覆盖范围

运行库和包管理器

Node.js、Deno、Bun、npm、pnpm

应用程序框架

Next.js、SvelteKit、Vue.js、Remix、Nuxt

UI库和样式

顺风CSS，shadcn/ui

动画和3D

GSAP，Three.js，反应三纤维

数据库和ORM

苏帕巴斯普里斯马

认证

Auth.js/NextAuth

实时和消息传递

插座。输入

付款和服务

条纹

部署和边缘

Vercel、Netlify、Cloudflare Pages

构建工具和Monorerepos

Turborepo

测试与质量

剧作家

无头内容管理系统

理智

建筑

MCP Client (e.g., Claude Desktop)
    ↓ (stdio transport)
Full Stack Web Dev Toolkit MCP Server
    ↓ (optional HTTP status checks)
Documentation Sources

发展

添加新工具

1. 打开 fullstack_webdev_server.py
2. 向添加新条目 RAW_TOOL_DATA 列表：

{
    "key": "ToolName",
    "aliases": ["alias1", "alias2"],
    "label": "Tool Name",
    "category": "Category Name",
    "homepage": "https://example.com/docs",
    "summary": "Brief description of the tool",
    "cli": ["npm install tool-name"],
}

1. 重新启动MCP客户端以获取更改

添加新框架

将条目添加到 FRAMEWORK_STARTERS 每个包管理器都有快速启动命令的字典。

添加新的部署提供程序

将条目添加到 DEPLOYMENT_PLAYBOOKS 带步骤和注释的词典。

添加新的堆栈食谱

将条目添加到 STACK_RECIPES 包含匹配关键字、前端/后端/基础设施建议和附加内容的列表。

故障排除

服务器未出现在客户端中

• 验证MCP配置中的绝对路径是否正确
• 检查是否安装了Python和依赖项
• 查看MCP客户端的日志以获取错误消息
• 尝试手动运行服务器以检查Python错误

工具不工作

• 确保在配置更改后重新启动了MCP客户端
• 检查服务器进程是否正在运行（在活动监视器/任务管理器中查找）
• 检查stderr日志中是否有任何Python异常

虚拟环境问题

如果使用venv，请确保：

• 您在MCP配置中指向了venv的Python
• 所有依赖项都安装在该venv中
• venv是用正确的Python版本创建的

安全

• 不需要或存储任何凭据、API密钥或机密
• 返回的所有数据都是信息性的，公开可用
• 服务器以用户级权限运行
• HTTP状态检查（可选）使用5秒超时

贡献

欢迎投稿！要添加新的工具、框架或部署提供程序，请执行以下操作：

1. 分叉存储库
2. 将您的更改添加到中的相应数据结构 fullstack_webdev_server.py
3. 使用手动测试命令进行本地测试
4. 提交一个拉取请求，并说明您的添加内容

许可证

MIT许可证

支持

对于问题、疑问或建议：

• 在GitHub存储库中打开问题
• 请查看MCP文档，网址为 模型上下文协议.io
• 查看Claude Desktop文档以了解MCP设置

致谢

内置：

• 模型上下文协议 通过Anthropic
• FastMCP 软件开发工具包
• httpx 用于异步HTTP

______________________________________________________________________

快乐建筑！ 🚀