Tidio

resmi

Hubungkan Tidio dengan situs web Anda melalui MCP. Sematkan widget tanpa keluar dari lingkungan pemrograman Anda.

Lihat di tid.ioCoba MCP iniDisponsori

Apa yang bisa Anda lakukan dengan Tidio MCP?

  • Hubungkan Tidio ke situs — Minta untuk menghubungkan Tidio ke URL situs web melalui tidio_connect, yang membuka browser untuk login OAuth dan secara otomatis mengambil kunci publik Anda.
  • Periksa status koneksi — Gunakan untuk memverifikasi apakah Tidio sudah terhubung dan mengambil kode semat Anda saat ini.
  • Buat kode semat — Panggil dengan kunci publik untuk menghasilkan JavaScript yang siap digunakan, dengan opsi memilih pemuatan async atau sync.
  • Putuskan koneksi Tidio — Jalankan untuk menghapus kredensial yang tersimpan secara lokal dari ~/.tidio-mcp/credentials.json.

Dokumentasi

Konektor MCP Tidio

Server MCP (Model Context Protocol) yang menghubungkan asisten AI ke live chat Tidio - dengan pengaturan otomatis

Fitur

  • Pengaturan Otomatis: Terhubung ke Tidio dengan satu perintah - tanpa perlu menyalin kunci secara manual
  • Autentikasi OAuth: Membuka browser untuk login Tidio yang aman, mengambil kunci publik Anda secara otomatis
  • Penyimpanan Kredensial: Kredensial disimpan secara lokal untuk sesi mendatang
  • Pembuatan Kode Semat: Dapatkan kode JavaScript siap pakai untuk situs web apa pun

Instalasi

npm install tidio-mcp-connector

Atau klon dan bangun secara lokal:

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

Penggunaan

Dengan Claude Desktop

Tambahkan ke konfigurasi Claude Desktop Anda (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Dengan Lovable

Konektor MCP ini berfungsi dengan Lovable dan platform pengembangan bertenaga AI serupa. Tambahkan sebagai server MCP kustom.

Dengan MCP Inspector (Pengujian)

npx @modelcontextprotocol/inspector npx tidio-mcp-connector

Alat yang Tersedia

tidio_connect (Disarankan)

Terhubung ke Tidio dan dapatkan kunci publik Anda secara otomatis.

Cara kerjanya:

  1. Membuka browser Anda ke halaman login Tidio
  2. Anda melakukan autentikasi dengan akun Tidio Anda
  3. Mengembalikan kunci publik dan kode semat Anda secara otomatis

Parameter:

  • site_url (wajib): URL situs web tempat Tidio akan disematkan

Contoh:

Connect Tidio to https://mywebsite.com

tidio_status

Periksa status koneksi Anda dan dapatkan kode semat Anda.

Parameter: Tidak ada

tidio_disconnect

Hapus kredensial yang tersimpan.

Parameter: Tidak ada

generate_tidio_embed

Buat kode semat untuk kunci publik tertentu (jika Anda sudah memilikinya).

Parameter:

  • public_key (wajib): Kunci publik Tidio Anda
  • loading_mode (opsional): "async" (default) atau "sync"

Cara Kerjanya

  1. Pengguna memanggil tidio_connect dengan URL situs web mereka
  2. Browser terbuka ke halaman autentikasi Tidio
  3. Pengguna masuk ke akun Tidio mereka
  4. Callback diterima - server MCP mendapatkan refresh token
  5. Panggilan API dilakukan - menukar token dengan access token, lalu mengambil kunci publik
  6. Kredensial disimpan ke ~/.tidio-mcp/credentials.json
  7. Kode semat dikembalikan - siap ditambahkan ke situs web

Penyimpanan Kredensial

Kredensial disimpan secara lokal di ~/.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"
}

Output Kode Semat

Konektor menghasilkan kode pemuatan asinkron yang dioptimalkan:

<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>

Pengembangan

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run built version
npm start