de en es ja ko ru zh

webstudio-ai-agent

Name: webstudio-ai-agent
Author: R0STEFAN

by R0STEFAN

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

🚀 Webstudio AI Agent & Local MCP Toolkit

AI 에이전트(Antigravity, Cursor, Claude Code, Windsurf)를 위한 완전한 자율 브리지로, 요금제 제한, API 한도, 접근 오류 없이 Webstudio MCP의 100% 기능을 로컬에서 열어줍니다.

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

🌟 주요 문제 및 해결책

Cloud API를 통한 일반적인 작업	우리의 자율 브리지 (Local MCP + Cloud Push)
❌ 무료 요금제에서 차단됨 (`FORBIDDEN`)	✅ 100% 무료, 제한 없음
❌ 유료 API 키 필요	✅ `.webstudio/data.json`에서 직접 오프라인으로 작동
❌ 느림 (수십 개의 네트워크 HTTP 요청)	✅ 즉시 생성 (<500ms) — Immer 트랜잭션 덕분
❌ 제한된 기능	✅ JSX, Radix UI, Animation Groups, Tokens, Collections 완전 지원

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

⚡ 설치 (2가지 옵션 중 선택)

옵션 A: 프로젝트에 로컬 설치 (권장, 격리됨)

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

옵션 B: 컴퓨터에 전역 설치 (모든 프로젝트에 한 번)

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

🛠️ 사용 방법

1. AI 어시스턴트와 함께 사용 (Antigravity / Cursor / Claude Code)

편집기에서 Webstudio 프로젝트를 열기만 하면 됩니다. AGENTS.md 및 .agents/skills/webstudio-ai-designer/SKILL.md 파일이 AI 어시스턴트에게 모든 명령과 생성 규칙을 자동으로 설명합니다!

2. MCP 명령 예시:

📄 페이지 및 요소 읽기:

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

🎨 JSX로 섹션 추가 (`insert-fragment`):

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

실행:

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

📊 JSON 리소스의 동적 컬렉션:

데이터 변수 생성:

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

동적 컬렉션 연결:

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

🪟 네이티브 Radix UI 컴포넌트 (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>

🎬 네이티브 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)" } }
            ]
          }
        ]
      }
    }
  ]
}

☁️ Webstudio Cloud 동기화

페이지 생성 또는 편집을 완료했으면 다음 한 줄의 명령으로 전체 프로젝트를 클라우드에 동기화하세요:

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

📜 라이선스

이 프로젝트는 MIT 라이선스로 배포됩니다.

저자: 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

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

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
VULKOAuth
io.github.devjoaocastro
Generate, edit, and deploy immersive 3D/WebGL web projects from any MCP assistant.
Developer Tools Multimedia Processing
27
MeroFoundryOAuth
com.merofoundry
Build and publish full-stack apps from your coding agent: models, rules, pages, auth, per-app MCP.
Coding Agents Developer Tools
1

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.
Updated 3 months ago (2026-07-26 16:17 UTC)
-
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 2 months ago (2026-08-24 05:06 UTC)
21 npm
MIT
CodeLocal
Coding Agents Developer Tools Command Line
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.
Updated a month ago (2026-09-13 03:52 UTC)
35 npm
Apache 2.0
dragon-work
AI & Machine Learning Project Management
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.
Updated a month ago (2026-09-18 01:35 UTC)
2
Apache 2.0