AgentGrid.io (by Anima)

Agent Grid MCP 服务指南

Agent Grid 是由 Anima 打造的受治理中心，AI Agent 可在其中构建、托管、发布和分享 Web 应用。本仓库提供 MCP 服务指南，以及教你的编码 Agent 如何使用它的技能——可将其安装为 Claude Code 插件、Codex 技能或普通 MCP 服务。

Agent Grid 位于 app.agentgrid.io。完整文档请参阅我们的帮助文档。

你的 Agent 可以做什么

• 根据提示词、网站或 Figma 设计构建应用 — 描述需求、克隆 URL，或提供 Figma 画面，即可获得一个可通过实时 URL 访问的运行中应用。
• 托管你已有的代码 — 导入项目或创建空仓库，然后推送代码。
• 通过 git 编辑任何产物 — 每个产物都是真实的 git 仓库；可克隆、提交和推送。
• 发布到公开的实时 URL — 之后也可以将其下线。
• 将理解设计的代码生成到你自己的代码库中 — 将 Figma 画面转换为你仓库中的文件，并匹配你的技术栈。

所有内容都是一个产物：团队工作区中的一个 git 仓库，通过其 sessionId 标识。

快速开始：Claude Code 插件

/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide

这会配置 MCP 服务并安装技能。按提示完成身份验证即可。

安装与设置

要求

• 支持 MCP 的 AI 编码工具 — Claude Code、Codex、Cursor、VS Code，或任何支持可流式 HTTP 的工具
• Agent Grid 账户

服务 URL： https://api.agentgrid.io/v1/mcp · 传输方式： 可流式 HTTP

Claude Code（手动）

1. 在终端中（不要在 Claude Code 内）：

claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp

2. 重启 Claude Code
3. 运行 /mcp，选择 anima，并在浏览器中完成身份验证
4. （可选）在身份验证过程中连接 Figma，以启用 Figma 工作流

使用 claude mcp list、claude mcp get anima、claude mcp remove anima 管理服务。请参阅 Anthropic 的 MCP 文档。

OpenAI Codex

codex mcp add anima --url https://api.agentgrid.io/v1/mcp

或者在 ~/.codex/config.toml 中：

[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"

然后安装技能（推荐）：

codex skill install AnimaApp/mcp-server-guide/skills/anima

请参阅 OpenAI 的 Codex MCP 文档。

VS Code

1. Cmd Shift P / Ctrl Shift P → MCP: Add Server
2. 选择 HTTP
3. URL：https://api.agentgrid.io/v1/mcp
4. 服务 ID：anima
5. 选择全局或工作区范围

{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

说明

VS Code 中的 MCP 需要 GitHub Copilot。请参阅 VS Code 文档。

Cursor

Cursor > Settings > Cursor Settings > MCP > + Add new global MCP server：

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

点击 Connect 进行身份验证。请参阅 Cursor 文档。

其他客户端

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

没有 MCP？使用 CLI

Anima CLI 可在 Shell 中运行相同的工具，无需配置 MCP 服务：

npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"

提示你的 Agent

构建新内容

“为我构建一个 SaaS 分析仪表板，包含侧边栏、KPI 卡片和活动动态。”

你的 Agent 会创建一个产物，等待构建完成，然后返回一个实时预览 URL。你可以要求它生成不同版本，它便能并行生成多个版本供你比较。

克隆网站，或将 Figma 设计实现为实时应用

“将 stripe.com/payments 克隆为一个应用。” “将此 Figma 画板转换为可运行的网站：https://figma.com/design/...”

编辑现有产物

“https://app.agentgrid.io/artifacts/xyz 上的页眉在移动设备上显示异常——修复它。”

Agent 会克隆该产物的 git 仓库、修复问题并推送更改。内容更改始终通过 git 进行。

在你自己的代码库中实现 Figma 设计

“在我的项目中实现此 Figma 设计：https://figma.com/design/...”

Agent 会生成与你的技术栈匹配的代码，并将返回的设计快照用作视觉参考。

发布

“发布它。”

发布会让应用向所有人公开——分享时不需要发布，因为产物 URL 本身已经可以查看。

设计系统访问权限（Enterprise）

“使用此 Figma URL，按照我们的设计系统实现一个登录表单：...”

设计系统由我们的团队协助设置。联系我们，以完成配置。

最佳实践

描述意图，而不是 CSS。 Agent Grid 能理解设计；在提示词中加入十六进制颜色值和像素尺寸会削弱这一能力，生成普通的结果。说明用途、目标用户，以及最重要的 3–5 项功能。

实现时要具体。“使用 src/components/ui 中现有的 Button 和 Input 组件实现登录表单”比“实现这个设计”更好。

拆分大型设计。 先做页眉，再做卡片网格，最后做页脚。有针对性的请求会更准确。

故障排除

异步生成、创建类型验证、git 令牌过期和发布语义等常见问题，详见技能的故障排除参考。

无法识别 MCP： 确认已在工具中配置服务，并已完成身份验证。 身份验证问题： 移除并重新添加服务，清除 Cookie，然后重启客户端。

此仓库包含的内容

路径	用途
skills/anima/SKILL.md	Agent 读取的技能
skills/anima/references/	工具参考、设置、git 工作流、示例、故障排除
.claude-plugin/	Claude Code 插件和市场清单
.mcp.json	插件安装的 MCP 服务
server.json	MCP Registry 条目
anima/SKILL.md	技能副本，由 CI 保持同步

更多资源

• Agent Grid
• Anima MCP 文档
• Anima CLI
• 联系我们，了解 Enterprise 功能