Anima MCP Server
OfficialAllows AI coding agents to fetch Figma designs via Anima MCP and generate production-ready code directly from the design.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Anima MCP Serverconvert the latest Figma design to production-ready code"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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. 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.
Related MCP server: Figma MCP Server
Quick start: Claude Code plugin
/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guideThis 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/mcpRestart 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/mcpOr 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/animaSee OpenAI's Codex MCP documentation.
VS Code
Cmd Shift P/Ctrl Shift P→MCP: Add ServerSelect HTTP
URL:
https://api.agentgrid.io/v1/mcpServer ID:
animaChoose global or workspace scope
{
"servers": {
"anima": {
"type": "http",
"url": "https://api.agentgrid.io/v1/mcp"
}
}
}MCP in VS Code requiresGitHub 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 |
| The skill your agent reads |
| Tool reference, setup, git workflow, examples, troubleshooting |
| Claude Code plugin and marketplace manifests |
| MCP server the plugin installs |
| MCP Registry entry |
| Mirror of the skill, kept in sync by CI |
Additional resources
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- Alicense-qualityDmaintenanceGives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.93,092MIT
- Flicense-qualityDmaintenanceConnects AI applications to Figma API for extracting design data, generating production-ready HTML/CSS from designs, and capturing screenshots in multiple formats.2,101
- Alicense-qualityDmaintenanceConnects Figma designs to AI agents, enabling extraction of production-ready code, assets, and design tokens through natural language descriptions. Supports React, Vue, CSS, and Tailwind with real-time design system analysis.93,09239MIT
- FlicenseAqualityDmaintenanceConnects IDE to Figma Desktop App, enabling AI assistants to generate and manipulate layouts, shapes, and designs directly inside the Figma canvas.81
Related MCP Connectors
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
Connect AI assistants to Stellary projects, boards, documents, and governed agent workflows.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/AnimaApp/mcp-server-guide'
If you have feedback or need assistance with the MCP directory API, please join our Discord server