Tidio

官方

透過 MCP 將 Tidio 與您的網站連接。無需離開程式開發環境即可嵌入小工具。

你可以用 Tidio MCP 做什麼?

  • 將 Tidio 連接到網站 — 透過 tidio_connect 要求將 Tidio 連接到網站 URL,這會開啟瀏覽器進行 OAuth 登入,並自動取得您的公開金鑰。
  • 檢查連線狀態 — 用於確認 Tidio 是否已連線,並取得目前的嵌入程式碼。
  • 產生嵌入程式碼 — 使用公開金鑰呼叫,以產生可直接使用的 JavaScript,可選擇 async 或 sync 載入方式。
  • 中斷 Tidio 連線 — 執行以清除儲存在 ~/.tidio-mcp/credentials.json 中的本機憑證。

文件

Tidio MCP 連接器

一個 MCP(模型上下文協定)伺服器,將 AI 助理連線到 Tidio 即時聊天 - 具備自動設定功能

功能

  • 自動設定:使用一個指令連線到 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 並自動取得您的公開金鑰。

運作方式:

  1. 開啟您的瀏覽器至 Tidio 的登入頁面
  2. 您使用您的 Tidio 帳戶進行驗證
  3. 自動傳回您的公開金鑰和嵌入程式碼

參數:

  • site_url(必填):將嵌入 Tidio 的網站 URL

範例:

Connect Tidio to https://mywebsite.com

tidio_status

檢查您的連線狀態並取得您的嵌入程式碼。

參數: 無

tidio_disconnect

清除已儲存的憑證。

參數: 無

generate_tidio_embed

為特定的公開金鑰產生嵌入程式碼(如果您已經有金鑰)。

參數:

  • public_key(必填):您的 Tidio 公開金鑰
  • loading_mode(選用):"async"(預設)或 "sync"

運作方式

  1. 使用者呼叫 tidio_connect 並提供其網站 URL
  2. 瀏覽器開啟至 Tidio 的驗證頁面
  3. 使用者登入其 Tidio 帳戶
  4. 收到回呼 - MCP 伺服器取得重新整理權杖
  5. 進行 API 呼叫 - 將權杖交換為存取權杖,然後取得公開金鑰
  6. 憑證儲存至 ~/.tidio-mcp/credentials.json
  7. 傳回嵌入程式碼 - 即可新增至網站

憑證儲存

憑證會儲存在本機的 ~/.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