Anima MCP Server
What it does
Connect AI coding agents to Anima Playground, Figma, and your design system.
- Connects 在云端运行
- Account or key Sign in to the service when you connect (OAuth)
- Category 开发者工具
安装
选择你使用的 AI 应用,然后复制设置。
通过 4/5 项检查 · 你的提问会经过开发者的服务器(public-api.animaapp.com) · ✓ 命令已检查 2026年11月13日
第一步:你用哪个 AI?
选择你用的应用,步骤会显示在下方。
可连接 Claude · 约 2 分钟
不需要密钥,不用安装程序 · 在 claude.ai 或桌面应用设置一次,即可在聊天中使用 · 免费账户可添加 1 个 · Team/Enterprise 方案由所有者(Owner)添加
打开 Claude 的 Connectors 页面
CustomizeConnectors
点击“Add” → “Custom” → “Web”,填写这 2 项
把这里的内容复制到 Claude 中同名的输入框,然后点击 Continue
Name · 名称Anima MCP ServerRemote MCP server URL · 地址https://public-api.animaapp.com/v1/mcp在 Claude 检测到的登录设置页点击 Continue · Authentication 按作者说明选择(Sign in now、Sign in when needed 或 No sign in),然后点击 Add
在聊天中开启
+ConnectorsAnima MCP Server
试一试
用 Anima MCP Server 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude 说正在使用 Anima MCP Server,或回答中出现 Anima MCP Server 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
能否连接 ChatGPT 取决于方案
完整 MCP:网页版 ChatGPT Business、Enterprise 或 Edu · Pro:以读取/获取权限连接,修改数据的工具可能用不了 · Plus:官方文档尚未确认,如果在插件页看到添加自定义 MCP 的选项可以试试 · 仅限网页
在网页版 ChatGPT 打开添加 MCP 的页面
Plugins+Add custom MCP server
填写名称和地址
输入名称,在 Connection 下粘贴地址,勾选风险提示,然后点击 Create as a plugin
Name · 名称Anima MCP ServerConnection · 地址https://public-api.animaapp.com/v1/mcp在聊天中选择 Anima MCP Server
开启新聊天,输入前先从插件列表中选择 Anima MCP Server
试一试
用 Anima MCP Server 告诉我你能帮我做什么,然后做一件给我看✓ 如果 ChatGPT 说正在使用 Anima MCP Server,或回答中出现 Anima MCP Server 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 OpenAI 帮助页面核实 · 你的界面可能因版本略有不同
可连接 Claude Code · 约 2 分钟
不需要密钥,不用安装程序
打开终端
Mac:按 Command+空格,输入 Terminal · Windows:打开 PowerShell
粘贴这条命令并按 Enter
claude mcp add --transport http --scope user anima https://public-api.animaapp.com/v1/mcp在 Claude Code 中输入 /mcp
应能看到 Anima MCP Server 在列表中并显示已连接
试一试
用 Anima MCP Server 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude Code 说正在使用 Anima MCP Server,或回答中出现 Anima MCP Server 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
可连接 Cursor · 约 2 分钟
不需要密钥,不用安装程序
在 Cursor 中以 Agent 模式打开 AI 聊天
试一试
用 Anima MCP Server 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Cursor 说正在使用 Anima MCP Server,或回答中出现 Anima MCP Server 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Cursor 帮助页面核实 · 你的界面可能因版本略有不同
可连接 VS Code · 约 2 分钟
不需要密钥,不用安装程序
在 VS Code 中以 Agent 模式打开 AI 聊天
试一试
用 Anima MCP Server 告诉我你能帮我做什么,然后做一件给我看✓ 如果 VS Code 说正在使用 Anima MCP Server,或回答中出现 Anima MCP Server 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 VS Code 帮助页面核实 · 你的界面可能因版本略有不同
其他支持 MCP 的应用(如 Windsurf、Zed、Gemini CLI)添加方式各不相同,请在应用列表中查看
通过网页连接的应用使用的地址
https://public-api.animaapp.com/v1/mcpJSON 设置在下方“开发者专用”中
开发者专用:终端命令和 JSON 设置
通过网页连接
Claude Code
claude mcp add --transport http --scope user anima https://public-api.animaapp.com/v1/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"anima": {
"url": "https://public-api.animaapp.com/v1/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"anima": {
"type": "http",
"url": "https://public-api.animaapp.com/v1/mcp"
}
}
}这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
一览
哪些应用可以使用它
依据这个服务器的连接方式和各应用自己的文档,检查于 2026年11月10日。
通过互联网连接,适用于
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
它能做什么
服务器要求先登录,才会列出它的工具。
基础检查i
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月14日
- ✓ 通过
作者与仓库一致
注册名称已通过 GitHub 账户 AnimaApp 验证,该账户拥有此仓库
- ✓ 通过
仍在维护
代码最后更新于12天前
- ✕ 未通过
有许可证
仓库中没有找到许可证文件
- ✓ 通过
端点有响应
在 758 毫秒内响应(HTTP 401)
- ✓ 通过
使用 OAuth 登录
声明支持 OAuth 登录,你的 AI 应用可以带你去登录
- … 尚未检查
工具描述中没有隐藏指令
尚未检查;我们会在检查端点时读取工具列表
讨论
提问、分享技巧或报告无法使用。按“有帮助”数量排序。
用户评价
还没有评价
与“开发者工具”中的其他服务器比较i
- 星标数多于此分类中其他 5853 个服务器的 87%
- 发布到注册中心的时间比此分类中其他 5853 个服务器的 2% 更新
- 基础检查结果等于或优于此分类中其他 5853 个服务器的 50%
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
常见问题
Anima MCP Server 安全吗?
它在 5 项适用的基础检查中通过了 4 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
它需要哪些密钥或代码?
注册中心没有列出必需的密钥,不过有些服务器会在首次使用时要求你登录。
它在我的电脑上运行还是在云端?
它在作者的云端运行。通过互联网连接,无需安装,但你发送的内容会经过作者的服务器。
它还在维护吗?
GitHub 仓库最后更新于12天前,最新版本(1.0.0)于9个月前进入注册中心。
哪些应用可以使用它?
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。它通过 URL 连接,因此也能用于接受远程 MCP 的应用,例如网页版 ChatGPT(Business 及以上为完整 MCP;Pro 为只读)。
有什么可以替代它?
同一分类中有:REA, GitHub, Serena MCP: the IDE for your agent
同类别的其他选择
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
GitHub
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Serena MCP: the IDE for your agent
A powerful toolkit for coding, providing semantic retrieval and editing capabilities.
作者的 README
打开 README
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
Agent Grid MCP Server Guide
Agent Grid is a governed hub, by Anima, where AI agents build, host, publish, and share web apps. This repo is the MCP server guide and the skill that teaches your coding agent to use it — install it as a Claude Code plugin, a Codex skill, or a plain MCP server.
Agent Grid lives at [app.agentgrid.io](https://app.agentgrid.io/). For the full docs, see our help documentation.
What your agent can do
- Build an app from a prompt, a website, or a Figma design — describe it, clone a URL, or hand over Figma frames, and get back a running app at a live URL.
- Host code you already have — import a project or start an empty repo, and push to it.
- Edit any artifact over git — every artifact is a real git repository; clone, commit, push.
- Publish to a live public URL — and take it down again.
- Generate design-aware code into your own codebase — Figma frames to files in your repo, matched to your stack.
Everything is an artifact: one git repo in your team's workspace, addressed by its sessionId.
Quick start: Claude Code plugin
/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide
This configures the MCP server and installs the skill. Authenticate when prompted. That's it.
Installation & setup
Requirements
- An MCP-capable AI coding tool — Claude Code, Codex, Cursor, VS Code, or anything speaking streamable HTTP
- An Agent Grid account
Server URL: https://api.agentgrid.io/v1/mcp · Transport: streamable HTTP
Claude Code (manual)
- In your terminal (not inside Claude Code):
claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp
- Restart Claude Code
- Run
/mcp, select anima, and authenticate in the browser - (Optional) Connect Figma during authentication to enable the Figma flows
Manage servers with claude mcp list, claude mcp get anima, claude mcp remove anima. See Anthropic's MCP documentation.
OpenAI Codex
codex mcp add anima --url https://api.agentgrid.io/v1/mcp
Or in ~/.codex/config.toml:
[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"
Then install the skill (recommended):
codex skill install AnimaApp/mcp-server-guide/skills/anima
See OpenAI's Codex MCP documentation.
VS Code
Cmd Shift P/Ctrl Shift P→MCP: Add Server- Select HTTP
- URL:
https://api.agentgrid.io/v1/mcp - Server ID:
anima - Choose global or workspace scope
{
"servers": { "anima": { "type": "http", "url": "https://api.agentgrid.io/v1/mcp" } } }
[!NOTE]
MCP in VS Code requires GitHub Copilot. See VS Code's documentation.
Cursor
Cursor > Settings > Cursor Settings > MCP > + Add new global MCP server:
{
"mcpServers": { "anima": { "url": "https://api.agentgrid.io/v1/mcp" } } }
Click Connect to authenticate. See Cursor's documentation.
Any other client
{
"mcpServers": { "anima": { "url": "https://api.agentgrid.io/v1/mcp" } } }
No MCP? Use the CLI
The Anima CLI runs the same tools from a shell — no MCP server to configure:
npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"
Prompting your agent
Build something new
"Build me a SaaS analytics dashboard with a sidebar, KPI cards, and an activity feed."
Your agent creates an artifact, waits for the build, and hands back a live preview URL. Ask for variants and it can generate several in parallel to compare.
Clone a site or implement a Figma design as a live app
"Clone stripe.com/payments into an app."
"Turn this Figma frame into a working site: https://figma.com/design/..."
Edit an existing artifact
"The header on https://app.agentgrid.io/artifacts/xyz is broken on mobile — fix it."
The agent clones the artifact's git repo, fixes it, and pushes. Content changes always go through git.
Implement a Figma design in your own codebase
"Implement this Figma design in my project: https://figma.com/design/..."
The agent generates code matched to your stack and uses the returned design snapshots as visual reference.
Publish
"Publish it."
Publishing makes an app public to the world — it isn't needed just to share, since the artifact URL is already viewable.
Design system access (Enterprise)
"Implement a login form following our design system, using this Figma URL: ..."
Design system setup is done with our team. Contact us to get it configured.
Best practices
Describe intent, not CSS. Agent Grid is design-aware; hex values and pixel dimensions in a prompt override that and produce generic results. Say what it's for, who it's for, and the 3–5 features that matter.
Be specific when implementing. "Implement the login form using our existing Button and Input components from src/components/ui" beats "implement this design".
Break down large designs. Header first, then the card grid, then the footer. Focused requests are more accurate.
Troubleshooting
Common issues — async generation, create-type validation, git token expiry, publish semantics — are covered in the skill's troubleshooting reference.
MCP not recognized: confirm the server is configured in your tool and that authentication completed. Authentication issues: remove and re-add the server, clear cookies, restart your client.
What's in this repo
| Path | Purpose |
|---|---|
skills/anima/SKILL.md | The skill your agent reads |
skills/anima/references/ | Tool reference, setup, git workflow, examples, troubleshooting |
.claude-plugin/ | Claude Code plugin and marketplace manifests |
.mcp.json | MCP server the plugin installs |
server.json | MCP Registry entry |
anima/SKILL.md | Mirror of the skill, kept in sync by CI |