Ship a Full-Stack App with One Prompt

Copy this prompt into your AI coding agent, or open it in one below.

Give this to your AI Create a to-do list app using Puter.js

Coding manually? see the guide

Tutorials

How to Get an Anthropic (Claude) API Key: A Step-by-Step Guide

On this page

This guide shows you how to get an Anthropic API key. You'll create an Anthropic account, generate your key, and make your first API call, plus a free alternative for adding Anthropic models to your web app.

Prerequisites

  • An email address (or a Google account for single sign-on)
  • A payment method — Anthropic's API is usage-based
  • Basic familiarity with code (we'll show simple JavaScript examples)

Step 1: Create Your Anthropic Account

Go to platform.claude.com. This is the API platform where you manage your keys, billing, and usage.

Sign up or log in using your email or Google SSO. Once you're in, you'll land on the dashboard.

Anthropic console sign-up page Anthropic API console dashboard

Before your API key will work, you need to add a payment method. Go to the Billing page and add a credit card. Anthropic charges per token, and pricing varies by model. Set a monthly spending limit here to avoid surprises — you can always increase it later.

Step 2: Generate Your API Key

Still on the dashboard home page, click Get API key. A pop-up will appear.

Anthropic create new API key dialog

Give your key a descriptive name like my-app-dev so you can identify it later, then click Create Key.

Important: Copy the key immediately. Anthropic only shows it once. If you lose it, you'll need to generate a new one.

Store it somewhere safe — a password manager, an .env file, or your platform's secrets manager. Never commit API keys to a public repository.

Anthropic API key revealed with copy button

Step 3: Make Your First API Call

Now you're ready to use the key. Here's a quick example using the Anthropic JavaScript SDK:

npm install @anthropic-ai/sdk
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

const response = await client.messages.create({
  model: "claude-sonnet-5",
  max_tokens: 1024,
  messages: [{ role: "user", content: "Hello, world!" }],
});

console.log(response);

If you get a response back, everything is working. For the full set of endpoints and parameters, see Anthropic's official API docs.

Can You Use the Anthropic API for Free?

Creating an API key is free, but using it requires prepaid credits. Anthropic does not offer a permanent free API tier, and the API bills per token.

New API accounts receive a small one-time credit to test with. The amount is subject to change, and once it is spent there is no recurring free allowance, so check the billing page in the Claude Console after signup rather than counting on it. Claude.ai subscriptions (Pro, Max, Team) are billed separately and include no API credit.

Puter.js offers a different model. With its User-Pays model, you can add Anthropic models to your app for free: each user covers their own AI usage through their own Puter account, so your cost stays at $0 regardless of how many users you have, with no API key and no backend.

Add Anthropic models with the browser script tag:

<script src="https://js.puter.com/v2/"></script>
<script>
  puter.ai.chat("Explain quantum computing in simple terms", {
    model: "anthropic/claude-sonnet-5"
  }).then(response => {
    document.body.innerHTML = response.message.content;
  });
</script>

or the npm package:

import { puter } from '@heyputer/puter.js';

const response = await puter.ai.chat("Explain quantum computing in simple terms", {
  model: "anthropic/claude-sonnet-5"
});
console.log(response.message.content);

This fits front-end apps where your users sign into Puter: usage is tied to their accounts, and Puter.js runs in the browser, so it does not replace a server-side key for a backend you control. For a backend, see the pricing below.

How Much Does the Anthropic API Cost?

Anthropic bills per token, with separate input and output rates, so cost scales with usage instead of a flat fee. The newest model, Claude Fable 5, is $10 per 1M input tokens and $50 per 1M output. The flagship, Claude Opus 4.8, is $5 input and $25 output, while the cheapest, Claude Haiku 4.5, is $1 input and $5 output. API usage runs on prepaid credits billed through the Claude Console.

For the full breakdown, including the Batch and prompt-caching discounts and the per-token costs for thinking tokens and server-side tools, see our Anthropic API pricing guide.

Why Isn't My Key Working?

Most first-call failures trace back to a few errors:

  • 401, authentication_error: the key is wrong, was revoked, or picked up a stray space or newline when copied. Regenerate it and paste again.
  • 402, billing_error: there is a problem with your billing or payment information. Add or update a payment method and buy credits in the Claude Console, then retry.
  • 403, permission_error: the key does not have permission to use the requested resource. Check the key's scopes and your organization's settings.
  • 404, not_found_error: the resource was not found, usually a mistyped or unavailable model ID. Confirm the model name, like claude-sonnet-5.
  • 429, rate_limit_error: requests are going out faster than your tier allows. Add retries with exponential backoff, or move up a usage tier.
  • 529, overloaded_error: the API is temporarily overloaded. Wait and retry with backoff.

Most of these come back to billing, so check that first. For the full list of status and error codes, see Anthropic's error codes reference.

Conclusion

To get an Anthropic API key: sign up at platform.claude.com, add a payment method, then click Get API key and Create Key. From there you can make your first API call, or skip the key entirely and add Anthropic models to a web app for free with Puter.js.

Ship a Full-Stack App with One Prompt

Give this to your AI Build an AI chat app using Puter.js

Coding manually? see the guide