diff --git a/README.md b/README.md index cb05394f8..98ea8cecd 100644 --- a/README.md +++ b/README.md @@ -159,12 +159,12 @@ Use Claude Code, Codex, or Gemini CLI directly in the chat panel. The agent conn **Setup (Claude Code):** -1. Install the ACP adapter: `npm i -g @agentclientprotocol/claude-agent-acp` +1. Install the ACP adapter: `npm install -g @agentclientprotocol/claude-agent-acp` 2. Add MCP permission to `~/.claude/settings.json`: ```json { "permissions": { - "allow": ["mcp__open-pencil"] + "allow": ["mcp__open-pencil__*"] } } ``` @@ -177,9 +177,12 @@ Connect Claude Code, Cursor, Windsurf, or any MCP client to inspect, modify, and **Stdio** (Claude Code, Cursor, Windsurf): ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp +claude mcp add --scope user open-pencil -- openpencil-mcp ``` +For other MCP clients: + ```json { "mcpServers": { diff --git a/packages/docs/de/guide/features.md b/packages/docs/de/guide/features.md index 939677efd..446fabc39 100644 --- a/packages/docs/de/guide/features.md +++ b/packages/docs/de/guide/features.md @@ -76,7 +76,7 @@ Siehe [KI-Chat](/programmable/ai-chat) für Einrichtung und Anbieter-Details. Claude Code, Cursor, Windsurf oder jeden MCP-Client verbinden, um `.fig`-Dateien headless zu lesen und zu schreiben. 90+ Werkzeuge. Zwei Transporte: stdio und HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/de/programmable/mcp-server.md b/packages/docs/de/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/de/programmable/mcp-server.md +++ b/packages/docs/de/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) diff --git a/packages/docs/es/guide/features.md b/packages/docs/es/guide/features.md index 22eccbe20..caa106921 100644 --- a/packages/docs/es/guide/features.md +++ b/packages/docs/es/guide/features.md @@ -76,7 +76,7 @@ Ver [Chat IA](/programmable/ai-chat) para configuración y detalles de proveedor Conecta Claude Code, Cursor, Windsurf, o cualquier cliente MCP para leer y escribir archivos `.fig` de forma headless. 90+ herramientas. Dos transportes: stdio y HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/es/programmable/mcp-server.md b/packages/docs/es/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/es/programmable/mcp-server.md +++ b/packages/docs/es/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) diff --git a/packages/docs/fr/guide/features.md b/packages/docs/fr/guide/features.md index 8cdfcc3e5..37bfddd0d 100644 --- a/packages/docs/fr/guide/features.md +++ b/packages/docs/fr/guide/features.md @@ -76,7 +76,7 @@ Voir [Chat IA](/programmable/ai-chat) pour la configuration et les détails des Connectez Claude Code, Cursor, Windsurf ou tout client MCP pour lire et écrire des fichiers `.fig` en mode headless. 90+ outils. Deux transports : stdio et HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/fr/programmable/mcp-server.md b/packages/docs/fr/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/fr/programmable/mcp-server.md +++ b/packages/docs/fr/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) diff --git a/packages/docs/guide/features.md b/packages/docs/guide/features.md index 48456e30c..38d490803 100644 --- a/packages/docs/guide/features.md +++ b/packages/docs/guide/features.md @@ -76,7 +76,7 @@ See [AI Chat](/programmable/ai-chat) for setup and provider details. Connect Claude Code, Cursor, Windsurf, or any MCP client to read and write `.fig` files headlessly. 90+ tools. Two transports: stdio and HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/it/guide/features.md b/packages/docs/it/guide/features.md index 6e1a363d4..206aa7e5f 100644 --- a/packages/docs/it/guide/features.md +++ b/packages/docs/it/guide/features.md @@ -76,7 +76,7 @@ Vedi [Chat AI](/programmable/ai-chat) per configurazione e dettagli sui provider Connetti Claude Code, Cursor, Windsurf o qualsiasi client MCP per leggere e scrivere file `.fig` in modalità headless. 90+ strumenti. Due trasporti: stdio e HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/it/programmable/mcp-server.md b/packages/docs/it/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/it/programmable/mcp-server.md +++ b/packages/docs/it/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) diff --git a/packages/docs/pl/guide/features.md b/packages/docs/pl/guide/features.md index 95f7257cd..b782abd4c 100644 --- a/packages/docs/pl/guide/features.md +++ b/packages/docs/pl/guide/features.md @@ -76,7 +76,7 @@ Zobacz [Czat AI](/programmable/ai-chat) dla konfiguracji i szczegółów dostawc Podłącz Claude Code, Cursor, Windsurf lub dowolnego klienta MCP do odczytu i zapisu plików `.fig` headlessly. 90+ narzędzi. Dwa transporty: stdio i HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/pl/programmable/mcp-server.md b/packages/docs/pl/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/pl/programmable/mcp-server.md +++ b/packages/docs/pl/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) diff --git a/packages/docs/programmable/mcp-server.md b/packages/docs/programmable/mcp-server.md index cbe70bc50..1123c05c7 100644 --- a/packages/docs/programmable/mcp-server.md +++ b/packages/docs/programmable/mcp-server.md @@ -7,12 +7,49 @@ Two transports: **stdio** for MCP clients, **HTTP** for browser extensions and s ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.) -Add to your MCP config (e.g. `~/.claude/settings.json` or `.cursor/mcp.json`): +The stdio server connects to the running OpenPencil app via WebSocket (port 7601). Make sure the desktop app is open with a document loaded. + +### Claude Code + +Install the MCP package and register it with Claude Code: + +```sh +npm install -g @open-pencil/mcp +claude mcp add --scope user open-pencil -- openpencil-mcp +``` + +Check the connection: + +```sh +claude mcp list +``` + +Claude Code asks before using each MCP tool unless you allow the server's tools. To auto-approve OpenPencil tools only, add this to `~/.claude/settings.json`: + +```json +{ + "permissions": { + "allow": ["mcp__open-pencil__*"] + } +} +``` + +This is narrower than `--permission-mode bypassPermissions`, which skips prompts for every tool. You can also approve tools interactively from Claude's prompt by choosing “Yes, and don't ask again”. + +Example prompt: + +```text +Use the open-pencil MCP server to inspect the current page and create a small hero section on the canvas. +``` + +### Other MCP clients + +Add to your MCP config (for example `.cursor/mcp.json`): ```json { @@ -24,8 +61,6 @@ Add to your MCP config (e.g. `~/.claude/settings.json` or `.cursor/mcp.json`): } ``` -The stdio server connects to the running OpenPencil app via WebSocket (port 7601). Make sure the app is open with a document loaded. - Or run from source without installing: ::: code-group diff --git a/packages/docs/public/screenshot.png b/packages/docs/public/screenshot.png index ccd14bcb4..dcbe2555c 100644 Binary files a/packages/docs/public/screenshot.png and b/packages/docs/public/screenshot.png differ diff --git a/packages/docs/ru/guide/features.md b/packages/docs/ru/guide/features.md index 9c3a407c8..3c06e1d69 100644 --- a/packages/docs/ru/guide/features.md +++ b/packages/docs/ru/guide/features.md @@ -76,7 +76,7 @@ CLI: `open-pencil export design.fig -f jsx --style tailwind` Подключайте Claude Code, Cursor, Windsurf или любой MCP-клиент для чтения и записи файлов `.fig` в headless-режиме. 90+ инструментов. Два транспорта: stdio и HTTP. ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ```json diff --git a/packages/docs/ru/programmable/mcp-server.md b/packages/docs/ru/programmable/mcp-server.md index d6d4fad71..8c0e0bdd8 100644 --- a/packages/docs/ru/programmable/mcp-server.md +++ b/packages/docs/ru/programmable/mcp-server.md @@ -7,7 +7,7 @@ Two transports: **stdio** for MCP clients, **HTTP** for everything else. ## Install ```sh -bun add -g @open-pencil/mcp +npm install -g @open-pencil/mcp ``` ## Stdio (Claude Code, Cursor, etc.)