Programadores · Ligar o Claude

Ligar o Claude

O Claude na WhizzyCommerce corre sempre na sua conta, nunca na nossa. A forma como liga decide se sai do seu plano claude.ai ou da sua conta da API da Anthropic.

De relance

As cinco formas

As três primeiras são o mesmo conector, alcançado a partir de três clientes diferentes. Use uma delas se tiver uma subscrição do Claude: o pensamento acontece do seu lado e nós nunca vemos uma chave.

Por onde	Onde corre o Claude	O que lhe custa
Claude Code num terminal	A sua máquina	O seu plano claude.ai
Claude Code no VS Code ou no JetBrains	O seu editor	O seu plano claude.ai
claude.ai, como conector personalizado	claude.ai	O seu plano claude.ai
O conector da própria loja de demonstração	claude.ai	O seu plano claude.ai
Construir com o Claude, no nosso editor	O nosso servidor	A sua chave da API Anthropic

Não há uma terceira opção. Nunca corremos o Claude com a nossa própria chave para uma loja de demonstração ou de desenvolvimento. O plafond de um plano de comerciante é para gerir uma loja, não para construir um tema que depois vendemos, por isso uma loja de programador pede uma das formas acima.

Recomendado

O seu Claude, o nosso conector

Um endereço, acrescentado uma vez, dá ao Claude onze ferramentas sobre os seus temas: ler e escrever os ficheiros, validar, encenar o rascunho na loja do próprio tema, fotografar uma página, submeter uma versão e ler a revisão.

Num terminal, com o Claude Code. Corra isto uma vez em qualquer pasta, depois arranque o Claude e aprove o início de sessão que ele abre no seu 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

O navegador pede-lhe para entrar na WhizzyCommerce e para permitir a ligação. É à sua conta de programador que ele se liga, não a uma loja, e a ligação dura até a revogar em Programador, depois Tokens.

Comece uma sessão nova depois de iniciar sessão O Claude aprende que ferramentas tem quando uma conversa começa. Inicie sessão com /mcp a meio de uma e o servidor aparece como ligado, mas essa conversa continua sem as ferramentas e vai dizer-lhe que não consegue chegar aos seus temas. Comece uma sessão nova uma vez, e todas as sessões a seguir têm-nas: o /mcp mostra whizzy-developer com onze ferramentas, e pedir “usa o whizzy-developer para listar os meus temas” é uma verificação rápida. O mesmo vale para o claude.ai: um conector acrescentado durante uma conversa chega à conversa seguinte, não àquela.

No VS Code ou no JetBrains. A extensão Claude Code usa os mesmos conectores do terminal, por isso o comando acima é tudo o que precisa, corrido uma vez no terminal do IDE. Para o partilhar com toda a equipa, cometa-o em vez disso:

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

No claude.ai. Definições, depois Conectores, depois Adicionar conector personalizado. Chame-lhe whizzy-developer, cole o mesmo endereço, carregue em Ligar e inicie sessão. Depois funciona em qualquer conversa, na web e na aplicação de computador.

Peça ao Claude	O que faz
“Lista os meus temas”	`list_themes`
“Abre a secção do cabeçalho do luxor”	`read_theme_file`
“Faz o cabeçalho ficar fixo ao rolar”	`write_theme_files`
“Alguma coisa bloqueia uma publicação?”	`validate_theme`
“Mostra-me a página inicial num telemóvel”	`screenshot_page`
“Recomeça a partir da versão publicada”	`reset_theme`
“Submete a 2.1.0 com este registo de alterações”	`submit_release`

Nada disto pode publicar. As ferramentas escrevem a sua cópia de trabalho e submetem versões. Uma pessoa na WhizzyCommerce aprova cada publicação, e só essa aprovação muda o que os comerciantes e a demonstração veem.

Ficheiros em disco

VS Code e a CLI

Se preferir manter o tema numa pasta, com git e o seu editor do costume, a CLI mantém essa pasta e a sua conta a par. O Claude Code depois edita ficheiros normais, como faz em qualquer repositório.

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"

O Claude Code lê o AGENTS.md na pasta sem lhe dizerem: é o formato do tema e as regras de desempenho, por isso uma sessão começa a saber delas. Acrescente também o conector e o Claude consegue validar e submeter sem sair da conversa.

Uma cópia, três portas. A pasta, o editor do navegador e o conector trabalham todos nos mesmos ficheiros guardados. Um push de uma pasta atrasada é recusado em vez de fundido, e o whizzy-theme pull traz a pasta para a frente.

A demonstração

O conector da própria loja de demonstração

Os temas são uma coisa; o conteúdo da demonstração é outra. A loja de demonstração tem o seu próprio conector, e é isso que o Claude usa para escrever as páginas, os banners e os textos da demonstração.

O ecrã de IA de uma loja de demonstração, com o endereço do conector para colar no claude.ai Open full size

Abrir o ecrã de IA da loja
Painel, a loja, depois IA
O endereço aí acaba em /mcp/ e no id da loja. Copie-o.
Acrescentá-lo ao claude.ai
Definições, Conectores, Adicionar conector personalizado
Chame-lhe whizzy-merchant, cole, ligue e inicie sessão. Chega a essa loja apenas.
Pedir uma demonstração
Arranje a página inicial, escreva os textos das secções, organize uma categoria. As alterações caem no rascunho da loja com um desfazer ao lado de cada uma.

Não pode publicar, e não chega a encomendas, clientes ou pagamentos, que uma loja de demonstração também não tem. O que muda é a demonstração que as pessoas veem na página do seu tema.

No nosso servidor

O painel do editor no navegador

A única forma que precisa de uma chave da API da Anthropic, porque aqui o Claude corre no nosso servidor e não no seu. Prático quando já está no editor e não tem cliente nenhum configurado.

O editor de temas no navegador com o painel Construir com o Claude aberto, a pedir uma chave da API da Anthropic Open full size

Carregue em Construir com o Claude no editor de temas, depois cole uma chave de console.anthropic.com.
A chave é cifrada do nosso lado, guardada contra esse tema apenas, e usada só quando você envia uma mensagem.
Cada mensagem é faturada à sua conta da Anthropic. Não ficamos com nada nem acrescentamos margem.
Retire a chave a qualquer momento e o painel deixa de pedir seja o que for.

Uma subscrição não pode pagar esta. Um plano claude.ai só é gastável pelos clientes da própria Anthropic com sessão iniciada como você, que é exatamente o que as formas com conector acima são. Tudo o que corra no nosso servidor tem de chamar a API, e a API pede uma chave.

O mesmo é verdade para o assistente dentro de uma loja de demonstração ou de desenvolvimento. A chave dele vive em Definições, depois Claude, nessa loja.

As definições de Claude de uma loja de demonstração, a explicar que aqui o Claude corre com a chave do próprio programador Open full size

Sem modelo

CI, sem Claude nenhum

Um servidor de build não precisa do Claude para publicar um tema. Precisa de um token, que é o que o ecrã de Tokens cria.

O ecrã de Tokens na área de programador, onde se cria um 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 }}"

Um token substitui o início de sessão no navegador e mais nada: as mesmas regras, as mesmas verificações, a mesma revisão. Crie um por sítio, para que qualquer um possa ser revogado sozinho.

Dinheiro

Quanto custa cada uma

A versão curta: ligue um cliente que já paga, e construir um tema não lhe custa nada para além dessa subscrição.

	Pago por	Bom para
Conector de programador	O seu plano claude.ai	Tudo sobre os ficheiros, as verificações e as publicações do tema
CLI com o Claude Code	O seu plano claude.ai	Trabalhar em git, com o seu editor e os seus ramos
Conector da loja	O seu plano claude.ai	O conteúdo da demonstração na loja de demonstração
Construir com o Claude	A sua chave da API Anthropic	Uma alteração rápida sem configurar um cliente
Token de CI	Nada	Publicar a partir de uma pipeline

Use a que usar, o trabalho é seu e a conta em que corre também. Veja Ferramentas para a referência completa de comandos e ferramentas, e Versões e revisão para o que acontece depois de submeter.

SeguinteFormato do tema →