Sviluppatori · Collegare Claude

Collegare Claude

Claude su WhizzyCommerce gira sempre sul suo account, mai sul nostro. Il modo in cui si collega decide se esce dal suo piano claude.ai o dalla sua fattura dell'API Anthropic.

A colpo d'occhio

I cinque modi

I primi tre sono lo stesso connettore raggiunto da tre client diversi. Ne usi uno se ha un abbonamento Claude: il ragionamento avviene dalla sua parte e noi non vediamo mai una chiave.

Da dove	Dove gira Claude	Cosa le costa
Claude Code in un terminale	La sua macchina	Il suo piano claude.ai
Claude Code in VS Code o JetBrains	Il suo editor	Il suo piano claude.ai
claude.ai, come connettore personalizzato	claude.ai	Il suo piano claude.ai
Il connettore del negozio demo	claude.ai	Il suo piano claude.ai
Costruisci con Claude, nel nostro editor	Il nostro server	La sua chiave API Anthropic

Non c'è una terza opzione. Non eseguiamo mai Claude con la nostra chiave per un negozio demo o di sviluppo. Il plafond del piano di un commerciante serve a mandare avanti un negozio, non a costruire un tema che poi vendiamo, quindi un negozio da sviluppatore chiede uno dei modi qui sopra.

Consigliato

Il suo Claude, il nostro connettore

Un indirizzo, aggiunto una volta, dà a Claude undici strumenti sui suoi temi: leggere e scrivere i file, convalidare, mettere in scena la bozza sul negozio del tema, fotografare una pagina, inviare una versione e leggere la revisione.

In un terminale, con Claude Code. Esegua questo una volta in una cartella qualsiasi, poi avvii Claude e approvi l'accesso che apre nel browser.

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

Il browser le chiede di accedere a WhizzyCommerce e di autorizzare il collegamento. Si collega al suo account sviluppatore, non a un negozio, e il collegamento dura finché non lo revoca in Sviluppatori, poi Token.

Cominci una sessione nuova dopo l'accesso Claude impara quali strumenti ha quando comincia una conversazione. Se accede con /mcp a metà di una, il server risulta collegato, ma quella conversazione prosegue senza gli strumenti e le dirà che non riesce a raggiungere i suoi temi. Cominci una sessione nuova una volta, e tutte le sessioni successive li hanno: /mcp mostra whizzy-developer con undici strumenti, e chiedere “usa whizzy-developer per elencare i miei temi” è una verifica veloce. Lo stesso vale per claude.ai: un connettore aggiunto durante una chat arriva alla chat successiva, non a quella.

In VS Code o JetBrains. L'estensione Claude Code usa gli stessi connettori del terminale, quindi il comando qui sopra è tutto quello che serve, eseguito una volta nel terminale dell'IDE. Per condividerlo con tutto il team, lo committi invece:

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

Su claude.ai. Impostazioni, poi Connettori, poi Aggiungi connettore personalizzato. Lo chiami whizzy-developer, incolli lo stesso indirizzo, prema Collega e acceda. Poi funziona in qualsiasi chat, sul web e nell'app desktop.

Chieda a Claude	Cosa fa
“Elenca i miei temi”	`list_themes`
“Apri la sezione testata di luxor”	`read_theme_file`
“Fai in modo che la testata resti fissa allo scorrimento”	`write_theme_files`
“C'è qualcosa che blocca una pubblicazione?”	`validate_theme`
“Mostrami la home su un telefono”	`screenshot_page`
“Riparti dalla versione pubblicata”	`reset_theme`
“Invia la 2.1.0 con questo changelog”	`submit_release`

Niente di tutto questo può pubblicare. Gli strumenti scrivono la sua copia di lavoro e inviano versioni. Una persona di WhizzyCommerce approva ogni pubblicazione, e solo quell'approvazione cambia quello che vedono i commercianti e la demo.

File su disco

VS Code e la CLI

Se preferisce tenere il tema in una cartella, con git e il suo editor di sempre, la CLI tiene allineati quella cartella e il suo account. Claude Code poi modifica file normali, come fa in qualsiasi repository.

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 legge AGENTS.md nella cartella senza che glielo si dica: è il formato del tema e le regole di prestazione, quindi una sessione comincia già sapendole. Aggiunga anche il connettore e Claude può convalidare e inviare senza uscire dalla chat.

Una copia, tre porte. La cartella, l'editor del browser e il connettore lavorano tutti sugli stessi file salvati. Un push da una cartella rimasta indietro viene rifiutato invece che unito, e whizzy-theme pull la porta avanti.

La demo

Il connettore del negozio demo

I temi sono una cosa; il contenuto della demo è un'altra. Il negozio demo ha un connettore suo, ed è quello che Claude usa per scrivere le pagine, i banner e i testi della demo.

La schermata IA di un negozio demo, con l'indirizzo del connettore da incollare su claude.ai Open full size

Aprire la schermata IA del negozio
Pannello, il negozio, poi IA
L'indirizzo lì finisce con /mcp/ e l'id del negozio. Lo copi.
Aggiungerlo a claude.ai
Impostazioni, Connettori, Aggiungi connettore personalizzato
Lo chiami whizzy-merchant, incolli, colleghi e acceda. Raggiunge quel solo negozio.
Chiedere una demo
Imposti la home, scriva i testi delle sezioni, sistemi una categoria. Le modifiche finiscono nella bozza del negozio con un annullamento accanto a ciascuna.

Non può pubblicare, e non raggiunge ordini, clienti o pagamenti, che comunque un negozio demo non ha. Quello che cambia è la demo che la gente vede sulla pagina del suo tema.

Sul nostro server

Il pannello nell'editor del browser

L'unico modo che richiede una chiave API Anthropic, perché qui Claude gira sul nostro server e non sul suo. Comodo quando è già nell'editor e non ha nessun client configurato.

L'editor dei temi nel browser con il pannello Costruisci con Claude aperto, che chiede una chiave API Anthropic Open full size

Prema Costruisci con Claude nell'editor dei temi, poi incolli una chiave da console.anthropic.com.
La chiave viene cifrata dalla nostra parte, tenuta su quel solo tema, e usata solo quando lei manda un messaggio.
Ogni messaggio viene fatturato al suo account Anthropic. Non tratteniamo niente e non aggiungiamo ricarichi.
Tolga la chiave quando vuole e il pannello smette di chiedere qualsiasi cosa.

Un abbonamento non può pagare questo. Un piano claude.ai è spendibile solo dai client di Anthropic collegati come lei, che è esattamente quello che sono i modi con connettore qui sopra. Qualsiasi cosa giri sul nostro server deve chiamare l'API, e l'API vuole una chiave.

Lo stesso vale per l'assistente dentro un negozio demo o di sviluppo. La sua chiave sta in Impostazioni, poi Claude, su quel negozio.

Le impostazioni Claude di un negozio demo, che spiegano che qui Claude gira con la chiave dello sviluppatore Open full size

Nessun modello

CI, senza Claude

Un server di build non ha bisogno di Claude per pubblicare un tema. Ha bisogno di un token, che è quello che crea la schermata Token.

La schermata Token nell'area sviluppatori, dove si crea un token di 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 sostituisce l'accesso dal browser e nient'altro: le stesse regole, gli stessi controlli, la stessa revisione. Ne faccia uno per posto, così ognuno può essere revocato da solo.

Soldi

Quanto costa ciascuno

La versione breve: colleghi un client che già paga, e costruire un tema non le costa niente oltre a quell'abbonamento.

	Lo paga	Va bene per
Connettore per sviluppatori	Il suo piano claude.ai	Tutto quello che riguarda i file, i controlli e le versioni del tema
CLI con Claude Code	Il suo piano claude.ai	Lavorare in git, con il suo editor e i suoi rami
Connettore del negozio	Il suo piano claude.ai	Il contenuto della demo sul negozio demo
Costruisci con Claude	La sua chiave API Anthropic	Una modifica veloce senza configurare un client
Token di CI	Niente	Pubblicare da una pipeline

Qualunque usi, il lavoro è suo e lo è anche l'account su cui gira. Veda Strumenti per il riferimento completo di comandi e strumenti, e Versioni e revisione per cosa succede dopo l'invio.

AvantiFormato del tema →