Anima MCP Server

io.github.AnimaApp由 GitHub 帳號 AnimaApp 發布v1.0.0更新於 Oct 24, 2026

Connect AI coding agents to Anima Playground, Figma, and your design system.

已驗證Streamable HTTP可網頁執行雲端與基礎設施開發者工具媒體與設計

概覽

AI 產生的概覽

Anima 的 Agent Grid MCP 伺服器讓編碼助理以 git 儲存庫形式建置、託管、編輯並發布網頁應用程式,也能依 Figma 設計產生程式碼。

可以做什麼
依提示詞、網站網址或 Figma 畫框建置應用程式,回傳可存取的預覽連結,並可平行產生多個版本以便比較。託管既有程式碼:匯入專案或建立空白儲存庫並推送。透過 git 編輯產出物:複製、提交並推送變更到團隊工作區儲存庫。將應用程式發布到公開網址,或將其下架。依 Figma 畫框向自有程式碼庫產生符合技術棧的設計程式碼。
適用情境
當你希望編碼助理把一段描述、現有網站或 Figma 設計變成可運作的網頁應用程式,透過 git 迭代託管的產出物,或直接把 Figma 設計實作到自己的程式碼庫時使用。
執行需求
遠端 streamable HTTP 端點;Agent Grid 帳號;依提示在瀏覽器中完成 OAuth 驗證;支援 MCP 的用戶端,例如 Claude Code、Codex、Cursor 或 VS Code(VS Code 需要 GitHub Copilot)。驗證時可選擇連接 Figma,Figma 相關流程需要它。設計系統存取僅限企業版,需與團隊設定。
安裝前請注意
發布會讓應用程式對全世界公開,發布前請確認意圖。助理會寫入團隊工作區的 git 儲存庫(複製、提交、推送),並可匯入和修改程式碼。驗證透過瀏覽器 OAuth 完成,可能取得所連接 Figma 內容的存取權;git 權杖過期是已知問題。設計系統功能需要企業版安排。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Anima MCP Server,將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存,絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.AnimaApp%2Fanima/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

{
  "mcpServers": {
    "anima": {
      "type": "http",
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

README

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.

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)

  1. In your terminal (not inside Claude Code):
bash
claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp
  1. Restart Claude Code
  2. Run /mcp, select anima, and authenticate in the browser
  3. (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

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

Or in ~/.codex/config.toml:

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

Then install the skill (recommended):

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

See OpenAI's Codex MCP documentation.

VS Code

  1. Cmd Shift P / Ctrl Shift P → MCP: Add Server
  2. Select HTTP
  3. URL: https://api.agentgrid.io/v1/mcp
  4. Server ID: anima
  5. Choose global or workspace scope
json
{  "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:

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

Click Connect to authenticate. See Cursor's documentation.

Any other client

json
{  "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:

bash
npx @animaapp/cli@latest loginnpx @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

PathPurpose
skills/anima/SKILL.mdThe skill your agent reads
skills/anima/references/Tool reference, setup, git workflow, examples, troubleshooting
.claude-plugin/Claude Code plugin and marketplace manifests
.mcp.jsonMCP server the plugin installs
server.jsonMCP Registry entry
anima/SKILL.mdMirror of the skill, kept in sync by CI

Additional resources

來源:README.md,提交 45bf229

工具

0
該伺服器需要登入,因此 SourceWeft 無法在沒有帳號的情況下讀取其工具,也未收錄。已連接帳號所能看到的內容可能因帳號及其權限而異。

版本歷史

1
  1. v1.0.0最新Sep 16, 2026

評分

已滿足適用檢查項的 75%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。