DEV Community

Cover image for API Claude Opus 4.7 Gratuita e Ilimitada
Lucas
Lucas

Posted on • Originally published at apidog.com

API Claude Opus 4.7 Gratuita e Ilimitada

A família Claude da Anthropic é uma das opções mais fortes para codificação, trabalho autônomo e raciocínio com contexto longo, mas o custo da API pode inviabilizar protótipos e projetos paralelos. O Puter.js muda esse modelo: ele expõe modelos Claude como Opus, Sonnet e Haiku sem exigir uma chave Anthropic no seu app, e o uso é associado à conta Puter do usuário final, não à sua conta de desenvolvedor.

Experimente o Apidog hoje

Este guia mostra como integrar Claude via Puter.js no navegador: instalação, IDs de modelo, chamadas básicas, streaming, conversas multi-turnos, prompts de sistema e pontos de decisão antes de ir para produção.

TL;DR

  • Puter.js permite chamar modelos Claude no navegador sem chave de API da Anthropic.
  • O usuário final usa a própria conta Puter; você não expõe uma chave nem assume cobrança direta.
  • Modelos suportados: Opus 4.7, Opus 4.6, Opus 4.6 Fast, Opus 4.5, Opus 4.1, Opus 4, Sonnet 4.6, Sonnet 4.5, Sonnet 4, Haiku 4.5.
  • A integração mínima usa uma tag <script> e uma chamada para puter.ai.chat.
  • Streaming, prompts de sistema e conversas multi-turnos seguem um formato parecido com a API de mensagens da Anthropic.
  • Use o Apidog para comparar prompts e preparar uma eventual migração para a API oficial.

Como o modelo do Puter funciona

O Puter.js é uma biblioteca de nuvem e IA serverless executada no navegador. Em vez de você manter uma chave Anthropic no backend e pagar pelas chamadas, o usuário faz login no Puter e o uso é associado à conta dele.

Na prática, isso muda três coisas no seu projeto:

  • Você não armazena chave de API. Não há segredo no repositório, variável de ambiente ou proxy só para proteger a chave.
  • Você não assume o custo direto por usuário. Cada usuário consome a partir da própria conta Puter.
  • Você não precisa criar uma conta Anthropic para o protótipo. O Puter atua como intermediário.

A limitação principal: o Puter é focado em uso no navegador. Um serviço backend, job agendado ou bot server-side normalmente deve usar a API oficial da Anthropic.

Passo 1: Adicione o Puter.js ao projeto

Para um protótipo, site estático ou demo simples, inclua o script no HTML:

<script src="https://js.puter.com/v2/"></script>
Enter fullscreen mode Exit fullscreen mode

Exemplo mínimo de página:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Claude com Puter.js</title>
</head>
<body>
  <div id="output"></div>

  <script src="https://js.puter.com/v2/"></script>
  <script>
    async function main() {
      const response = await puter.ai.chat(
        "Explique computação quântica em termos simples.",
        { model: "claude-sonnet-4-6" }
      );

      document.querySelector("#output").textContent =
        response.message.content[0].text;
    }

    main();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Se você estiver usando Vite, Webpack ou outro empacotador, também pode instalar via NPM:

npm install @heyputer/puter.js
Enter fullscreen mode Exit fullscreen mode 
import { puter } from "@heyputer/puter.js";
Enter fullscreen mode Exit fullscreen mode

Use a tag CDN para começar rápido. Use NPM quando o projeto já tiver pipeline de build.

Passo 2: Escolha o modelo Claude

O Puter expõe modelos Claude usando IDs similares aos nomes da Anthropic.

ID do modelo Quando usar
claude-opus-4-7 Raciocínio mais profundo, revisão complexa de código, planejamento multi-etapas
claude-opus-4-6 Modelo Opus anterior, útil para tarefas exigentes
claude-opus-4.6-fast Variante Opus com foco em menor latência
claude-opus-4-5 Opção estável para agentes e fluxos mais complexos
claude-opus-4-1 Variante legada estável
claude-opus-4 Linha base do Opus 4
claude-sonnet-4-6 Melhor padrão para uso diário
claude-sonnet-4-5 Sonnet anterior, suficiente para muitas tarefas
claude-sonnet-4 Linha base do Sonnet 4
claude-haiku-4-5 Mais rápido; bom para classificação e alto volume

Recomendação prática:

  • Comece com claude-sonnet-4-6.
  • Use claude-haiku-4-5 para tarefas simples e rápidas.
  • Use claude-opus-4-7 quando o prompt exigir raciocínio mais profundo.

Passo 3: Faça uma chamada básica ao Claude

A chamada mínima usa puter.ai.chat:

<!DOCTYPE html>
<html lang="pt-BR">
<body>
  <script src="https://js.puter.com/v2/"></script>

  <script>
    puter.ai.chat(
      "Explique computação quântica em termos simples.",
      { model: "claude-sonnet-4-6" }
    ).then(response => {
      puter.print(response.message.content[0].text);
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Na primeira execução, o Puter pode solicitar login ou criação de conta. Depois disso, a chamada é executada no contexto do usuário.

A resposta segue uma estrutura parecida com a API de mensagens da Anthropic:

response.message.content[0].text
Enter fullscreen mode Exit fullscreen mode

Para respostas com vários blocos, percorra o array:

for (const block of response.message.content) {
  if (block.type === "text") {
    console.log(block.text);
  }
}
Enter fullscreen mode Exit fullscreen mode

Passo 4: Use streaming para melhorar a UX

Sem streaming, respostas longas parecem lentas. Para receber partes da resposta conforme elas chegam, use stream: true:

const response = await puter.ai.chat(
  "Escreva um ensaio detalhado sobre o impacto da inteligência artificial na sociedade.",
  {
    model: "claude-sonnet-4-6",
    stream: true
  }
);

for await (const part of response) {
  puter.print(part?.text);
}
Enter fullscreen mode Exit fullscreen mode

Em uma interface de chat, você pode anexar cada trecho ao balão da mensagem:

const chatBubble = document.querySelector("#assistant-message");

for await (const part of response) {
  if (part?.text) {
    chatBubble.textContent += part.text;
  }
}
Enter fullscreen mode Exit fullscreen mode

Passo 5: Implemente conversas multi-turnos

Para manter contexto, envie um array de mensagens em vez de uma string:

const messages = [
  {
    role: "user",
    content: "Estou construindo um aplicativo Next.js com Postgres."
  },
  {
    role: "assistant",
    content: "Entendi. Em que posso ajudar?"
  },
  {
    role: "user",
    content: "Como devo estruturar a pasta de migrações?"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-opus-4-7"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

Em um chat real, mantenha o histórico em memória ou no estado do frontend:

const messages = [];

async function sendMessage(userText) {
  messages.push({
    role: "user",
    content: userText
  });

  const response = await puter.ai.chat(messages, {
    model: "claude-sonnet-4-6"
  });

  const assistantText = response.message.content[0].text;

  messages.push({
    role: "assistant",
    content: assistantText
  });

  return assistantText;
}
Enter fullscreen mode Exit fullscreen mode

Passo 6: Use prompts de sistema

Prompts de sistema definem comportamento, papel, restrições e formato de saída.

const messages = [
  {
    role: "system",
    content:
      "Você é um engenheiro de backend sênior. Responda em até cinco marcadores numerados."
  },
  {
    role: "user",
    content: "Como eu previno injeção de SQL em um aplicativo Node.js?"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-sonnet-4-6"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

Use o prompt de sistema para definir regras persistentes da conversa, por exemplo:

const systemPrompt = `
Você é um assistente técnico para desenvolvedores.
Responda em português.
Priorize exemplos de código.
Se houver risco de segurança, explique a mitigação.
`;
Enter fullscreen mode Exit fullscreen mode

Compare modelos com o mesmo prompt

Antes de escolher um modelo para produção, rode o mesmo prompt em modelos diferentes e compare latência e qualidade.

const models = [
  "claude-haiku-4-5",
  "claude-sonnet-4-6",
  "claude-opus-4-7"
];

const prompt = "Refatore este componente React para usar hooks: ...";

for (const model of models) {
  const start = performance.now();

  const response = await puter.ai.chat(prompt, { model });

  const elapsed = performance.now() - start;

  console.log(`${model}: ${elapsed.toFixed(0)}ms`);
  console.log(response.message.content[0].text);
  console.log("---");
}
Enter fullscreen mode Exit fullscreen mode

Critérios úteis para comparar:

  • Tempo até a primeira resposta
  • Tempo total
  • Qualidade do código gerado
  • Aderência às instruções
  • Necessidade de pós-edição manual

Para a maioria dos aplicativos, claude-sonnet-4-6 é um bom padrão. Use claude-haiku-4-5 para tarefas simples e claude-opus-4-7 para prompts difíceis.

Para comparar o caminho via Puter com a API oficial da Anthropic, mantenha ambos os cenários documentados no Apidog e alterne o ambiente conforme necessário.

O que você obtém — e o que deve validar

Claude via Puter é útil para apps no navegador, mas a superfície pode não cobrir todos os recursos da API oficial.

Você obtém:

  • Acesso a modelos Claude como Opus, Sonnet e Haiku
  • Conversas multi-turnos
  • Prompts de sistema
  • Streaming
  • Integração simples no navegador
  • Nenhuma chave Anthropic exposta no seu app

Você deve validar antes de depender em produção:

  • Suporte a ferramentas ou function calling
  • Entrada multimodal, como imagens
  • Cache de prompt
  • Uso server-side
  • Observabilidade detalhada de limites e cabeçalhos da API

Para fluxos com uso intenso de ferramentas, a API oficial da Anthropic ou o teste de servidor MCP no Apidog tende a oferecer mais controle.

Quando usar Puter vs. API oficial da Anthropic

Use Puter.js quando:

  • Você está criando um protótipo ou projeto paralelo.
  • O app roda no navegador.
  • Você quer evitar gerenciar chave de API.
  • Você não quer assumir cobrança direta por usuário.
  • Seus usuários podem fazer login no Puter.

Use a API oficial da Anthropic quando:

  • Você precisa executar chamadas no backend.
  • Você tem jobs agendados, filas, bots ou processamento em lote.
  • Você precisa de cache de prompt.
  • Você precisa de uso avançado de ferramentas, arquivos ou entrada visual.
  • Você precisa de contrato, conformidade ou requisitos empresariais específicos.
  • Seus usuários não aceitarão uma etapa de login no Puter.

Uma estratégia comum é começar com Puter para validar o produto e migrar para a API oficial quando o backend, a conformidade ou recursos avançados se tornarem necessários.

Para um exemplo equivalente com GPT, veja Como usar a API GPT-5.5.

Testando a integração no Apidog

Como o Puter roda no navegador, você não testa a chamada da mesma forma que um endpoint backend. Um fluxo prático é:

  1. Criar uma página estática com Puter.js.
  2. Receber o prompt por query string ou campo de formulário.
  3. Testar manualmente o comportamento via navegador.
  4. Documentar e preparar a versão equivalente da API oficial da Anthropic no Apidog.
  5. Manter ambientes separados para protótipo e produção.

Exemplo de página de teste:

<!DOCTYPE html>
<html lang="pt-BR">
<body>
  <pre id="output"></pre>

  <script src="https://js.puter.com/v2/"></script>
  <script>
    const params = new URLSearchParams(window.location.search);
    const prompt = params.get("prompt") || "Explique HTTP em uma frase.";

    const output = document.querySelector("#output");

    async function run() {
      const response = await puter.ai.chat(prompt, {
        model: "claude-sonnet-4-6"
      });

      output.textContent = response.message.content[0].text;
    }

    run();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Depois, você pode hospedar localmente:

npx serve .
Enter fullscreen mode Exit fullscreen mode

E testar no navegador:

http://localhost:3000?prompt=Explique%20CORS%20em%20termos%20simples
Enter fullscreen mode Exit fullscreen mode

No Apidog, configure dois ambientes:

  • puter-prototype: URL local da página com Puter.js
  • anthropic-prod: https://api.anthropic.com/v1

Assim, quando você migrar para a API oficial, já terá prompts, payloads e cenários organizados.

FAQ

Isso é realmente ilimitado para o desenvolvedor?

Do lado do desenvolvedor, sim: você não assume uma cota centralizada da Anthropic. O uso depende da conta Puter do usuário final.

Preciso criar uma conta na Anthropic?

Não para usar Claude via Puter no navegador. O Puter gerencia essa camada.

Posso usar isso em produção?

Sim, se o seu app for baseado em navegador e se a etapa de login no Puter fizer sentido para seus usuários.

Claude via Puter responde igual à API oficial?

O Puter chama os modelos Claude em nome do usuário. Pode haver diferença de latência por causa da camada adicional, mas o comportamento esperado do modelo é o mesmo.

O Puter expõe cache de prompt da Anthropic?

Não conte com isso sem verificar a documentação atual. Se cache de prompt for requisito de custo, use a API oficial.

Posso usar em um bot do Discord ou serviço backend?

Não é o cenário ideal. O Puter é orientado ao navegador e à sessão do usuário. Para backend, use a API oficial.

Qual modelo devo usar por padrão?

Use claude-sonnet-4-6. Troque para claude-opus-4-7 quando precisar de raciocínio mais profundo e para claude-haiku-4-5 quando precisar de respostas mais rápidas para tarefas simples.

Conclusão

Puter.js é uma forma prática de adicionar Claude a um app de navegador sem gerenciar chave Anthropic e sem assumir cobrança direta no seu projeto. Para começar, você só precisa incluir o script, escolher um modelo e chamar puter.ai.chat.

Para workloads server-side, cache de prompt, ferramentas avançadas ou requisitos de conformidade, a API oficial da Anthropic continua sendo o caminho mais adequado.

Crie os cenários no Apidog, compare Puter e API oficial com os mesmos prompts e escolha a arquitetura que se encaixa no seu produto.

Top comments (0)