Building a Chat App with APIs: Intro to the Claude / GPT API

LLM APIs Work in "30 Lines of Code"

Want to embed ChatGPT or Claude into your app? The basic use actually works in 30 lines after installing each company's SDK. This article explains the first run, comparing the 2 major APIs—Claude (Anthropic) and GPT (OpenAI)—side by side.

Getting an API Key

OpenAI

• Go to platform.openai.com → "API keys"
• Create a new key → shown only once, so copy it
• Credit deposit needed (from USD 5)

Anthropic

• console.anthropic.com → "API Keys"
• Create a new key → likewise shown only once
• Credit deposit needed (from USD 5)

Environment Setup

# Node.js
npm install @anthropic-ai/sdk openai

# Python
pip install anthropic openai

API keys in .env:

ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...

First Call (Node.js TypeScript)

Claude

import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic();

const msg = await client.messages.create({
  model: "claude-opus-4-5",
  max_tokens: 1024,
  messages: [{ role: "user", content: "What are today's things to see in Tokyo?" }],
});

console.log(msg.content[0].text);

OpenAI GPT

import OpenAI from "openai";
const client = new OpenAI();

const res = await client.chat.completions.create({
  model: "gpt-5.4",
  messages: [{ role: "user", content: "What are today's things to see in Tokyo?" }],
});

console.log(res.choices[0].message.content);

Common Interface: Vercel AI SDK

To handle both (and Gemini etc.) with a unified interface:

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

const { text } = await generateText({
  model: openai("gpt-5.4"),
  prompt: "What are today's things to see in Tokyo?",
});

Conversation Form (Multi-Turn)

Stack past exchanges in the messages array:

messages: [
  { role: "user", content: "What are today's things to see in Tokyo?" },
  { role: "assistant", content: "Today..." },
  { role: "user", content: "Narrow to places fun even in rain" },
]

System Prompt

Give the AI a role:

// Claude
client.messages.create({
  model: "claude-opus-4-5",
  system: "You are a polite travel guide.",
  messages: [...]
});

// OpenAI
messages: [
  { role: "system", content: "You are a polite travel guide." },
  { role: "user", content: "..." }
]

Pricing Sense

• Claude Opus 4.5: input USD 15 / 1M tokens, output USD 75 / 1M tokens
• GPT-5.4: input USD 10 / 1M tokens, output USD 30 / 1M tokens
• 1 token ≒ 0.75 words (English) / 0.5 chars (Japanese)
• A typical chat = hundreds to thousands of tokens

For personal dev you can try it for USD 5-20/month. In production, also consider Active CPU billing or Provisioned Throughput.

Sticking Points

• Key leakage: don't commit API keys to GitHub. Add .env to .gitignore
• Rate limit: retry on 429 (exponential backoff)
• Token overflow: split text exceeding max_tokens

What to Learn Next

Following articles proceed to streaming, Tool Use, structured output, full Vercel AI SDK use, and cloud-via APIs (Bedrock / Vertex).