Skip to main content
Glama
deenesjakoruzh
R0STEFAN

webstudio-ai-agent

by R0STEFAN
OverviewSchemaSourceRelated ServersDiscussionsAdmin
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: Roblox Studio MCP Server

🏗️ 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:

  1. Erstellen einer Datenvariable:

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

  1. 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 deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityActive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

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

  • CodeLocal

    skyrocketeer
    A
    license
    Not graded
    quality
    B
    maintenance
    Connects MCP-compatible AI clients and agents to one durable Project Brain plus controlled access to authorized project folders on your own machine. Enables file editing, terminal and Git operations, project intelligence, browser automation, and local MCP server federation, all scoped to explicit workspace grants.
    35 npm
    Apache 2.0

  • dragon-work

    Ajiumeng123
    A
    license
    Not graded
    quality
    A
    maintenance
    Provides a local-first AI workspace for chatting, invoking skills, managing projects, and integrating MCP tools, with all data stored on the user's machine.
    2
    Apache 2.0