Allows integration of Radix UI components into Webstudio projects, including dialogs, popups, and other UI elements.
Click on "Deploy 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., "@webstudio-ai-agent Add a new hero section to my landing page with a call-to-action button"
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.
A full-fledged autonomous bridge for AI agents (Antigravity, Cursor, Claude Code, Windsurf) that unlocks 100% of Webstudio MCP capabilities locally without any tariff restrictions, API limits, or access errors.
Typical work via Cloud API | Our autonomous bridge (Local MCP + Cloud Push) |
β Blocked on free tiers ( | β 100% free and without limits |
β Requires paid API keys | β
Works offline directly with |
β Slow (dozens of network HTTP requests) | β Instant generation (<500ms) thanks to Immer transactions |
β Limited functionality | β Full support for JSX, Radix UI, Animation Groups, Tokens, Collections |
Related MCP server: Vibe Coder MCP Server
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β AI CODING ASSISTANT β
β (Google Antigravity, Cursor, Claude Code) β
βββββββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββββββ
β
βΌ
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β LOCAL WEBSTUDIO MCP RUNTIME β
β (70+ Official MCP Tools: insert-fragment, etc.) β
βββββββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββββββ
β (Fast Immer Local Mutation)
βΌ
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β LOCAL PROJECT SOURCE OF TRUTH β
β .webstudio/data.json & .webstudio/assets/ β
βββββββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββββββ
β
βΌ webstudio import --to "<shareLink>"
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β WEBSTUDIO CLOUD BUILDER β
β (ΠΠΈΡΡΡΠ²Π΅ Π²ΡΠ΄ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π² Ρ
ΠΌΠ°ΡΡ) β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ# 1. ΠΡΡΠ°Π½ΠΎΠ²ΡΡΡ Webstudio Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π² ΠΏΡΠΎΠ΅ΠΊΡ
npm i webstudio
# 2. ΠΠ°ΠΏΡΡΡΡΡΡ ΠΏΠ°ΡΡΠ΅Ρ
node scripts/setup-local-mcp.mjs --local
# 3. ΠΠ°Π²Π°Π½ΡΠ°ΠΆΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ· Ρ
ΠΌΠ°ΡΠΈ
npx webstudio sync --link "<shareLink>"
# 4. ΠΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠΉΡΠ΅ MCP-ΡΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΈ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ
npx webstudio mcp single-op-call list-pages "{}"
# 5. ΠΡΠ΄ΠΏΡΠ°Π²ΡΠ΅ ΠΎΠ½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ Ρ
ΠΌΠ°ΡΡ
npx webstudio import --to "<shareLink>"# 1. ΠΡΡΠ°Π½ΠΎΠ²ΡΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ
npm i -g webstudio
# 2. ΠΠ°ΠΏΡΡΡΡΡΡ ΠΏΠ°ΡΡΠ΅Ρ
node scripts/setup-local-mcp.mjs
# 3. ΠΠ°Π²Π°Π½ΡΠ°ΠΆΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ· Ρ
ΠΌΠ°ΡΠΈ
webstudio sync --link "<shareLink>"
# 4. ΠΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠΉΡΠ΅ MCP-ΡΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΈ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ
webstudio mcp single-op-call list-pages "{}"
# 5. ΠΡΠ΄ΠΏΡΠ°Π²ΡΠ΅ ΠΎΠ½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ Ρ
ΠΌΠ°ΡΡ
webstudio import --to "<shareLink>"Just open any Webstudio project in your editor.
The AGENTS.md and .agents/skills/webstudio-ai-designer/SKILL.md files automatically explain all commands and generation rules to the AI assistant!
webstudio mcp single-op-call list-pages "{}"
webstudio mcp single-op-call list-instances '{"pagePath":"/services"}'
webstudio mcp single-op-call list-design-tokens "{}"insert-fragment):Create payload.json:
{
"parentInstanceId": "<parent-instance-id>",
"fragment": "<ws.element ws:tag='section' ws:tokens={[token('token-card', css`background: #fff; padding: 32px; border-radius: 16px;`)]} ws:style={css`display: flex; gap: 24px; @media (max-width: 767px) { flex-direction: column; }`}><ws.element ws:tag='h2'>ΠΠ°Π·Π²Π° Π‘Π΅ΠΊΡΡΡ</ws.element></ws.element>"
}Run:
webstudio mcp single-op-call insert-fragment --input-file payload.jsonCreating a data variable:
webstudio mcp single-op-call create-variable --input-file pricing_data.jsonConnecting a dynamic collection:
webstudio mcp single-op-call insert-collection --input-file collection.json<radix.Dialog>
<radix.DialogTrigger>
<ws.element ws:tag='button'>ΠΡΠ΄ΠΊΡΠΈΡΠΈ ΠΠΎΠΏΠ°ΠΏ</ws.element>
</radix.DialogTrigger>
<radix.DialogOverlay ws:style={css`position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;`}>
<radix.DialogContent ws:style={css`background: #fff; border-radius: 20px; padding: 32px; max-width: 500px;`}>
<$.Box>
<radix.DialogTitle>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΠΎΠΏΠ°ΠΏΡ</radix.DialogTitle>
<radix.DialogDescription>ΠΠΏΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΊΠ½Π°</radix.DialogDescription>
</$.Box>
<radix.DialogClose>β</radix.DialogClose>
</radix.DialogContent>
</radix.DialogOverlay>
</radix.Dialog><animation.AnimateChildren>):{
"updates": [
{
"instanceId": "<animation-instance-id>",
"name": "action",
"type": "animationAction",
"value": {
"type": "view",
"animations": [
{
"timing": {
"duration": { "type": "unit", "value": 800, "unit": "ms" },
"rangeStart": { "type": "unit", "value": 10, "unit": "%" },
"easing": "ease-out",
"fill": "backwards"
},
"keyframes": [
{ "offset": 0, "styles": { "opacity": "0", "transform": "translateY(40px)" } },
{ "offset": 1, "styles": { "opacity": "1", "transform": "translateY(0px)" } }
]
}
]
}
}
]
}When you finish generating or editing pages, sync the entire project to the cloud with a single command:
webstudio import --to "https://apps.webstudio.is/builder/<projectId>?authToken=<token>"This project is distributed under the MIT license.
Author: R0STEFAN
This server cannot be deployed
Let your AI agent build, preview and update web apps, download source and publish when you allow it.
Build, validate, deploy β HTTP APIs, cron jobs, webhooks and MCP tools β from your AI client.
Zero-setup MCP gateway securely connecting AI to your tools with authentication and workflows
Edit and publish your FramerToNextJS sites (converted Framer or AI-built) from Claude, Cursor or Codex. 19 tools: read pages, rewrite copy, restyle elements, add sections and pages, design Studio sites, manage CMS collections and items, then publish to your own host. OAuth with a read-only option, and MCP runs no model on FNJ's side. Requires an FNJ plan (Lifetime or any AI builder plan).
