AI导哈

前端代码生成服务

基于Gemini图像工具的前端代码生成MCP服务器，提供前端合约管理、文档更新和图像生成功能，适用于云运行环境。

  • by juanmh10
  • Python
  • 云端部署
  • 更新于
在 GitHub 查看 juanmh10/frontend-mcp

使用说明

前端MCP服务器

MCP服务器，用于使用Gemini映像工具生成前端代码。此repo旨在在Cloud run上运行。

学分

前端设计说明基于 frontend-design 插件来自 claude-code 存储库，经过本地修改： https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design

运作原理

此MCP服务器以MCP名称公开了一小部分工具 frontend-mcp.客户来电 tools/list 发现能力和 tools/call 执行他们。

核心工具：

  • frontend_contract_get 返回前端合约（堆栈、设计系统、ID和可访问性规则）。
  • frontend_contract_validate_and_patch 根据合同验证文件，并可以返回修补的内容。
  • frontend_docs_update 为生成更新 /docs （合同摘要、ID图、变更日志条目）。
  • gemini_image_generate 调用Gemini图像模型，保存图像，并返回有关结果的元数据。

图像生成行为：

  • 打造双子座 generateContent 请求并支持无徽标/文本、调色板、纵横比、大小和亮/暗主题提示等约束。
  • 在Cloud Run上，图像会保存到GCS，该工具会返回一个短暂的签名URL供下载。
  • 响应从不返回原始的base64图像数据，以避免上下文膨胀##我经历了艰难的过程。 ##

部署（云运行）

先决条件：

  • 启用了Cloud Run、Cloud Build和Secret Manager的GCP项目。
  • 秘密管理员条目： GEMINI_API_KEY （Gemini API密钥）， MCP_BEARER_TOKEN （客户需要令牌）
  • 用于图像持久化的GCS存储桶（私有存储桶；Cloud Run将发布签名URL）

云构建（推荐）

此回购包括 cloudbuild.yaml 并且旨在部署到推送 prod 支。

  1. 创建机密（示例）：
gcloud secrets create GEMINI_API_KEY --data-file=gemini_api_key.txt
gcloud secrets create MCP_BEARER_TOKEN --data-file=mcp_bearer_token.txt
  1. 创建要运行的Cloud Build触发器 cloudbuild.yaml 上 prod.
  2. 推至 prod 构建和部署。

Cloud Run默认值 cloudbuild.yaml:

  • 服务： mcp-server
  • 地区： us-central1
  • 映射到env变量的秘密： GEMINI_API_KEY, MCP_BEARER_TOKEN

Cloud Run服务URL用于下面的客户端配置。

图像存储和签名URL（云运行）

这 gemini_image_generate 该工具将图像存储在GCS中，并返回一个短暂的签名URL，以便客户端可以直接下载图像。

流量：

  1. Cloud Run生成映像。
  2. 图像上传到GCS专用存储桶。
  3. Cloud Run生成一个V4签名的URL，并将其包含在工具响应中。

必需的环境变量：

  • MCP_GCS_FALLBACK_BUCKET （用于图像存储的GCS存储桶名称）
  • MCP_SIGNED_URL_EXPIRATION （秒，默认值 300)

如果 MCP_GCS_FALLBACK_BUCKET 未设置，默认存储桶名称为 mcp-image-fallback. 在Cloud Run服务上设置这些环境变量（或扩展Cloud Build部署步骤以包含它们）。

Cloud Run服务帐户所需的IAM：

  • 将对象上传到bucket的权限（例如。 roles/storage.objectAdmin 在桶上）。
  • 通过IAM凭据对URL进行签名的权限（例如。 roles/iam.serviceAccountTokenCreator 在服务帐户上）。

工具响应包括：

  • download_url （签名URL）
  • download_expires_in_seconds

工具

工具 目的
frontend_contract_get 获取前端堆栈/设计规则
frontend_contract_validate_and_patch 根据合同验证代码
frontend_docs_update 无令牌膨胀的更新/docs
gemini_image_generate 通过Gemini API生成图像

客户端配置

MCP配置文件被忽略。根据这些模板创建自己的模板，并指向 url 转到您的Cloud Run服务URL。

用于Codex CLI(mcp-config.toml)

更新后 codexcli v0.98.0 config.toml MCP语法已更改。使用此格式：

[mcp_servers.frontend-mcp]
url = "<YOUR-CLOUD-RUN-URL>"
http_headers = { "Authorization" = "Bearer <YOUR-MCP-BEARER-TOKEN>" }

传统格式（v0.98.0之前）：

[mcp.frontend-mcp]
type = "remote"
url = "<YOUR-CLOUD-RUN-URL>"

[mcp.frontend-mcp.headers]
Authorization = "Bearer <YOUR-MCP-BEARER-TOKEN>"

对于OpenCode(mcp-config.json)

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "frontend-mcp": {
      "type": "remote",
      "url": "<YOUR-CLOUD-RUN-URL>",
      "headers": {
        "Authorization": "Bearer <YOUR-MCP-BEARER-TOKEN>"
      }
    }
  }
}

认证

Cloud Run服务可以公开访问，但MCP服务器强制执行承载令牌身份验证。客户必须发送 Authorization: Bearer <MCP_BEARER_TOKEN> 头球

测试

cd MCP
pytest tests/ -v

相关 MCP