DEV Community

Cover image for Kostenlose Unbegrenzte Claude Opus 4.7 API
Emre Demir
Emre Demir

Posted on • Originally published at apidog.com

Kostenlose Unbegrenzte Claude Opus 4.7 API

Die Claude-Familie von Anthropic ist eine leistungsfähige Closed-Source-Modellreihe für Programmierung, autonome Aufgaben und Long-Context-Reasoning. Der API-Preis kann jedoch schnell zum Limit für Seitenprojekte werden: Sonnet kostet 3 $ / 15 $ pro Million Tokens, Opus ist teurer. Puter.js dreht das Abrechnungsmodell um: Sie integrieren Claude im Browser ohne Anthropic-API-Key, während die Nutzung über das Puter-Konto des Endbenutzers läuft. Für Sie als Entwickler entstehen dadurch keine direkten Anthropic-Kosten.

Teste Apidog noch heute

Dieser Leitfaden zeigt die praktische Integration: Skript einbinden, Modell auswählen, Chat-Aufrufe ausführen, Streaming aktivieren, Konversationen verwalten und die Grenzen des Ansatzes kennen.

TL;DR

  • Puter.js ermöglicht browserbasierten Zugriff auf Claude ohne eigenen Anthropic-API-Key.
  • Die Nutzung wird dem Puter-Konto des Endbenutzers zugeordnet, nicht Ihrem Entwicklerkonto.
  • Unterstützte Modelle laut ursprünglichem Katalog: 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.
  • Die Basisintegration besteht aus einem <script>-Tag und einem Aufruf von puter.ai.chat().
  • Streaming, System-Prompts und mehrstufige Unterhaltungen funktionieren über eine Anthropic-ähnliche Nachrichtenstruktur.
  • Mit Apidog können Sie dieselben Prompts gegen Puter-Prototypen und eine spätere offizielle Anthropic-API-Integration vergleichen.

Wie das Abrechnungsmodell funktioniert

Puter.js ist eine browserbasierte Cloud- und KI-Bibliothek. Der zentrale Unterschied zur direkten Anthropic-Integration:

  • Sie speichern keinen Anthropic-API-Key.
  • Ihr Backend muss keine Claude-Aufrufe signieren.
  • Der Benutzer meldet sich bei Puter an.
  • Die Nutzung läuft über das Guthaben des jeweiligen Puter-Kontos.

Für Entwickler bedeutet das:

  1. Kein API-Key im Frontend oder Repository

    Kein Schlüssel, kein Leak-Risiko, keine Rotation.

  2. Keine zentrale Entwicklerabrechnung

    Jeder Benutzer bringt seine eigene Nutzung mit.

  3. Schneller Prototyping-Pfad

    Besonders geeignet für statische Websites, Hackathon-Projekte, Browser-Apps und Demos.

Der wichtigste Kompromiss: Puter.js ist browserzentriert. Für Cron-Jobs, Discord-Bots, serverseitige Batch-Verarbeitung oder API-Endpunkte ist die offizielle Anthropic API weiterhin die passendere Option.

Schritt 1: Puter.js einbinden

Für eine statische Seite reicht ein Script-Tag:

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

Minimalbeispiel:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Claude mit 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(
        "Erkläre Quantencomputing in einfachen Worten.",
        { model: "claude-sonnet-4-6" }
      );

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

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

Wenn Sie eine gebündelte App mit Vite, Webpack oder ähnlichen Tools bauen, können Sie stattdessen das Paket verwenden:

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

Für den schnellsten Einstieg ist das CDN-Tag meist ausreichend. Für TypeScript-Projekte oder größere Frontends ist der NPM-Import praktischer.

Schritt 2: Claude-Modell auswählen

Puter stellt Claude-Modelle über Modell-IDs bereit. Die Auswahl hängt vom Anwendungsfall ab:

Modell-ID Wann verwenden?
claude-opus-4-7 Für besonders anspruchsvolle Reasoning-, Coding- und Agentenaufgaben
claude-opus-4-6 Starke Code-Erstellung und komplexe Aufgaben
claude-opus-4.6-fast Opus-Variante mit Fokus auf geringere Latenz
claude-opus-4-5 Stabile Option für komplexere Produktionsszenarien
claude-opus-4-1 Älteres, gut einschätzbares Opus-Modell
claude-opus-4 Basislinie der Opus-4-Reihe
claude-sonnet-4-6 Guter Standard für tägliche Entwicklungs- und Chat-Aufgaben
claude-sonnet-4-5 Frühere Sonnet-Version für allgemeine Aufgaben
claude-sonnet-4 Basislinie der Sonnet-4-Reihe
claude-haiku-4-5 Schnelle Antworten, Klassifizierung, einfache Transformationen

Praktische Startpunkte:

  • Verwenden Sie claude-sonnet-4-6 als Standardmodell.
  • Verwenden Sie claude-haiku-4-5, wenn Latenz wichtiger ist als maximale Tiefe.
  • Verwenden Sie claude-opus-4-7, wenn der Prompt komplexe Planung, tiefe Codeanalyse oder mehrstufiges Reasoning benötigt.

Schritt 3: Einen einfachen Chat-Aufruf bauen

Der kleinste funktionierende Aufruf sieht so aus:

<!DOCTYPE html>
<html>
<body>
  <script src="https://js.puter.com/v2/"></script>
  <script>
    puter.ai.chat(
      "Erklären Sie Quantencomputing in einfachen Worten",
      { model: "claude-sonnet-4-6" }
    ).then(response => {
      puter.print(response.message.content[0].text);
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Die Antwortstruktur ähnelt der Anthropic Messages API:

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

Für reine Textantworten reicht meist der erste Content-Block. Wenn Sie mit mehrteiligen Antworten arbeiten, sollten Sie alle Blöcke iterieren:

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

Schritt 4: Fehlerbehandlung ergänzen

Für Prototypen reicht der Minimalcode. Für eine echte UI sollten Sie Ladezustand und Fehler anzeigen:

<button id="run">Prompt senden</button>
<pre id="output"></pre>

<script src="https://js.puter.com/v2/"></script>
<script>
  const output = document.getElementById("output");
  const button = document.getElementById("run");

  button.addEventListener("click", async () => {
    output.textContent = "Lade...";

    try {
      const response = await puter.ai.chat(
        "Gib mir drei Ideen für eine REST-API-Teststrategie.",
        { model: "claude-sonnet-4-6" }
      );

      output.textContent = response.message.content[0].text;
    } catch (error) {
      console.error(error);
      output.textContent = "Fehler beim Claude-Aufruf. Details siehe Konsole.";
    }
  });
</script>
Enter fullscreen mode Exit fullscreen mode

Das ist besonders wichtig, weil der Benutzer sich gegebenenfalls zuerst bei Puter anmelden muss.

Schritt 5: Streaming aktivieren

Für längere Antworten ist Streaming deutlich angenehmer. Aktivieren Sie es mit stream: true:

const response = await puter.ai.chat(
  "Schreiben Sie einen detaillierten Aufsatz über die Auswirkungen künstlicher Intelligenz auf die Gesellschaft.",
  {
    model: "claude-sonnet-4-6",
    stream: true
  }
);

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

Für eine eigene Chat-Oberfläche hängen Sie jeden Chunk an ein DOM-Element an:

const output = document.getElementById("output");

const stream = await puter.ai.chat(
  "Erstelle eine Schritt-für-Schritt-Anleitung für API-Mocking.",
  {
    model: "claude-sonnet-4-6",
    stream: true
  }
);

output.textContent = "";

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

Schritt 6: Mehrstufige Unterhaltungen verwalten

Für Chatverläufe übergeben Sie ein Array von Nachrichten:

const messages = [
  {
    role: "user",
    content: "Ich entwickle eine Next.js-App mit Postgres."
  },
  {
    role: "assistant",
    content: "Verstanden. Wobei benötigen Sie Hilfe?"
  },
  {
    role: "user",
    content: "Wie soll ich den Migrationsordner strukturieren?"
  }
];

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

In einer echten App speichern Sie den Verlauf clientseitig:

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

Wichtig: Je länger der Verlauf wird, desto mehr Kontext wird mitgeschickt. Für lange Chats sollten Sie ältere Nachrichten zusammenfassen oder gezielt kürzen.

Schritt 7: System-Prompts verwenden

System-Prompts definieren Rolle, Stil, Einschränkungen und Ausgabeformat:

const messages = [
  {
    role: "system",
    content:
      "Sie sind ein erfahrener Backend-Ingenieur. Antworten Sie in nummerierten Punkten und mit maximal fünf Punkten."
  },
  {
    role: "user",
    content: "Wie verhindere ich SQL-Injection in einer Node-App?"
  }
];

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

Gute System-Prompts sind konkret:

const systemPrompt = `
Sie sind ein API-Reviewer.
Prüfen Sie die folgende OpenAPI-Spezifikation.
Antworten Sie mit:
1. Kritischen Fehlern
2. Sicherheitsrisiken
3. Verbesserungen für Developer Experience
4. Konkreten Änderungsvorschlägen
`;
Enter fullscreen mode Exit fullscreen mode

Modelle mit demselben Prompt vergleichen

Um ein passendes Modell zu wählen, testen Sie denselben Prompt gegen mehrere Modelle:

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

const prompt =
  "Refaktorisieren Sie diese React-Komponente, um Hooks zu verwenden: ...";

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

Bewerten Sie nicht nur die Antwortqualität, sondern auch:

  • Latenz
  • Antwortlänge
  • Konsistenz bei wiederholten Runs
  • Qualität bei Randfällen
  • Eignung für Ihren konkreten UI-Flow

Für viele Anwendungen ist claude-sonnet-4-6 ein sinnvoller Default. claude-haiku-4-5 eignet sich für schnelle Klassifizierung oder einfache Texttransformationen. claude-opus-4-7 sollten Sie für Aufgaben reservieren, bei denen bessere Reasoning-Qualität den Mehraufwand rechtfertigt.

Wenn Sie Puter mit einer späteren offiziellen Anthropic-Integration vergleichen möchten, können Sie in Apidog separate Umgebungen für Prototyp und Produktion pflegen.

Was Sie bekommen — und was nicht

Puter.js ist praktisch, aber nicht identisch mit einer direkten Backend-Integration über die offizielle Anthropic API.

Sie bekommen:

  • Zugriff auf Claude-Modelle über eine einfache Browser-API
  • Mehrstufige Unterhaltungen
  • System-Prompts
  • Streaming-Antworten
  • Keine Verwaltung eigener Anthropic-Keys
  • Kein zentrales Abrechnungsrisiko für Ihr Projekt

Sie bekommen möglicherweise nicht oder nur eingeschränkt:

  • Native Tool-Nutzung / Function Calling, abhängig vom aktuellen Puter-Funktionsumfang
  • Vision-Eingaben wie Bildanhänge
  • Direkte Kontrolle über Anthropic-spezifisches Prompt-Caching
  • Serverseitige Nutzung ohne Browserkontext
  • Direkte Einsicht in Anthropic-Rate-Limit-Header

Für Workflows mit komplexer Tool-Nutzung, MCP-Servern oder Backend-Automatisierung bietet die offizielle Anthropic API mehr Kontrolle. Für MCP-bezogene Tests siehe auch MCP-Server-Testing in Apidog.

Wann Sie Puter verwenden sollten

Verwenden Sie Puter.js, wenn:

  • Sie eine browserbasierte Demo oder öffentliche App bauen.
  • Sie keine eigene Anthropic-Abrechnung verwalten möchten.
  • Sie schnell prototypen wollen.
  • Ihre App ohne Backend auskommen soll.
  • Ihre Benutzer einen Puter-Login akzeptieren.

Verwenden Sie die offizielle Anthropic API, wenn:

  • Sie serverseitige Jobs, Cron-Prozesse oder Backend-Endpunkte haben.
  • Sie Tool-Nutzung, Vision oder Files-Workflows benötigen.
  • Sie Prompt-Caching gezielt zur Kostenoptimierung einsetzen wollen.
  • Sie Compliance-Anforderungen vertraglich abdecken müssen.
  • Ihre Benutzer keinen zusätzlichen Login-Schritt akzeptieren.

Ein praktikabler Weg ist: mit Puter prototypen, Produktlogik validieren und bei Bedarf später auf die offizielle API migrieren. Da die Nachrichtenstruktur ähnlich ist, bleibt die Migration überschaubar.

Für das GPT-Äquivalent siehe Wie man die GPT-5.5 API verwendet.

Die Integration mit Apidog testen

Puter-Aufrufe laufen im Browser. Ein klassischer Backend-Test-Runner kann sie daher nicht direkt wie eine normale REST-API testen. Ein praktikabler Testaufbau:

  1. Erstellen Sie eine kleine statische Testseite mit Puter.js.
  2. Übergeben Sie den Prompt per Query-Parameter oder Formularfeld.
  3. Loggen Sie Modell, Prompt, Antwort und Laufzeit im Browser.
  4. Pflegen Sie in Apidog parallel die spätere Anthropic-API-Struktur.
  5. Vergleichen Sie beide Pfade über separate Umgebungen.

Laden Sie Apidog herunter und legen Sie zwei Umgebungen an:

  • puter-prototype

    Beispiel: http://localhost:5173

  • anthropic-prod

    Beispiel: https://api.anthropic.com/v1

So können Sie Prompts, erwartete Antworten und spätere API-Verträge an einem Ort dokumentieren.

Beispiel: Prompt über URL testen

Eine einfache Testseite kann den Prompt aus der URL lesen:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Puter Claude Test</title>
</head>
<body>
  <pre id="output">Lade...</pre>

  <script src="https://js.puter.com/v2/"></script>
  <script>
    async function main() {
      const params = new URLSearchParams(window.location.search);
      const prompt = params.get("prompt") || "Sag Hallo in einem Satz.";
      const model = params.get("model") || "claude-sonnet-4-6";

      const output = document.getElementById("output");

      try {
        const start = performance.now();

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

        const elapsed = performance.now() - start;

        output.textContent = JSON.stringify(
          {
            model,
            elapsedMs: Math.round(elapsed),
            prompt,
            response: response.message.content[0].text
          },
          null,
          2
        );
      } catch (error) {
        output.textContent = String(error);
      }
    }

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

Aufruf im Browser:

http://localhost:5173/?model=claude-sonnet-4-6&prompt=Erkläre%20API-Mocking
Enter fullscreen mode Exit fullscreen mode

Damit erhalten Sie einen reproduzierbaren Prototyp, den Sie später mit einer serverseitigen Anthropic-Route vergleichen können.

FAQ

Ist das wirklich unbegrenzt?

Aus Entwicklersicht gibt es keine zentrale Anthropic-Abrechnung über Ihr Konto. Die tatsächliche Nutzung hängt vom Puter-Konto und Guthaben des jeweiligen Endbenutzers ab.

Muss ich mich bei Anthropic anmelden?

Nein. Bei diesem Ansatz verwalten Sie keinen Anthropic-API-Key.

Kann ich das in Produktion verwenden?

Ja, für browserbasierte Apps, wenn der Puter-Login für Ihre Benutzer akzeptabel ist. Für serverseitige Produktionslogik sollten Sie die offizielle Anthropic API prüfen.

Verhält sich Claude über Puter identisch zur offiziellen API?

Die Modellantworten sollten grundsätzlich aus demselben Claude-Modell stammen. Die verfügbare API-Oberfläche, Latenz und Zusatzfunktionen können sich jedoch von der direkten Anthropic API unterscheiden.

Was ist mit Prompt-Caching?

Wenn Sie Anthropic-spezifisches Prompt-Caching gezielt steuern möchten, ist die offizielle API der bessere Weg.

Kann ich Puter in einem Discord-Bot oder Backend-Dienst verwenden?

Nicht sauber, da Puter.js browserzentriert ist und eine Benutzersitzung voraussetzt. Für Bots und Backends verwenden Sie besser die offizielle Anthropic API.

Welches Modell sollte ich standardmäßig verwenden?

claude-sonnet-4-6 ist ein guter Startpunkt. Wechseln Sie zu claude-opus-4-7 für tiefere Analyse und zu claude-haiku-4-5 für schnelle, einfache Aufgaben.

Zusammenfassung

Puter.js ist ein schneller Weg, Claude in browserbasierte Apps einzubauen, ohne einen eigenen Anthropic-API-Key zu verwalten. Die Integration ist minimal: Skript einfügen, Modell wählen, puter.ai.chat() aufrufen.

Für Prototypen, statische Websites, Hackathon-Projekte und kostenlose öffentliche Tools ist dieser Ansatz besonders praktisch. Für serverseitige Workloads, Tool-Nutzung, Prompt-Caching oder Compliance-Anforderungen bleibt die offizielle Anthropic API die robustere Option.

Erstellen Sie Ihre Testfälle in Apidog, vergleichen Sie Puter-Prototypen mit einer offiziellen API-Integration und migrieren Sie erst dann, wenn Ihr Anwendungsfall es wirklich erfordert.

Top comments (0)