de en es ja ko ru zh

webstudio-ai-agent

Name: webstudio-ai-agent
Author: R0STEFAN

by R0STEFAN

Overview Schema Related Servers Score Discussions

JavaScript

Local

🚀 Webstudio KI-Agent & Lokales MCP-Toolkit

Vollwertige autonome Brücke für KI-Agenten (Antigravity, Cursor, Claude Code, Windsurf), die 100% der Webstudio-MCP-Funktionen lokal öffnet, ohne jegliche Tarifbeschränkungen, API-Limits oder Zugriffsfehler.

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

🌟 Hauptproblem und Lösung

Normale Arbeit über Cloud-API	Unsere autonome Brücke (Local MCP + Cloud Push)
❌ Wird bei kostenlosen Tarifen blockiert (`FORBIDDEN`)	✅ 100% kostenlos und ohne Limits
❌ Erfordert kostenpflichtige API-Schlüssel	✅ Funktioniert offline direkt mit `.webstudio/data.json`
❌ Langsam (Dutzende Netzwerk-HTTP-Anfragen)	✅ Sofortige Generierung (<500ms) dank Immer-Transaktionen
❌ Eingeschränkter Funktionsumfang	✅ Volle Unterstützung für JSX, Radix UI, Animation Groups, Tokens, Collections

Related MCP server: OGSync

🏗️ Architektur (Wie es funktioniert)

┌───────────────────────────────────────────────────────────┐
│                    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 Optionen zur Auswahl)

Option A: Lokal im Projekt (Empfohlen, isoliert)

# 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: Global auf dem Computer (Einmal für alle Projekte)

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

🛠️ So verwenden Sie es

1. Verwendung mit KI-Assistenten (Antigravity / Cursor / Claude Code)

Öffnen Sie einfach ein beliebiges Webstudio-Projekt in Ihrem Editor. Die Dateien AGENTS.md und .agents/skills/webstudio-ai-designer/SKILL.md erklären dem KI-Assistenten automatisch alle Befehle und Generierungsregeln!

2. Beispiele für MCP-Befehle:

📄 Lesen von Seiten und Elementen:

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

🎨 Hinzufügen von Sektionen über JSX (`insert-fragment`):

Erstellen Sie 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>"
}

Führen Sie aus:

webstudio mcp single-op-call insert-fragment --input-file payload.json

📊 Dynamische Sammlungen aus JSON-Ressource:

Erstellen einer Datenvariable:

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

Anbinden einer dynamischen Sammlung:

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

🪟 Native Radix-UI-Komponenten (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-Gruppen (`<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)" } }
            ]
          }
        ]
      }
    }
  ]
}

☁️ Synchronisierung in die Webstudio Cloud

Wenn Sie die Generierung oder Bearbeitung von Seiten abgeschlossen haben, synchronisieren Sie das gesamte Projekt mit einem einzigen Befehl in die Cloud:

webstudio import --to "https://apps.webstudio.is/builder/<projectId>?authToken=<token>"

📜 Lizenz

Dieses Projekt wird unter der MIT-Lizenz verbreitet.

Autor: R0STEFAN

This server cannot be installed

license - permissive license

Not graded

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

rbxsync-mcpofficial
Developer Tools Testing & QA Tools Coding Agents
Smokestack-Games
F
license
Not graded
quality
B
maintenance
Enables AI agents to extract, sync, test, and debug Roblox games bidirectionally between Studio and filesystem via MCP.
Updated a month 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 a month 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 19 days 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 9 days ago (2026-08-18 08:20 UTC)
28
MIT

View all related MCP servers

Related MCP Connectors

VULK
Generate, edit, and deploy immersive 3D/WebGL web projects from any MCP assistant.
anythingmcp
Self-hosted MCP gateway: turn any API, database or MCP server into AI connectors — no code.
TablaCognita
MCP-native collaborative markdown editor with real-time AI document editing

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

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/R0STEFAN/webstudio-ai-agent'

If you have feedback or need assistance with the MCP directory API, please join our Discord server