MCPサーバ - Tauriのソースを表示

== 概要 ==
Tauri MCP Server (@hypothesi/mcp-server-tauri) は、Model Context Protocol (MCP) を通じてAIアシスタント (Claude、Cursor、Windsurf等) に<br>
Tauri v2アプリケーションの構築、テスト、デバッグ機能を提供するMCPサーバである。<br>
実行中のアプリからスクリーンショット、DOM状態、コンソールログを取得し、AIが豊富なコンテキストを得られる。<br>
<br>
対応クライアントは、Claude Desktop、Claude Code、Cursor、Windsurf、VS Code、Cline等である。<br>
対応OSは、Windows、MacOS、Linux、Android、iOSである。<br>
<br>
ライセンスはMITであり、最新バージョンはv0.9.0である。<br>
<br>
このサーバのリポジトリはモノレポ構成となっており、以下に示すパッケージで構成される。<br>
* @hypothesi/tauri-mcp-server
*: MCPサーバのTypeScript実装
* @hypothesi/tauri-plugin-mcp-bridge
*: Tauriプラグイン (RustおよびJavaScriptバインディング)
* test-app
*: テスト用Tauriアプリケーション
<br>
主な機能は以下の通りである。<br>
* UI自動化 (スクリーンショット、クリック、テキスト入力、スクロール、要素検出)
* IPC監視 (Tauri IPC呼び出しのリアルタイム追跡)
* モバイル対応 (iOSシミュレータとAndroidエミュレータの検出)
* ログ管理 (コンソール、Android logcat、iOS、システムログのストリーミング)
<br><br>

== Tauri MCP Serverの機能 ==
Tauri MCP Serverは、セットアップ、UI自動化、IPC・バックエンド連携、ログ・診断、デバイス管理、ウインドウ管理の各カテゴリで合計17個のツールを提供する。<br>
<br>
==== セットアップツール ====
下表に、MCPBridgeプラグインの設定・更新に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ セットアップツールの一覧
! ツール !! 説明
|-
| tauri_get_setup_instructions || MCPBridgeプラグインの設定・更新手順を取得する。
|}
</center>
<br>
==== UI自動化ツール ====
下表に、アプリケーションのUI操作・検証に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ UI自動化ツールの一覧
! ツール !! 説明
|-
| tauri_driver_session || Tauri WebDriverセッションの管理 (start/stop/status) を行う
|-
| tauri_webview_screenshot || 実行中のアプリケーションのスクリーンショットを撮影する (PNG/JPEG)
|-
| tauri_webview_find_element || CSSセレクタ、XPath、テキストマッチングでDOM要素を検出する
|-
| tauri_webview_interact || クリック、ダブルクリック、ロングプレス、スクロール、スワイプ、フォーカスなどのUI操作を実行する
|-
| tauri_webview_keyboard || テキスト入力、キー押下などのキーボード操作を実行する
|-
| tauri_webview_wait_for || 指定された要素やテキスト、IPCイベントの出現を待機する
|-
| tauri_webview_get_styles || 要素の計算済みCSSスタイルを取得する
|-
| tauri_webview_execute_js || WebviewコンテキストでJavaScriptコードを実行する
|}
</center>
<br>
==== IPC・バックエンド連携ツール ====
下表に、Tauri IPCコマンドおよびバックエンドとの連携に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ IPC・バックエンド連携ツールの一覧
! ツール !! 説明
|-
| tauri_ipc_execute_command || Tauri IPCコマンドを実行し、Rustバックエンド関数を呼び出す。
|-
| tauri_ipc_monitor || IPC監視を開始・停止し、リアルタイムでIPC呼び出しを追跡する。
|-
| tauri_ipc_get_captured || キャプチャしたIPCコマンドとイベントデータを取得する。
|-
| tauri_ipc_emit_event || カスタムTauriイベントを発行する。
|-
| tauri_ipc_get_backend_state || アプリメタデータ、Tauriバージョン、環境データを取得する。
|}
</center>
<br>
==== ログ・診断ツール ====
下表に、アプリケーションのログ取得・診断に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ ログ・診断ツールの一覧
! ツール !! 説明
|-
| tauri_read_logs || コンソール、Android logcat、iOS、システムログを取得する。
|}
</center>
<br>
==== デバイス管理ツール ====
下表に、接続デバイスの管理に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ デバイス管理ツールの一覧
! ツール !! 説明
|-
| tauri_list_devices || 接続中のAndroidエミュレータとiOSシミュレータを一覧表示する。
|}
</center>
<br>
==== ウインドウ管理ツール ====
下表に、アプリケーションウインドウの管理に関するツールを示す。<br>
<br>
<center>
{| class="wikitable"
|+ ウインドウ管理ツールの一覧
! ツール !! 説明
|-
| tauri_manage_window || ウインドウ情報の取得、リサイズ、一覧表示を行う。
|}
</center>
<br><br>

== 動作要件 ==
==== 共通の要件 ====
OS問わず共通して必要な要件を以下に示す。<br>
<br>
* Node.js 20以上
*: <code>npx</code> コマンドを使用して、Tauri MCP Serverを実行するために必要
* npm
*: パッケージ管理ツール
* RustとCargo
*: Tauriアプリケーションのビルドおよびプラグインのコンパイルに必要
* Tauri CLI
*: <code>npm install -g @tauri-apps/cli@next</code> でインストールする。
<br>
==== Windowsの要件 ====
* Windows 10 / 11
* Microsoft Visual Studio C++ Build Tools
*: Rustのコンパイルに必要なC++ビルドツール
* WebView2
*: Windows 10では手動インストールが必要
<br>
==== MacOSの要件 ====
* MacOS 10.15 (Catalina) 以降
* Xcode Command Line Tools
*: <code>xcode-select --install</code> でインストールする
* Intel / Apple Silicon 両対応
<br>
==== Linuxの要件 ====
* 主要ディストリビューション (RHEL、SUSE等) に対応
* webkit2gtk、libappindicator等の開発ライブラリ
*: 各ディストリビューションのパッケージマネージャでインストールする。
<br><br>

== インストール ==
==== MCPサーバのインストール ====
<code>npx</code> コマンドを使用してTauri MCP Serverをインストールする。<br>
<br>
 npx -y install-mcp @hypothesi/tauri-mcp-server --client claude-code
<br>
<code>--client</code> オプションには、使用するMCPクライアントを指定する。<br>
指定可能な値は、<code>claude-code</code>、<code>cursor</code>、<code>windsurf</code>、<code>vscode</code>、<code>cline</code> 等である。<br>
<br>
==== Tauriプラグインのインストール ====
Cargoを使用してTauriプラグインをインストールする場合は、以下のコマンドを実行する。<br>
<br>
 cargo add tauri-plugin-mcp-bridge
<br>
または、<u>Cargo.tomlファイル</u> に以下の内容を追記する。<br>
<br>
 <syntaxhighlight lang="toml">
 [dependencies]
 tauri-plugin-mcp-bridge = "0.2"
 </syntaxhighlight>
<br>
TypeScriptバインディングが必要な場合は、以下のコマンドでオプションのパッケージを追加インストールする。<br>
<br>
 npm install --save-exact @hypothesi/tauri-plugin-mcp-bridge
<br><br>

== 設定 ==
==== 設定ファイルの場所 ====
各MCPクライアントの設定ファイルの場所は以下の通りである。<br>
<br>
Claude Desktopの設定ファイルを以下に示す。<br>
* Linux
*: <u>~/.config/Claude/claude_desktop_config.json</u>
* MacOS
*: <u>~/Library/Application Support/Claude/claude_desktop_config.json</u>
* Windows
*: <u>%APPDATA%\Claude\claude_desktop_config.json</u>
<br>
Claude Codeの設定ファイルを以下に示す。<br>
* Linux
*: <u>~/.config/claude/settings.json</u>
* MacOS
*: <u>~/Library/Application Support/claude/settings.json</u>
* Windows
*: <u>%APPDATA%\claude\settings.json</u>
<br>
OpenCodeの設定ファイルを以下に示す。<br>
* <u>$HOME/.opencode.json</u>
* <u>$XDG_CONFIG_HOME/opencode/.opencode.json</u>
* <u>./.opencode.json</u> (ローカルディレクトリ)
<br>
==== Claude Desktopでの設定 ====
Claude Desktopの設定ファイルに以下に示す内容を追記する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "tauri-mcp": {
       "command": "npx",
       "args": ["-y", "@hypothesi/tauri-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
設定ファイルを保存した後、Claude Desktopを再起動して設定を反映する。<br>
<br>
==== Claude Codeでの設定 ====
Claude Codeでは、<code>claude mcp add</code> コマンドを使用してMCPサーバを追加できる。<br>
<br>
 claude mcp add tauri-mcp npx -y @hypothesi/tauri-mcp-server
<br>
または、設定ファイルに以下に示す内容を記述する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "tauri-mcp": {
       "command": "npx",
       "args": ["-y", "@hypothesi/tauri-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
==== OpenCodeでの設定 ====
<code>.opencode.json</code> に以下に示す内容を記述する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "tauri-mcp": {
       "type": "stdio",
       "command": "npx",
       "args": ["-y", "@hypothesi/tauri-mcp-server"],
       "env": []
     }
   }
 }
 </syntaxhighlight>
<br>
==== Tauriプラグインの設定 ====
<code>src-tauri/src/main.rsファイル</code> にプラグインを登録する。<br>
<br>
基本的な登録方法を以下に示す。<br>
<br>
 <syntaxhighlight lang="rust">
 #[cfg(debug_assertions)]
 let builder = builder.plugin(tauri_plugin_mcp_bridge::init());
 </syntaxhighlight>
<br>
バインドアドレスをローカルホストのみに限定するカスタム設定を以下に示す。<br>
<br>
 <syntaxhighlight lang="rust">
 use tauri_plugin_mcp_bridge::Builder;
 
 #[cfg(debug_assertions)]
 let builder = builder
    .plugin(
       Builder::new()
          .bind_address("127.0.0.1")
          .build()
    );
 </syntaxhighlight>
<br>
WebSocketサーバーの動作仕様を以下に示す。<br>
* デフォルトポート: 9223
*: 使用中の場合は9223〜9322の範囲内で次の利用可能なポートを自動選択する
* デフォルトバインドアドレス: 0.0.0.0 (すべてのインターフェース)
<br>
セキュリティに関する注意事項を以下に示す。<br>
* <code>#[cfg(debug_assertions)]</code> でガードされており、デバッグビルドでのみ有効となる。
* 本番環境では、バインドアドレスを <u>127.0.0.1</u> に明示的に設定すること。
* リモートデバイス開発が必要な場合のみ、ネットワークアクセスを許可すること。
<br><br>

== 使用方法 ==
==== スラッシュコマンド ====
Tauri MCP Serverは、下表に示すスラッシュコマンドを提供する。<br>
<br>
<center>
{| class="wikitable"
|+ スラッシュコマンドの一覧
! コマンド !! 機能
|-
| <code>/setup</code> || MCP Bridgeプラグインの設定・更新を行う。<br>プロジェクト構造を検査して必要な変更を自動提示する。
|-
| <code>/fix-webview-errors</code> || JavaScriptエラーをコンソールから検出し、エラー内容を解析して修正案を提示する。
|-
| <code>/select</code> || ビジュアル要素ピッカーで要素をマウス選択し、要素メタデータ (ID、クラス、セレクタ等) を取得する。
|}
</center>
<br>
==== UIテストのワークフロー ====
UIテストを実行する際の基本的なワークフローを以下に示す。<br>
<br>
# <u>tauri_webview_screenshot</u> でスクリーンショットを取得する。
# <u>tauri_webview_find_element</u> でテスト対象要素を検出する。
# <u>tauri_webview_interact</u> でクリック操作を実行する。
# 結果を <u>tauri_webview_screenshot</u> で検証する。
<br>
==== IPC通信の検証 ====
IPC通信の動作を検証する際のワークフローを以下に示す。<br>
<br>
# <code>tauri_ipc_monitor</code> を実行してIPC監視を開始する。
# UI操作を実行してバックエンド呼び出しをトリガーする。
# <code>tauri_ipc_get_captured</code> でキャプチャしたIPCデータを確認する。
# 期待通りのコマンド・パラメータが送信されたことを検証する。
<br><br>

== その他 ==
==== 推奨される事柄 ====
Tauri MCP Serverを効果的に活用するため、推奨される事柄を以下に示す。<br>
<br>
* IPC監視はパフォーマンスに影響するため、必要時のみ有効化する。
*: <u>tauri_ipc_monitor</u> の使用は、検証が完了したら速やかに停止すること。
* UI自動化ツール (スクリーンショット、クリック等) は、テスト・デバッグ用途に最適化されている。
* 複数デバイス開発時は <code>tauri_list_devices</code> で事前に接続状態を確認する。
* ポート競合時は自動的に9223〜9322番の範囲内で次の利用可能ポートを使用するため、手動での変更は不要
<br>
==== セキュリティに関する注意事項 ====
Tauri MCP Serverのセキュリティに関する注意事項を以下に示す。<br>
<br>
* MCPBridgeプラグインは、デフォルトで <code>#[cfg(debug_assertions)]</code> により、デバッグビルドのみに制限されている。
*: 本番ビルドにMCPBridgeプラグインが含まれないことを確認すること。
* 本番環境ではWebSocketサーバーのバインドアドレスを <u>127.0.0.1</u> に限定すること。
* リモートデバイス開発時のみ、<u>0.0.0.0</u> バインドを許可すること。
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板,Tauri,MCP,Model Context Protocol,tauri-mcp-server,Claude,AI,Rust,TypeScript,WebDriver,IPC,Android,iOS,Windows,MacOS
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:設定]]