Tidio

公式

MCPを介してTidioをウェブサイトに接続します。プログラミング環境を離れることなくウィジェットを埋め込めます。

tid.io で表示このMCPを試すスポンサー

Tidio MCPで何ができますか？

Tidioをサイトに接続 — tidio_connectを使用してTidioをウェブサイトのURLに接続するよう依頼します。これにより、OAuthログイン用のブラウザが開き、公開キーが自動的に取得されます。
接続状態の確認 — Tidioが接続されているかどうかを確認し、現在の埋め込みコードを取得するために使用します。
埋め込みコードの生成 — 公開キーを指定して呼び出すと、すぐに使用できるJavaScriptが生成されます。必要に応じてasyncまたはsyncの読み込みを選択できます。
Tidioの切断 — 実行すると、~/.tidio-mcp/credentials.jsonに保存されているローカルの認証情報がクリアされます。

ドキュメント

Tidio MCP コネクタ

AIアシスタントを Tidio ライブチャットに接続する MCP (Model Context Protocol) サーバー - 自動セットアップ付き

機能

自動セットアップ: 1つのコマンドでTidioに接続 - 手動でのキーコピーは不要
OAuth認証: ブラウザを開いて安全なTidioログインを行い、公開鍵を自動取得
認証情報の永続化: 認証情報はローカルに保存され、今後のセッションで使用可能
埋め込みコード生成: 任意のウェブサイト用のすぐ使えるJavaScriptコードを取得

インストール

npm install tidio-mcp-connector

または、ローカルでクローンしてビルド:

git clone https://github.com/your-username/tidio-mcp-connector.git
cd tidio-mcp-connector
npm install
npm run build

使用方法

Claude Desktop の場合

Claude Desktop の設定 (~/Library/Application Support/Claude/claude_desktop_config.json) に追加:

{
  "mcpServers": {
    "tidio": {
      "command": "npx",
      "args": ["tidio-mcp-connector"]
    }
  }
}

Lovable の場合

このMCPコネクタは Lovable および類似のAI駆動開発プラットフォームで動作します。カスタムMCPサーバーとして追加してください。

MCP Inspector を使用する場合 (テスト)

npx @modelcontextprotocol/inspector npx tidio-mcp-connector

利用可能なツール

tidio_connect (推奨)

Tidioに接続し、公開鍵を自動的に取得します。

仕組み:

ブラウザでTidioのログインページを開きます
Tidioアカウントで認証します
公開鍵と埋め込みコードを自動的に返します

パラメータ:

site_url (必須): Tidioを埋め込むウェブサイトのURL

例:

Connect Tidio to https://mywebsite.com

tidio_status

接続ステータスを確認し、埋め込みコードを取得します。

パラメータ: なし

tidio_disconnect

保存された認証情報をクリアします。

パラメータ: なし

generate_tidio_embed

特定の公開鍵用の埋め込みコードを生成します (すでに公開鍵をお持ちの場合)。

パラメータ:

public_key (必須): あなたのTidio公開鍵
loading_mode (任意): "async" (デフォルト) または "sync"

仕組み

ユーザーが tidio_connect を呼び出す ウェブサイトのURLを指定して
ブラウザが開く Tidioの認証ページへ
ユーザーがログイン Tidioアカウントに
コールバック受信 - MCPサーバーがリフレッシュトークンを取得
API呼び出し - トークンをアクセストークンと交換し、公開鍵を取得
認証情報を保存 ~/.tidio-mcp/credentials.json に
埋め込みコードを返す - ウェブサイトに追加する準備完了

認証情報の保存

認証情報はローカルの ~/.tidio-mcp/credentials.json に保存されます:

{
  "public_key": "abc123...",
  "access_token": "...",
  "refresh_token": "...",
  "site_url": "https://example.com",
  "created_at": "2024-01-01T00:00:00.000Z",
  "updated_at": "2024-01-01T00:00:00.000Z"
}

埋め込みコードの出力

コネクタは最適化された非同期読み込みコードを生成します:

<script type="text/javascript">
document.tidioChatCode = "YOUR_PUBLIC_KEY";
(function() {
  function asyncLoad() {
    var tidioScript = document.createElement("script");
    tidioScript.type = "text/javascript";
    tidioScript.async = true;
    tidioScript.src = "//code.tidio.co/YOUR_PUBLIC_KEY.js";
    document.body.appendChild(tidioScript);
  }
  if (window.attachEvent) {
    window.attachEvent("onload", asyncLoad);
  } else {
    window.addEventListener("load", asyncLoad, false);
  }
})();
</script>

開発

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run built version
npm start