# Conectar la IA (MCP)

Conecta Claude, Cursor u otra IA directo a tu tienda, sin instalar nada y sin
copiar llaves. Hablas normalmente ("haz un banner de Black Friday arriba"), la
IA lee la guía del tema, edita el borrador, te manda el enlace de la vista
previa y pide la publicación. Quien publica es siempre una persona, en el
panel.

La dirección es una sola, para cualquier app compatible con MCP:

```text
https://mcp.hystore.com.br/mcp
```

> [!NOTE]
> MCP (Model Context Protocol) es el estándar abierto que usan las apps de IA
> para hablar con otros servicios. La app guarda la dirección, te hace iniciar
> sesión por el panel de Hystore y pasa a tener las herramientas del tema.

## Antes de empezar

- El plan de la tienda tiene que incluir **Tema en código** con la opción
  **Conectar la IA**. Sin ella, el panel rechaza la autorización y una conexión
  ya hecha deja de responder.
- Quien autoriza es alguien de la tienda con permisos en el tema (mira
  [Permisos](/es/code-theme/#permisos)). La IA nunca hace más de lo que esa
  persona puede.
- Cada conexión vale para **una tienda**. Para editar otra tienda, conecta de
  nuevo y elige la otra tienda en la pantalla de autorización.

## El camino, en cualquier app

1. Agrega la dirección `https://mcp.hystore.com.br/mcp` en la app, como
   servidor MCP remoto (HTTP). Los pasos de cada app están justo abajo.
2. La app abre el navegador en la pantalla **Conectar una IA a tu tienda**, en
   el panel de Hystore. Si no iniciaste sesión, inicia primero.
3. Revisa el nombre de la app, elige la tienda y lo que la IA puede hacer y haz
   clic en **Autorizar**.
4. Vuelve a la app. La conexión aparece activa, con las herramientas de
   Hystore.
5. Pide algo, por ejemplo: *"Usa Hystore y dime qué tienda estás editando."*

## Claude (web y app)

Vale para [claude.ai](https://claude.ai) y para la app de Claude en la
computadora y en el celular: los conectores quedan en tu cuenta.

1. Abre **Configuración > Conectores**.
2. Haz clic en **Agregar conector personalizado**.
3. Completa el nombre `Hystore` y la URL `https://mcp.hystore.com.br/mcp`.
4. Haz clic en **Agregar** y después en **Conectar**. El navegador abre el panel
   de Hystore: autoriza (mira [la pantalla de autorización](#la-pantalla-de-autorizacion)).
5. En una conversación nueva, abre el menú de herramientas de la conversación y
   revisa que **Hystore** esté encendido.

> [!TIP]
> En el primer mensaje, pide: *"Lee la guía del tema de Hystore y muéstrame los
> archivos de mi tema."* Así la IA aprende el formato antes de editar.

Los conectores personalizados dependen del plan de tu cuenta en Claude. En
cuentas de empresa (Team, Enterprise), quien administra la organización agrega
el conector en la configuración de la organización, y cada persona conecta su
propia cuenta después.

## Claude Code

En la terminal, una vez:

```bash
claude mcp add --transport http hystore https://mcp.hystore.com.br/mcp
```

Para tener Hystore en todos los proyectos, y no solo en la carpeta actual,
agrega `--scope user`:

```bash
claude mcp add --transport http --scope user hystore https://mcp.hystore.com.br/mcp
```

Después:

1. Ejecuta `claude` en la carpeta donde trabajas.
2. Escribe `/mcp`, elige **hystore** y después **Authenticate**.
3. El navegador abre el panel: autoriza y vuelve a la terminal.
4. Pide: *"Usa hystore para listar los archivos de mi tema."*

> [!TIP]
> ¿Prefieres el tema como archivos en tu computadora, con git? Usa la
> [herramienta hystore](/es/code-theme/cli/): Claude Code lee el `CLAUDE.md` que
> ella crea y edita los archivos directo en la carpeta.

## Cursor

1. Abre **Cursor Settings > MCP** (en versiones nuevas, *Tools & Integrations*)
   y haz clic en **New MCP Server**. Cursor abre el archivo `mcp.json`.
2. Pega:

```json ~/.cursor/mcp.json
{
  "mcpServers": {
    "hystore": { "url": "https://mcp.hystore.com.br/mcp" }
  }
}
```

3. Guarda. Hystore aparece en la lista pidiendo inicio de sesión: haz clic en
   **Connect** (o *Login*) y autoriza en el navegador.
4. En el chat de Cursor (modo Agent), pide: *"Usa hystore para leer el archivo
   layout/theme.liquid."*

Para un solo proyecto, usa `.cursor/mcp.json` dentro de la carpeta del
proyecto, con el mismo contenido.

## VS Code (GitHub Copilot)

1. Crea el archivo `.vscode/mcp.json` en el proyecto (o ejecuta el comando
   **MCP: Add Server...** y elige HTTP):

```json .vscode/mcp.json
{
  "servers": {
    "hystore": { "type": "http", "url": "https://mcp.hystore.com.br/mcp" }
  }
}
```

2. Haz clic en **Start**, que aparece encima de `"hystore"` en el archivo. VS
   Code pide iniciar sesión: acepta y autoriza en el navegador.
3. Abre el chat de Copilot en modo **Agent**, haz clic en el icono de
   herramientas y revisa que las herramientas de hystore estén marcadas.

## Windsurf

En **Windsurf Settings > Cascade > MCP Servers**, abre el archivo de
configuración y pega:

```json ~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "hystore": { "serverUrl": "https://mcp.hystore.com.br/mcp" }
  }
}
```

Actualiza la lista de servidores y conecta; el inicio de sesión abre en el
navegador.

## Otras apps

Busca en la app *conector personalizado*, *servidor MCP remoto* o *MCP por
HTTP* y usa la misma dirección. No hace falta llave ni encabezado: la app
descubre sola dónde iniciar sesión (por los documentos en
`https://mcp.hystore.com.br/.well-known/`) y abre el panel. Si la app solo
acepta servidores locales (por línea de comandos), usa la
[herramienta hystore](/es/code-theme/cli/) en lugar del MCP.

## La pantalla de autorización

Cuando la app pide acceso, el panel muestra **Conectar una IA a tu tienda**:

- **El nombre de la app**, como ella misma se presenta. Revisa que sea la app
  que estás conectando.
- **A dónde va el acceso.** Cuando es un programa en tu computadora (Claude
  Code, Cursor, VS Code), la pantalla avisa: solo autoriza si acabas de
  pedirlo.
- **La tienda** que la IA va a editar.
- **Lo que la IA puede hacer**, con casillas para desmarcar:

| En la pantalla | La IA puede |
|---|---|
| Leer los archivos del tema | leer los archivos, las versiones, las imágenes y el catálogo público |
| Cambiar los archivos del borrador | crear, cambiar y borrar archivos e imágenes del borrador |
| Pedir publicación | mandar el borrador para que alguien lo apruebe en el panel |

Haz clic en **Autorizar** y vuelve a la app. **Rechazar** no da ningún acceso.

> [!WARNING]
> Si la pantalla se abre sin que hayas pedido nada, haz clic en **Rechazar**.
> Nadie de Hystore te pide que autorices apps.

## Ejemplos de pedidos

Escribe como le hablarías a una persona. Algunos que funcionan bien:

- *"Lee la guía del tema y explícame cómo está organizado mi tema."*
- *"En la página de inicio, cambia el título de arriba por 'Llegó la temporada
  5' en portugués, inglés y español."*
- *"Crea una sección de Black Friday con cuenta regresiva hasta el 28/11 a las
  23:59 y un botón a la categoría vips. Ponla arriba en el inicio."*
- *"Muestra los 8 productos más recientes de la categoría kits en tarjetas con
  botón de comprar."*
- *"Cambia el color de acento a dorado y deja los botones más redondeados."*
- *"Mándame el enlace de la vista previa."*
- *"Revisa todo el tema y corrige los errores."*
- *"Pide la publicación con la nota 'Banner de Black Friday'."*

Después del pedido de publicación, abre **Personalización > Tema en código >
Pedidos de publicación**, mira lo que cambió y haz clic en **Aprobar y
publicar** (o **Rechazar**).

## Lo que la IA puede hacer

| Herramienta | Hace |
|---|---|
| `read_theme_guide` | lee la [guía del tema](/es/code-theme/guide/), entera o una parte |
| `get_store` | nombre y dirección de la tienda, permisos de la conexión |
| `list_theme_files`, `read_theme_file` | lee el borrador |
| `write_theme_files` | crea, cambia o borra archivos del borrador, hasta 100 de una vez |
| `check_theme` | revisa el borrador entero |
| `get_preview_link` | enlace de 24 horas del borrador en la dirección de la tienda |
| `request_publish` | pide la publicación; alguien aprueba en el panel |
| `list_versions`, `read_version_file`, `restore_version` | versiones publicadas y volver una al borrador |
| `list_assets`, `upload_asset`, `delete_asset` | imágenes y fuentes del tema |
| `read_catalog` | categorías y productos activos, solo lo que ve un visitante |

Los argumentos y ejemplos de cada una están en la
[referencia del MCP](/es/code-theme/mcp-reference/#herramientas).

Cada archivo pasa por la misma revisión del panel: un archivo con error vuelve
a la IA con la línea y el motivo, y no se guarda nada. Si alguien cambió el
archivo en el panel mientras tanto, la escritura se rechaza en vez de borrar
ese cambio.

La IA **no** llega a pedidos, pagos, saldo, jugadores, cupones ni
configuración, y no publica sola.

## Desconectar

La conexión dura 30 días y se renueva sola mientras se usa la app. Aparece en
**Personalización > Acceso al tema > Sesiones conectadas**, marcada como *App
de IA*, con el nombre de la app. **Desconectar** corta el acceso al instante.

Por cada app conectada, el dueño de la tienda recibe un correo con el enlace
para desconectarla. Cada cambio hecho por la IA queda en el historial del tema
con el origen MCP.

## Problemas comunes

| Lo que pasa | Qué hacer |
|---|---|
| El panel dice que la tienda no tiene la opción | El plan necesita **Tema en código** con **Conectar la IA**; revisa también Configuración > Módulos |
| El botón **Autorizar** no aparece | Tu rol necesita permisos en el tema; pídeselo al dueño de la tienda |
| La app dice que la conexión venció | Desconecta y conecta de nuevo; una conexión sin uso por 30 días deja de valer |
| La IA editó, pero la tienda no cambió | Edita el **borrador**. Mira la vista previa y aprueba el pedido de publicación |
| La IA dice que un archivo fue rechazado | El mensaje trae la línea y el motivo; pídele que lo corrija. Mira [Problemas comunes](/es/code-theme/faq/) |
| La IA está editando la tienda equivocada | Desconecta en Sesiones conectadas y conecta de nuevo eligiendo la tienda correcta |

Para quien crea apps e integraciones, el inicio de sesión, las rutas y los
mensajes están en la [referencia del MCP](/es/code-theme/mcp-reference/).