46a-mcp

46a MCP サーバー

MCP を介して、ユーザーのブラウザーで開いている 46a プロジェクトをリアルタイムで操作できます。MCP クライアントから、アプリケーションと DOM の状態をリアルタイムで読み取り、エディター操作を実行できます。

インストール

HTTP として（mcpServers の外部で設定）

MCP コネクターの使い方については、ヒントを得るために claude に「claude: show me where to configure mcpServers?」と尋ねてください。

1. サーバー URL をカスタムコネクターとして追加します（claude.ai：Settings → Connectors → Add custom connector、Claude Code：claude mcp add --transport http 46a-mcp https://46a.co/mcp）。

OAuth を使用するエントリーの設定

OAuth を使用するローカルの claude MCP 設定（デフォルト）

{
  "mcpServers": {
    "46a-mcp-http-oauth": {
      "type": "streamable-http",
      "url": "https://46a.co/mcp"
    }
  }
}

ベーシック認証を使用するエントリーの設定

OAuth の代わりにベーシック認証を使用するローカルの claude MCP 設定です。

{
  "mcpServers": {
    "46a-mcp-http-basic-auth": {
      "type": "streamable-http",
      "url": "https://46a.co/mcp",
      "headers": {
        "Authorization": "Basic <user:pass>"
      }
    }
  }
}

stdio プロセスの設定（おそらく不要です）

{
  "mcpServers": {
    "46a-mcp-stdio": {
      "command": "node",
      "args": ["src/stdio.js"],
      "cwd": "/Users/jroy/src/46a/mcp",
      "env": {
        "REMOTE_URL": "https://46a.co/mcp",
        "EMAIL_OR_USERNAME": "<user>",
        "PASSWORD": "<pass>"
      }
    }
  }
}

実行（またはこれ）

node src/http.js

クライアントの接続

A. カスタムコネクターを設定する、または B. ベーシック認証または OAuth（デフォルト）を使用して、上記のエントリーを .mcp.json またはその他の Claude 設定場所に追加する、または C. stdio ベースのプロセス用にローカルエントリーを設定する（上記を参照）

ワークフロー

1. listConnections → ライブの connectionId を選択します。
2. その connectionId に対して callTools や inject を実行します。

connectionId は一時的なもので、ページを再読み込みすると無効になります。不明な場合は再度一覧を取得してください。

ツール

クライアントは tools/list を介してツールを検出します。

• listConnections — ライブのブラウザー接続を一覧表示します。emailOrUsername によるフィルターは任意です。 connectionId -> { user, project } を返します。
• callTools — 1 つの接続に対して 46a のツール呼び出しを実行します： { connectionId, request: { v: 't', calls: [...] } }。
• inject — 接続のブラウザーセッションでコードを実行します： { connectionId, request: { v: 'j', code } }。code は Promise を評価する単一の式である必要があります。
• hello_world — 接続テスト用ツールです。

callTools の呼び出しインターフェース

request.calls

• add_object — 単一のオブジェクト（Circle、Square、_basic.text、_basic.plainText、 _basic.html、SVG）を追加します。
• add_objects — add_object の一括実行です。一度に多くのオブジェクトを作成する場合に推奨されます。
• make_object_from_html — 生の HTML スニペットからオブジェクトを追加します。
• getSelectorData — アプリケーションの状態（ページ、ワークスペース、プロジェクト、ユーザー、オブジェクト、ログ）を読み取ります。
• doAction — エディター操作を実行します（元に戻す／やり直し、エディターを開く、オブジェクトを選択する、ズームする、ページを変更する、オブジェクトのフィールドを更新する、プロジェクト／ページのライフサイクル管理など）。
• createImage — DALL-E を介して画像を生成し、プロジェクトに追加します。
• delegateAI — 別のアシスタントにタスクを委任します。
• uiInteraction — チャットスレッドまたは UI に UI ウィジェット／インタラクションを作成します。