swebsy

@swebsy/mcp — コーディングエージェントをSwebsyに接続

すでに利用料金を支払っているコーディングエージェントで、本物のウェブサイトを構築・編集できます。トークンごとのAI利用料はかかりません。

@swebsy/mcpは、Claude Code、Codex、Cursor、Windsurf、Cline、GitHub Copilot、またはModel Context Protocolに対応するあらゆるエージェントから、開いているSwebsy Studioのタブを操作できるMCPサーバーです。エージェントはテンプレートを検索し、サイトを作成して開き、プロジェクト名を変更し、セクションを追加し、コンテンツを編集し、ページを切り替え、あらゆるサイト設定（SEO、ファビコン、フォント、アナリティクス、robots.txt、デプロイ先）を設定し、スクリーンショットを撮影して、完成したサイトをエクスポートできます。すべてローカルの127.0.0.1 WebSocketリレー経由で行われます。データが当社のサーバーを経由することはなく、ブリッジを通過する前に、Studioがシークレット（APIキー、デプロイトークン、チャット履歴）を伏せ字にします。シークレット以外のコンテンツを受け取るサービスについては、利用するコーディングエージェントのサービスとプライバシーポリシーが適用されます。

ChatGPTやClaude（アプリ）をお使いですか？ このパッケージは必要ありません。ChatGPTではカスタムアプリとして、Claudeではカスタムコネクターとしてhttps://mcp.swebsy.com/mcpを追加し、Swebsyにサインインして「許可」をクリックしてください。 セットアップ手順。このパッケージは、お使いのマシン上で動作するコーディングエージェント向けです。

Swebsyとは？

Swebsyはビジュアルウェブサイトビルダーです。真の所有権モデルを採用しており、ビジュアルに構築して、実際のファイル（HTML/CSS/JS）をエクスポートし、好きな場所で公開できます。ロックインも、独自ホスティングの必須要件もありません。無料プランは完全にローカルで動作し、アカウントも不要です。

標準搭載のAIパネルではなく、MCPを使う理由は？

多くの「AIウェブサイトビルダー」はチャットパネルを追加し、すでに契約しているモデルの料金に加えて、トークンごとの料金を請求します。Swebsyは逆のアプローチを取り、ご自身のエージェントが操作できるツールとしてエディターを公開します。

• トークンごとのAPI課金はありません。 モデル利用料金にSwebsyは関与しません。すでに利用料金を支払っているClaude、Cursor、Codex、Copilotのプランを使えます。
• お使いのマシン上で動作します。 エージェントはローカルの127.0.0.1ブリッジ経由で、開いているStudioタブと通信します。プロンプトやコンテンツが課金のために外部へ送信されることはありません。
• お好きなエージェントを利用できます。 ご自身のモデル、カスタム指示、ワークフローを使えます。機能を制限したラッパーではありません。MCP対応のエージェントならどれでも動作します。
• 出力はご自身のものです。 エージェントが構築したものはすべて、どこでもホストできる、実際のポータブルなファイルとしてエクスポートされます。

セットアップ

1 つのコマンドで、見つかったすべての対応エージェント（Claude Code、 Codex、Cursor、Windsurf、VS Code、Cline）に Swebsy を登録します。

npx -y @swebsy/mcp setup

既存の swebsy エントリーは変更せず、解析できない設定ファイルを書き換えることもありません。各エージェントの結果を報告します。手動で登録することもできます。

Claude Code

claude mcp add swebsy -- npx -y @swebsy/mcp

Codex

codex mcp add swebsy -- npx -y @swebsy/mcp

Cursor — ~/.cursor/mcp.json（またはプロジェクトの .cursor/mcp.json）に追加します。

{
  "mcpServers": {
    "swebsy": { "command": "npx", "args": ["-y", "@swebsy/mcp"] }
  }
}

GitHub Copilot（VS Code）

code --add-mcp '{"name":"swebsy","command":"npx","args":["-y","@swebsy/mcp"]}'

Windsurf — 同じ JSON ブロックを ~/.codeium/windsurf/mcp_config.json に追加します。

Cline — 同じ JSON ブロックを cline_mcp_settings.json に追加するか、拡張機能の MCP Servers → Configure ボタンを使うと、そのファイルが開きます。

• macOS ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Linux ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Windows %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

Cline CLI（npm i -g cline）は拡張機能とは別にインストールされ、独自の設定ファイル ~/.cline/data/settings/cline_mcp_settings.json と、ネストされた transport ブロックを使います。

{
  "mcpServers": {
    "swebsy": {
      "transport": { "type": "stdio", "command": "npx", "args": ["-y", "@swebsy/mcp"] }
    }
  }
}

または、Cline CLI に設定を書き込ませます。cline mcp add swebsy --yes -- npx -y @swebsy/mcp

ペアリング

1. npx -y @swebsy/mcp setup を実行します。
2. エージェントを再起動します。
3. 「Swebsy でランディングページを作って」と依頼します。最初のリクエストで Studio が開き、接続されます。

ブラウザーごとに一度だけ接続します。Studio タブが接続されていない場合、次のツール呼び出しで Studio が開き、自動的に再接続されます（最大 20 秒間待機します）。セッションは ~/.swebsy/agent-<port>.session に保存されるため、ブリッジを再起動しても保持されます。

Claude Code には、接続してサイトを開くまでエージェントを案内する /swebsy:swebsy (MCP) プロンプトも表示されます。他のエージェントでも、それぞれ独自の方法で MCP プロンプトが表示される場合があります。

手動でペアリングする場合（ブラウザーが開かなかった場合、Swebsy が別のブラウザーで動作している場合、または SWEBSY_NO_OPEN=1 が設定されている場合）：

1. エージェントに swebsy_start_pairing ツールを実行するよう依頼します。既定のブラウザーでペアリングリンクが自動的に開き、リンク、生コード、リレーポートも返されます。
2. Swebsy は自動的に接続し、コードの使用後にアドレスバーからコードを削除します。（自動で開かず、リンクだけを取得するには SWEBSY_NO_OPEN=1 を設定します。）
3. ブラウザーが開かなかった場合、または Swebsy が別のブラウザーで動作している場合は、返されたリンクをそのブラウザーで開くか、Global settings → Coding agents → Didn't connect? Pair by hand にある代替の入力欄を使います。生コードを貼り付け、SWEBSY_AGENT_PORT を変更していない限りポートは 37373 のままにして、Connect をクリックします。
4. 通常どおりエージェントにプロンプトを入力すると、swebsy_* ツールを使ってタブを操作します。

Studio タブは開いたままにしてください。ブラウザーがタブをスリープ状態にすると、タブをクリックするまでツールは tab_unresponsive を返します。タブをピン留めすると解決する場合があります。または、Chrome の Settings → Performance →「Always keep these sites active」で Studio を追加してください。

詳しいガイド：https://docs.swebsy.com/settings/ai-coding-agent/

複数のエージェント

複数のコーディングエージェントで、1 つのペアリング済み Studio タブを共有できます。各エージェントに @swebsy/mcp を登録し、すべてのサーバーで同じ SWEBSY_AGENT_PORT（既定値は 37373）を使用します。最初の MCP プロセスがローカルブローカーを起動し、後続のプロセスは自動的に参加するため、Studio のペアリングは 1 回で済みます。

Studio には、接続中のエージェント一覧とアクティビティが表示されます。ブローカーはエージェント間のコマンドを順番に処理し、エディターが一度に 1 つのコマンドを処理するようにします。また、各結果、スクリーンショット、エクスポートをリクエストしたエージェントに返します。1 つの Studio タブは一度に 1 つのブローカーにしかペアリングできません。別のタブをペアリングすると、以前のタブのペアリングは解除されます。

エージェントにできること

ペアリングすると、エージェントは Home または Studio から作業できます。インストール済みのテンプレートを更新して一覧表示したり、標準の空白サイトを作成したり、テンプレートを変更せずにインポートしたり、保存済みサイトのメタデータを一覧表示したり、ID でサイトを開いたり、内部の Swebsy 名を変更したりできます。同じ名前を複数回使用できます。ID が正規の識別子です。

swebsy_create_site または swebsy_open_site の実行後、期待する siteId が表示され、editorReady が true になるまで swebsy_status をポーリングしてください。その後、エージェントはページツリーの読み取り、セクションの追加と編集、ページの作成とリンク、ブロックの挿入、再利用可能なシンボルの管理（インスタンスごとに異なるコンテンツで繰り返し使用しながら、スタイルを同期した状態に保つことも含みます）、任意のビューポートでのスクリーンショットの撮影、プロジェクトのエクスポートを行えます。

swebsy_list_sites が返すのはメタデータのみです。ページコンテンツ、サムネイル、アセット、リビジョン、設定は返しません。エージェントによる作成・名前変更の分析データには、ソース、テンプレート、サイトの ID のみが含まれ、内部名やサイトコンテンツは含まれません。

設定

環境変数	デフォルト	用途
SWEBSY_AGENT_PORT	37373	ローカルリレーが待ち受けるポート
SWEBSY_AGENT_DIR	ワークスペースの .swebsy-agent	スクリーンショット／エクスポートの保存先
SWEBSY_APP_URL	https://studio.swebsy.com	swebsy_start_pairing リンクの Studio のオリジン（ローカル／セルフホスト環境では設定してください）
SWEBSY_NO_OPEN	(未設定)	設定すると、ブラウザーでペアリングリンクが自動的に開かなくなります

ソースからビルドする

このパッケージを使うには公開済みのパッケージだけで十分です。ソースは、内容の確認、監査、改変に利用できます。

git clone https://github.com/swebsy/MCP.git
cd MCP
npm install
npm test
npm run build      # -> dist/server.js

npm の代わりにローカルビルドをエージェントに指定してください。

claude mcp add swebsy -- node /absolute/path/to/MCP/dist/server.js

このリポジトリは生成されたミラーです。リリースのたびに、メインリポジトリの mcp/ ディレクトリからスナップショットが作成されます。ここにあるすべてのファイルは次回の同期時に上書きされるため、プルリクエストを送ってもマージされずに消えてしまいます。代わりに issue を作成してください。変更は上流に反映します。

リンク

• ウェブサイト：https://swebsy.com
• セットアップガイド：https://docs.swebsy.com/settings/ai-coding-agent/
• npm：https://www.npmjs.com/package/@swebsy/mcp
• ソース：https://github.com/swebsy/MCP

ライセンス

MIT