Desarrolladores · Conectar Claude

Conectar Claude

Claude en WhizzyCommerce corre siempre en su cuenta, nunca en la nuestra. La forma en que conecte decide si sale de su plan de claude.ai o de su factura de la API de Anthropic.

De un vistazo

Las cinco formas

Las tres primeras son el mismo conector alcanzado desde tres clientes distintos. Use una de ellas si tiene una suscripción de Claude: el pensamiento pasa de su lado y nosotros no vemos ninguna clave.

Por dónde	Dónde corre Claude	Qué le cuesta
Claude Code en una terminal	Su máquina	Su plan de claude.ai
Claude Code en VS Code o JetBrains	Su editor	Su plan de claude.ai
claude.ai, como conector personalizado	claude.ai	Su plan de claude.ai
El conector de la propia tienda de demostración	claude.ai	Su plan de claude.ai
Construir con Claude, en nuestro editor	Nuestro servidor	Su clave de la API de Anthropic

No hay una tercera opción. Nunca ejecutamos Claude con nuestra propia clave para una tienda de demostración ni de desarrollo. El saldo del plan de un comerciante es para llevar una tienda, no para construir un tema que luego vendemos, así que una tienda de desarrollador pide una de las formas de arriba.

Recomendado

Su Claude, nuestro conector

Una dirección, añadida una vez, le da a Claude once herramientas sobre sus temas: leer y escribir los archivos, validar, montar el borrador en la tienda propia del tema, fotografiar una página, enviar una versión y leer la revisión.

En una terminal, con Claude Code. Ejecute esto una vez en cualquier carpeta, luego arranque Claude y apruebe el inicio de sesión que abre en su navegador.

claude mcp add --transport http whizzy-developer https://app.whizzycommerce.com/mcp/dev
claude
/mcp            # whizzy-developer, then Authenticate
/exit           # once signed in, leave this session
claude          # and start a new one: the tools are in this one

El navegador le pide entrar en WhizzyCommerce y permitir la conexión. Se conecta a su cuenta de desarrollador, no a una tienda, y la conexión dura hasta que la revoque en Desarrollador, luego Tokens.

Empiece una sesión nueva después de iniciar sesión Claude aprende qué herramientas tiene cuando empieza una conversación. Inicie sesión con /mcp a mitad de una y el servidor aparece conectado, pero esa conversación sigue sin las herramientas y le dirá que no puede llegar a sus temas. Empiece una sesión nueva una vez, y todas las sesiones posteriores las tienen: /mcp muestra whizzy-developer con once herramientas, y pedir “usa whizzy-developer para listar mis temas” es una comprobación rápida. Lo mismo vale para claude.ai: un conector añadido durante un chat llega al chat siguiente, no a ese.

En VS Code o JetBrains. La extensión Claude Code usa los mismos conectores que la terminal, así que el comando de arriba es todo lo que necesita, ejecutado una vez en la terminal del IDE. Para compartirlo con todo el equipo, súbalo al repositorio en su lugar:

// .mcp.json, in the root of the theme's repository
{
  "mcpServers": {
    "whizzy-developer": { "type": "http", "url": "https://app.whizzycommerce.com/mcp/dev" }
  }
}

En claude.ai. Ajustes, luego Conectores, luego Añadir conector personalizado. Llámelo whizzy-developer, pegue la misma dirección, pulse Conectar e inicie sesión. Entonces funciona en cualquier chat, en la web y en la aplicación de escritorio.

Pídale a Claude	Qué hace
“Lista mis temas”	`list_themes`
“Abre la sección de cabecera de luxor”	`read_theme_file`
“Haz que la cabecera se fije al desplazar”	`write_theme_files`
“¿Algo bloquea una publicación?”	`validate_theme`
“Enséñame la portada en un móvil”	`screenshot_page`
“Empieza otra vez desde la versión publicada”	`reset_theme`
“Envía la 2.1.0 con este registro de cambios”	`submit_release`

Nada de esto puede publicar. Las herramientas escriben su copia de trabajo y envían versiones. Una persona de WhizzyCommerce aprueba cada publicación, y solo esa aprobación cambia lo que ven los comerciantes y la demostración.

Archivos en disco

VS Code y la CLI

Si prefiere tener el tema en una carpeta, con git y su editor de siempre, la CLI mantiene esa carpeta y su cuenta al día. Claude Code edita entonces archivos normales, como hace en cualquier repositorio.

npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
whizzy-theme login
whizzy-theme pull luxor            # writes the folder
whizzy-theme dev --shop=ten_...    # pushes on every save, opens a preview
whizzy-theme submit -m "What changed, for merchants"

Claude Code lee AGENTS.md en la carpeta sin que se lo pidan: es el formato del tema y las reglas de rendimiento, así que una sesión empieza sabiéndolas. Añada además el conector y Claude puede validar y enviar sin salir del chat.

Una copia, tres puertas. La carpeta, el editor del navegador y el conector trabajan todos sobre los mismos archivos guardados. Un push desde una carpeta atrasada se rechaza en vez de fusionarse, y whizzy-theme pull la pone al día.

La demostración

El conector de la propia tienda de demostración

Los temas son una cosa; el contenido de la demostración es otra. La tienda de demostración tiene su propio conector, y eso es lo que usa Claude para escribir las páginas, los banners y los textos de la demostración.

La pantalla de IA de una tienda de demostración, con la dirección del conector para pegar en claude.ai Open full size

Abrir la pantalla de IA de la tienda
Panel, la tienda, luego IA
La dirección de ahí acaba en /mcp/ y el id de la tienda. Cópiela.
Añadirlo a claude.ai
Ajustes, Conectores, Añadir conector personalizado
Llámelo whizzy-merchant, pegue, conecte e inicie sesión. Llega solo a esa tienda.
Pedir una demostración
Disponga la portada, escriba los textos de las secciones, ordene una categoría. Los cambios caen en el borrador de la tienda con un deshacer al lado de cada uno.

No puede publicar, y no llega a pedidos, clientes ni pagos, que una tienda de demostración tampoco tiene. Lo que cambia es la demostración que la gente ve en la página de su tema.

En nuestro servidor

El panel del editor del navegador

La única forma que necesita una clave de la API de Anthropic, porque aquí Claude corre en nuestro servidor y no en el suyo. Cómodo cuando ya está en el editor y no tiene ningún cliente configurado.

El editor de temas del navegador con el panel Construir con Claude abierto, pidiendo una clave de la API de Anthropic Open full size

Pulse Construir con Claude en el editor de temas, y pegue luego una clave de console.anthropic.com.
La clave se cifra de nuestro lado, se guarda contra ese único tema, y se usa solo cuando usted manda un mensaje.
Cada mensaje se factura a su cuenta de Anthropic. No nos quedamos nada ni añadimos margen.
Quite la clave cuando quiera y el panel deja de pedir nada.

Una suscripción no puede pagar esta. Un plan de claude.ai solo lo pueden gastar los propios clientes de Anthropic con la sesión iniciada como usted, que es exactamente lo que son las formas con conector de arriba. Cualquier cosa que corra en nuestro servidor tiene que llamar a la API, y la API pide una clave.

Lo mismo vale para el asistente dentro de una tienda de demostración o de desarrollo. Su clave vive en Ajustes, luego Claude, en esa tienda.

Los ajustes de Claude de una tienda de demostración, explicando que aquí Claude corre con la clave del propio desarrollador Open full size

Sin modelo

CI, sin Claude ninguno

Un servidor de build no necesita Claude para publicar un tema. Necesita un token, que es lo que crea la pantalla de Tokens.

La pantalla de Tokens del área de desarrollador, donde se crea un token de CI Open full size

# GitHub Actions, or anything else that runs a shell
env:
  WHIZZY_TOKEN: ${{ secrets.WHIZZY_TOKEN }}
run: |
  npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
  whizzy-theme push
  whizzy-theme validate --remote
  whizzy-theme submit -m "${{ github.event.head_commit.message }}"

Un token sustituye al inicio de sesión del navegador y nada más: las mismas reglas, las mismas comprobaciones, la misma revisión. Haga uno por sitio, para que cualquiera pueda revocarse solo.

Dinero

Cuánto cuesta cada una

La versión corta: conecte un cliente que ya paga, y construir un tema no le cuesta nada más allá de esa suscripción.

	Lo paga	Bueno para
Conector de desarrollador	Su plan de claude.ai	Todo lo relativo a los archivos, las comprobaciones y las versiones del tema
CLI con Claude Code	Su plan de claude.ai	Trabajar en git, con su editor y sus ramas
Conector de la tienda	Su plan de claude.ai	El contenido de la demostración en la tienda de demostración
Construir con Claude	Su clave de la API de Anthropic	Un cambio rápido sin montar un cliente
Token de CI	Nada	Publicar desde una tubería

Use la que use, el trabajo es suyo y la cuenta en la que corre también. Vea Herramientas para la referencia completa de comandos y herramientas, y Versiones y revisión para lo que pasa después de enviar.

SiguienteFormato del tema →