Which integrations are available for this server?

Allows integration of Radix UI components into Webstudio projects, including dialogs, popups, and other UI elements.

How do I use webstudio-ai-agent?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. 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.

de en es ja ko ru zh

webstudio-ai-agent

by R0STEFAN

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

🚀 Webstudio AI Agent & Local MCP Toolkit

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.

License: MIT Webstudio: Local MCP Node: >=18

🌟 The main problem and the solution

Typical work via Cloud API	Our autonomous bridge (Local MCP + Cloud Push)
❌ Blocked on free tiers (`FORBIDDEN`)	✅ 100% free and without limits
❌ Requires paid API keys	✅ Works offline directly with `.webstudio/data.json`
❌ 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: OGSync

🏗️ Architecture (How it works)

┌───────────────────────────────────────────────────────────┐
│                    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                  │
│         (Миттєве відображення результату в хмарі)         │
└───────────────────────────────────────────────────────────┘

⚡ Installation (2 options to choose from)

Option A: Locally in the project (Recommended, isolated)

# 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>"

Option B: Globally on the computer (Once for all projects)

# 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>"

🛠️ How to use

1. Use with AI assistants (Antigravity / Cursor / Claude Code)

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!

2. MCP command examples:

📄 Reading pages and elements:

webstudio mcp single-op-call list-pages "{}"
webstudio mcp single-op-call list-instances '{"pagePath":"/services"}'
webstudio mcp single-op-call list-design-tokens "{}"

🎨 Adding sections via JSX (`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.json

📊 Dynamic collections from a JSON resource:

Creating a data variable:

webstudio mcp single-op-call create-variable --input-file pricing_data.json

Connecting a dynamic collection:

webstudio mcp single-op-call insert-collection --input-file collection.json

🪟 Native Radix UI components (Dialog / Popups):

<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>

🎬 Native Webstudio Animation Groups (`<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)" } }
            ]
          }
        ]
      }
    }
  ]
}

☁️ Synchronization to Webstudio Cloud

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>"

📜 License

This project is distributed under the MIT license.

Author: R0STEFAN

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityMaintained

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

Server4AgentOAuth
com.server4agent
Give any MCP-compatible AI assistant a builder for live, hosted web tools and workflows.
App Automation Developer Tools Browser Automation
2
Air Pipe B
io.airpipe
Build, validate, deploy — HTTP APIs, cron jobs, webhooks and MCP tools — from your AI client.
Developer Tools CI/CD & DevOps App Automation
191
nexusOAuth
com.civic
Zero-setup MCP gateway securely connecting AI to your tools with authentication and workflows
Agent Orchestration Developer Tools App Automation
2
VULK
io.github.devjoaocastro
Generate, edit, and deploy immersive 3D/WebGL web projects from any MCP assistant.
Developer Tools Multimedia Processing
27

Related MCP Servers

rbxsync-mcpofficial
Developer Tools Testing & QA Tools Coding Agents
Smokestack-Games
F
license
Not graded
quality
D
maintenance
Enables AI agents to extract, sync, test, and debug Roblox games bidirectionally between Studio and filesystem via MCP.
Updated 2 months ago (2026-07-25 19:18 UTC)
31
-
OGSync
joxan2137
F
license
Not graded
quality
A
maintenance
Enables AI agents to interact with Roblox Studio via a token-efficient MCP server, live two-way script sync, and zero-friction plugin setup.
Updated 2 months ago (2026-07-26 16:17 UTC)
-
DawnMCPofficial
Code Analysis Knowledge & Memory Coding Agents
dawnmcp
F
license
B
quality
C
maintenance
A fully local, privacy-first MCP server that gives AI coding assistants deep repository intelligence with file-and-line-cited answers, persistent semantic memory, and agentic abilities like task planning and code review—all without any cloud API calls.
Updated a month ago (2026-08-08 16:12 UTC)
23
-
Roblox Studio MCP Server
Games & Gamification Developer Tools
erickow
A
license
Not graded
quality
A
maintenance
Enables AI tools to read the Roblox Studio game tree, edit scripts, insert models, and run playtests via the Studio MCP interface.
Updated 23 days ago (2026-08-24 05:06 UTC)
16 npm
MIT