Tidio

oficial

Conecta Tidio con tu sitio web a través de MCP. Inserta el widget sin salir de tu entorno de

¿Qué puedes hacer con Tidio MCP?

Conectar Tidio a un sitio — Solicita conectar Tidio a una URL de sitio web mediante tidio_connect, que abre un navegador para el inicio de sesión OAuth y recupera automáticamente tu clave pública.
Verificar estado de la conexión — Se usa para comprobar si Tidio está conectado y recuperar tu código de inserción actual.
Generar código de inserción — Llama con una clave pública para producir JavaScript listo para usar, eligiendo opcionalmente la carga async o sync.
Desconectar Tidio — Ejecuta para borrar las credenciales almacenadas localmente de ~/.tidio-mcp/credentials.json.

Documentación

Conector MCP de Tidio

Un servidor MCP (Model Context Protocol) que conecta asistentes de IA al chat en vivo de Tidio - con configuración automática

Características

Configuración automática: Conéctate a Tidio con un solo comando - sin copiar claves manualmente
Autenticación OAuth: Abre el navegador para un inicio de sesión seguro en Tidio, recupera automáticamente tu clave pública
Persistencia de credenciales: Las credenciales se guardan localmente para futuras sesiones
Generación de código de inserción: Obtén código JavaScript listo para usar en cualquier sitio web

Instalación

npm install tidio-mcp-connector

O clona y compila localmente:

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

Uso

Con Claude Desktop

Añade a tu configuración de Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Con Lovable

Este conector MCP funciona con Lovable y plataformas de desarrollo similares impulsadas por IA. Añádelo como un servidor MCP personalizado.

Con MCP Inspector (Pruebas)

npx @modelcontextprotocol/inspector npx tidio-mcp-connector

Herramientas disponibles

tidio_connect (Recomendado)

Conéctate a Tidio y obtén automáticamente tu clave pública.

Cómo funciona:

Abre tu navegador en la página de inicio de sesión de Tidio
Te autenticas con tu cuenta de Tidio
Devuelve tu clave pública y código de inserción automáticamente

Parámetros:

site_url (obligatorio): La URL del sitio web donde se insertará Tidio

Ejemplo:

Connect Tidio to https://mywebsite.com

tidio_status

Comprueba tu estado de conexión y obtén tu código de inserción.

Parámetros: Ninguno

tidio_disconnect

Borra las credenciales almacenadas.

Parámetros: Ninguno

generate_tidio_embed

Genera código de inserción para una clave pública específica (si ya tienes una).

Parámetros:

public_key (obligatorio): Tu clave pública de Tidio
loading_mode (opcional): "async" (por defecto) o "sync"

Cómo funciona

El usuario llama a tidio_connect con la URL de su sitio web
El navegador se abre en la página de autenticación de Tidio
El usuario inicia sesión en su cuenta de Tidio
Se recibe el callback - el servidor MCP obtiene el token de actualización
Se realizan llamadas a la API - intercambia el token por un token de acceso, luego recupera la clave pública
Las credenciales se guardan en ~/.tidio-mcp/credentials.json
Se devuelve el código de inserción - listo para añadir al sitio web

Almacenamiento de credenciales

Las credenciales se almacenan localmente en ~/.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"
}

Salida del código de inserción

El conector genera código de carga asíncrona optimizado:

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

Desarrollo

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run built version
npm start