Para devs / CLI & MCP

Ravox en tu agente

Conecta Ravox UI a Claude, Codex, Cursor, VS Code, Lovable o Windsurf. Tu agente busca componentes de la comunidad, toma el código, instala el Ravox Kit y los bloques, y aplica los temas, directo en tu proyecto, sin copiar y pegar.

Primero, una clave de API. Es gratis y conecta el agente con tu cuenta. Con ella, los comandos de abajo salen listos para usar.

1.Registra el servidor

En la terminal:

claude mcp add --transport http ravox https://ui.ravoxlabs.com/api/mcp --header "x-api-key: TU_CLAVE"

2.O déjalo en el proyecto, para el equipo

En un .mcp.json en la raíz. Cada persona pone su propia clave en RAVOX_API_KEY.

.mcp.json

{
  "mcpServers": {
    "ravox": {
      "type": "http",
      "url": "https://ui.ravoxlabs.com/api/mcp",
      "headers": {
        "x-api-key": "${RAVOX_API_KEY}"
      }
    }
  }
}

3.Compruébalo
ravox aparece como conectado:
```
claude mcp list
```

Qué pedir

Encontrar y usar un componente
“Busca en Ravox un toggle divertido en CSS y ponlo en el pie de la página de configuración.”
Armar una pantalla con el Kit
“Instala el bloque de inicio de sesión por celular del Ravox Kit en app/entrar y cambia los textos para mi clínica.”
Cambiar el tema del proyecto
“Aplica el tema Panadería de Ravox en globals.css y muéstrame qué cambió.”
Copiar sin Tailwind
“Toma el tema Periódico de Ravox en CSS puro y crea un tema.css para este sitio estático.”
Aplicar un diseño comprado
“/mcp__ravox__usar-design fermento (en Claude Code). Con el acceso anual, /mcp__ravox__escolher-design compara todos los diseños con el cliente.”

Las herramientas

Todas son de solo lectura: nada en tu proyecto cambia sin que se lo pidas al agente. Las copias cuentan en las métricas de quien creó el componente.

buscar_componentes: Busca componentes de UI de la comunidad (HTML + CSS o Tailwind) por texto, categoría o tecnología. Devuelve hasta 24 resultados con el slug; usa ver_componente para obtener el código.
ver_componente: Devuelve el HTML y el CSS (o el HTML con clases de Tailwind) de un componente publicado, por slug. Cuando existe, incluye también la versión en la otra tecnología (CSS ⇄ Tailwind).
listar_kit: Lista los componentes React del Ravox Kit (una biblioteca que se instala con el CLI @ravox-ui/cli, API en inglés, sin Radix) con el comando de instalación de cada uno.
ver_item_kit: Muestra las props de un componente del Ravox Kit, el comando de instalación y el código fuente del archivo que crea el CLI.
listar_blocos: Lista los bloques del Kit: pantallas completas listas (dashboards, sidebars, inicio de sesión, registro, gráficos, precios...) con la ruta que reciben y el comando que instala la pantalla junto con sus componentes.
listar_temas: Lista los temas del Ravox Kit (propios y de la comunidad) con fuentes, color de marca y tamaños. Usa ver_tema para obtener el CSS.
ver_tema: Devuelve el CSS de un tema: `tailwind` (variables de Tailwind 4 y shadcn para globals.css) o `css` (CSS puro con variables, estilos base y clases listas).
listar_designs: Lista los diseños de landing page y de panel admin de Ravox UI con lo necesario para elegir el que encaja con un cliente: tipo, nichos, tono, público, colores, fuentes, 'encaja con' y 'evitar para'. Abierto a todos; los archivos (ver_design) son para quien compró el diseño o tiene el acceso anual.
ver_design: Devuelve los archivos de un diseño para aplicar al proyecto: DESIGN.md (las reglas, síguelas siempre), sistema.css (tokens y componentes), tokens.css y LEIA-ME.md; pide otros por nombre en `arquivos`. Solo para quien compró el diseño o tiene el acceso anual.

Sin MCP

El Ravox Kit también se instala directo desde la terminal (npx @ravox-ui/cli add, mira la guía de instalación), y el resumen del sitio para modelos de lenguaje está en /llms.txt. El CLI de Ravox (npx ravox) llega pronto.