Govuk Prototype MCP

GOV.UK 原型工具包 MCP 服务器

一个MCP（模型上下文协议）服务器，帮助您创建和管理GOV.UK原型工具包项目。原型工具包基于Node.js运行，使用Express构建，并采用GOV.UK前端框架。

特点/功能

• 创建原型初始化新的GOV.UK原型套件项目
• 管理原型列出、启动和停止原型服务器
• 添加页面使用GOV.UK模板快速添加新页面
• 组件库访问所有GOV.UK前端组件及示例
• 文档获取路由、会话、布局和部署方面的帮助
• 节点版本检查验证您已安装 Node.js 22.x.x LTS 版本

要求

• Node.js v22.x.x 长期支持版（LTS） （GOV.UK 原型工具包要求）
• npm（随Node.js一起提供）
• 互联网连接（首次创建时用于下载原型套件）

安装

npm install
npm run build

使用方法

使用Claude Desktop

在您的Claude桌面配置文件中添加：

macOS（苹果电脑操作系统）: ~/Library/Application Support/Claude/claude_desktop_config.json Windows： %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "govuk-prototype-kit": {
      "command": "node",
      "args": ["/path/to/govuk-prototype-kit-mcp-server/build/index.js"]
    }
  }
}

使用VS Code AI助手（Cline、Continue、Roo Coder）

克林（Cline）编辑 cline_mcp_settings.json 继续编辑 ~/.continue/config.json

{
  "mcpServers": {
    "govuk-prototype-kit": {
      "command": "node",
      "args": ["/absolute/path/to/govuk-prototype-kit-mcp-server/build/index.js"]
    }
  }
}

可用工具

check_node_version

验证您已安装 Node.js v22.x.x LTS 版本。

示例“检查我的Node版本是否兼容”

create_prototype

创建一个新的GOV.UK原型工具包项目。

参数:

• name (字符串)：原型的名称
• directory (字符串)：将创建原型的父目录

示例“在 ~/projects 目录下创建一个名为 'apply-for-passport' 的新的 GOV.UK 原型”

list_prototypes

在目录中列出所有 GOV.UK 原型工具包项目。

参数：

• directory (字符串)：要搜索的目录

示例“列出我放在~/projects目录下的所有原型”

start_prototype

启动一个原型（运行 npm run dev）。

参数：

• path (字符串)：原型目录的完整路径

示例“在~/projects/apply-for-passport目录下启动原型”

stop_prototype

停止正在运行的原型服务器。

参数:

• path (字符串)：原型目录的完整路径

示例“在 ~/projects/apply-for-passport 目录下停止原型”

get_prototype_structure

显示了一个原型项目的文件结构。

参数:

• path (字符串)：原型目录的完整路径

示例“给我看看我的护照原型的结构”

add_page

使用GOV.UK模板在您的原型中创建一个新页面。

参数：

• prototypePath (字符串)：原型目录的路径
• pageName (字符串)：页面名称（例如，'start'，'check-answers'）
• route (字符串)：路由路径（例如，'/start'，'/check-your-answers'）

示例“在我的原型中添加一个位于/personal-details的‘个人信息’页面”

list_components

列出所有可用的GOV.UK前端组件。

示例“有哪些可用的组件？”

get_component_example

获取特定组件的 Nunjucks 代码示例。

参数：

• component （字符串）：组件名称（例如，'按钮'，'文本输入框'，'单选按钮'）

示例“给我展示一个收音机组件的例子”

get_prototype_kit_docs

提供特定主题的文档。

参数：

• topic (字符串)：主题名称（'路由'、'会话'、'布局'、'部署'）

示例“在原型套件中如何使用路由？”

快速入门指南

1. 检查您的节点版本

Ask: "Check if my Node version is compatible with GOV.UK Prototype Kit"

2. 创建一个新原型

Ask: "Create a GOV.UK prototype called 'benefits-calculator' in ~/projects"

3. 开始制作你的原型

Ask: "Start the prototype at ~/projects/benefits-calculator"

然后在您的浏览器中打开 http://localhost:3000。

4. 添加页面

Ask: "Add a start page to my benefits-calculator prototype at /start"

5. 使用组件

Ask: "Show me examples of radio buttons"
Ask: "Show me how to use a date input"

常见工作流程

构建表单旅程

1. 创建原型

   "Create a new prototype called 'licence-application' in ~/projects"

1. 按顺序添加页面

   "Add a 'start' page at /start"
   "Add a 'personal-details' page at /personal-details"
   "Add a 'check-answers' page at /check-your-answers"
   "Add a 'confirmation' page at /confirmation"

1. 获取组件示例

   "Show me the text-input component"
   "Show me the radios component"
   "Show me the summary-list component"

1. 了解路由知识

   "How do I use routing in the prototype kit?"
   "How do sessions work?"

管理多个原型

1. 列出所有原型

   "List all prototypes in ~/projects"

1. 启动特定原型

   "Start the licence-application prototype"

1. 视图结构

   "Show me the structure of the licence-application prototype"

1. 完成后停止

   "Stop the licence-application prototype"

项目结构

当你创建一个原型时，你会得到：

your-prototype/
├── app/
│   ├── views/          # Your HTML/Nunjucks templates
│   │   └── index.html  # Start page
│   ├── routes.js       # Custom routes and logic
│   ├── assets/         # CSS, JavaScript, images
│   │   ├── sass/
│   │   └── javascripts/
│   └── data/           # Session data store
├── docs/               # Documentation
├── public/             # Static files
└── package.json

关键目录

• app/views/ 翻译为中文是：“应用程序/视图/” - 将您的页面模板放在这里（.html 文件）
• \app/routes.js\ 翻译成中文是：\应用程序/路由文件.js\ 或者更简洁地表达为 \应用路由文件.js\。不过，具体翻译可能会根据上下文或项目命名习惯有所调整。在实际开发中，\routes.js\ 通常指的是定义应用程序中各个路由（即URL路径与处理函数之间的映射）的JavaScript文件 - 添加自定义路由逻辑和分支
• 应用程序资源中的Sass文件夹 - 自定义样式（如需）
• 应用程序/数据/ - 会话数据存储

组件参考

所有GOV.UK前端组件均可使用：

• 手风琴
• 反向链接
• 面包屑导航（或路径导航）
• 按钮
• 字符数
• 复选框
• Cookie横幅
• 日期输入
• 详情
• 错误信息
• 错误汇总
• 字段集（或控件组）
• 文件上传
• 内嵌文本
• 通知横幅
• 分页
• 小组/面板
• 阶段横幅
• 收音机
• 选择
• 总结列表
• 桌子
• 标签页
• 标签
• 文本输入
• 文本区域
• 警告文本

使用 get_component_example 查看任何组件的代码示例。

故障排除

“Node版本不兼容”

从 https://nodejs.org 安装 Node.js v22.x.x 长期支持（LTS）版本

“端口3000已被占用”

停止其他使用3000端口的原型或服务。

“找不到模块”

跑 npm install 在你的原型目录中。

“权限被拒绝”

确保您对创建原型的目录具有写权限。

开发提示

1. 使用会话数据 - 表单数据会自动存储在 req.session.data
2. 添加路由逻辑 - 编辑 app/routes.js 用于分支旅程
3. 扩展布局 - 所有页面均可扩展 layouts/main.html
4. 设置密码保护 - 设置USERNAME和PASSWORD环境变量
5. 不要用于生产 - 原型仅用于测试想法

示例对话

You: "Check my Node version"
AI: ✓ Node.js v22.11.0 is compatible with GOV.UK Prototype Kit

You: "Create a prototype called 'pet-passport' in ~/projects"
AI: ✓ GOV.UK Prototype Kit created successfully! Location: ~/projects/pet-passport

You: "Start the pet-passport prototype"
AI: ✓ Starting GOV.UK Prototype Kit. Available at: http://localhost:3000

You: "Add a start page at /start"
AI: ✓ Created page: ~/projects/pet-passport/app/views/start.html

You: "Show me a button example"
AI: {{ govukButton({ text: "Save and continue" }) }}

You: "How do I add routing?"
AI: [Shows routing documentation with examples]

资源

• GOV.UK 原型工具包文档
• GOV.UK 设计系统
• GOV.UK 前端

许可证

麻省理工学院（MIT）

相关链接

• GOV.UK 原型工具包
• GOV.UK 设计系统
• 模型上下文协议