An interactive Next.js app that demonstrates every major feature of the Claude API from Anthropic. Enter your API key and test 16 features hands-on — from basic text generation to code execution, memory, and RAG.
Built for developers who want to learn the Claude API by seeing each feature in action with real, working code.
The Claude API has a lot of features — streaming, extended thinking, tool use, code execution, citations, memory, and more. The official docs are great, but there's nothing like actually running the API calls yourself and seeing what comes back.
This project gives you a single app where every feature is:
- Runnable — enter a prompt, hit a button, see real API responses
- Self-contained — each feature is one component + one API route, easy to copy into your own project
- Readable — no abstractions, no framework magic, just straightforward TypeScript
| Feature | What It Does | Key API Concept |
|---|---|---|
| Text Generation | Send a prompt, get a streamed response | messages.stream() with SSE |
| Vision | Upload an image, Claude describes it | Base64 image source in messages |
| Extended Thinking | See Claude's reasoning before the answer | thinking.budget_tokens parameter |
| Structured Outputs | Get JSON that matches your schema exactly | output_config.format with JSON schema |
| Citations | Responses grounded in source documents | citations: { enabled: true } on documents |
| PDF Support | Upload and analyze PDF files | Base64 PDF document source |
| Effort Control | Trade speed/cost for response quality | output_config.effort (low/medium/high/max) |
| Search Results (RAG) | Feed search results, get cited answers | search_result content blocks |
| Feature | What It Does | Key API Concept |
|---|---|---|
| Tool Use | Claude calls your custom functions | Client-side tools with agentic loop |
| Web Search | Claude searches the web in real-time | web_search_20250305 server tool |
| Web Fetch | Claude fetches and reads a URL | web_fetch_20250910 server tool |
| Code Execution | Claude writes and runs code in a sandbox | code_execution_20250825 server tool |
| Memory | Claude stores/recalls info across turns | memory_20250818 client tool |
| Feature | What It Does | Key API Concept |
|---|---|---|
| Token Counting | Count tokens before sending a request | messages.countTokens() |
| Prompt Caching | Cache system prompts to save costs | cache_control: { type: "ephemeral" } |
| Batch Processing | Send multiple requests at 50% cost savings | messages.batches.create() |
Claude shows its step-by-step reasoning in a collapsible panel before giving the final answer. You control the thinking budget (how many tokens Claude can "think" for).
Claude cites exact passages from your source document. Hover over the highlighted text to see which part of the document it came from.
Claude writes code, creates files, and runs them in a secure sandbox. Every step streams in real-time — you see the code being written, the command being run, and the output.
Browser Next.js Server Claude API
┌─────────────┐ ┌──────────────────┐ ┌───────────┐
│ React │ POST /api/... │ API Route │ SDK call │ Anthropic │
│ Component │ ──────────────>│ (creates client │ ──────────> │ Messages │
│ │ x-api-key │ with your key) │ │ API │
│ │ <──────────────│ │ <────────── │ │
│ Renders │ SSE stream │ Streams response │ Response │ │
│ response │ or JSON │ back to browser │ │ │
└─────────────┘ └──────────────────┘ └───────────┘
Your API key stays in your browser's localStorage. It's sent as an x-api-key header to the Next.js API routes, which create a fresh Anthropic SDK client for each request. The key is never stored on the server.
claude-features/
├── app/
│ ├── page.tsx # Main page — sidebar nav + feature panel
│ ├── layout.tsx # Root layout with API key provider
│ └── api/ # One API route per feature
│ ├── chat/route.ts # Text generation (streaming SSE)
│ ├── vision/route.ts # Image analysis
│ ├── thinking/route.ts # Extended thinking (streaming)
│ ├── structured/route.ts # Structured JSON outputs
│ ├── citations/route.ts # Document citations
│ ├── pdf/route.ts # PDF analysis
│ ├── effort/route.ts # Effort level control
│ ├── search-results/route.ts # RAG with search_result blocks
│ ├── tools/route.ts # Custom tool use (agentic loop)
│ ├── web-search/route.ts # Web search server tool
│ ├── web-fetch/route.ts # Web fetch server tool
│ ├── code-execution/route.ts # Code execution server tool
│ ├── memory/route.ts # Memory client tool (agentic loop)
│ ├── token-count/route.ts # Token counting
│ ├── prompt-caching/route.ts # Prompt caching demo
│ └── batch/route.ts # Batch processing
├── components/
│ ├── features/ # One component per feature
│ │ ├── text-generation.tsx # Each has its own UI, state, and
│ │ ├── vision.tsx # streaming logic — fully self-contained
│ │ ├── extended-thinking.tsx
│ │ ├── structured-outputs.tsx
│ │ ├── citations.tsx
│ │ ├── pdf-support.tsx
│ │ ├── effort-control.tsx
│ │ ├── search-results.tsx
│ │ ├── tool-use.tsx
│ │ ├── web-search.tsx
│ │ ├── web-fetch.tsx
│ │ ├── code-execution.tsx
│ │ ├── memory.tsx
│ │ ├── token-counting.tsx
│ │ ├── prompt-caching.tsx
│ │ └── batch-processing.tsx
│ ├── api-key-provider.tsx # React context for API key + localStorage
│ ├── feature-card.tsx # Shared card wrapper for features
│ ├── model-selector.tsx # Model dropdown (Sonnet/Haiku/Opus)
│ ├── markdown.tsx # Markdown renderer for responses
│ └── ui/ # shadcn/ui components
└── types/
└── index.ts # Feature list, model types
Every feature follows the same pattern:
-
Component (
components/features/xyz.tsx) — React component with a form, a "Run" button, and a results area. Sends aPOSTto the matching API route with the API key in thex-api-keyheader. -
API Route (
app/api/xyz/route.ts) — Creates an Anthropic SDK client using the API key from the request header, calls the Claude API with feature-specific parameters, and returns the response.
For streaming features (text generation, extended thinking, code execution, web fetch), the API route returns a ReadableStream with Server-Sent Events (SSE). The component reads these events incrementally and updates the UI as chunks arrive.
For tool use features (tool use, memory), the API route runs an agentic loop — it sends the initial request, checks if Claude wants to call a tool, executes the tool, sends the result back, and repeats until Claude is done.
For non-streaming features (structured outputs, citations, PDF, token counting, prompt caching, batch), the API route returns plain JSON.
- Node.js 18+ installed
- A Claude API key from Anthropic
git clone https://github.com/robcost/claude-features-app.git
cd claude-features-app
npm installnpm run devOpen http://localhost:3000 in your browser. Enter your API key in the sidebar and start exploring.
The model selector on each feature lets you choose:
| Model | Best For |
|---|---|
| Sonnet 4.6 | Default — fast, capable, cost-effective |
| Haiku 4.5 | Fastest responses, lowest cost |
| Opus 4.6 | Most capable, complex reasoning |
| Technology | Purpose |
|---|---|
| Next.js 16 | App Router, API routes, React Server Components |
| TypeScript | Type safety throughout |
| Tailwind CSS v4 | Styling |
| shadcn/ui | UI components (buttons, cards, inputs, collapsibles) |
| @anthropic-ai/sdk | Official Anthropic SDK for API calls |
| react-markdown | Rendering markdown in responses |
If you're new to the Claude API, here's a suggested order to explore the features:
- Text Generation — Start here. This is the basic
messages.create()call with streaming. Every other feature builds on this. - Structured Outputs — See how
output_config.formatconstrains Claude to return valid JSON matching your schema. - Extended Thinking — Watch Claude reason step-by-step before answering. Great for understanding how reasoning models work.
- Tool Use — The most important advanced feature. Learn how Claude calls your functions and how the agentic loop works.
- Code Execution — See how server-side tools differ from client-side tools. Claude writes and runs code autonomously.
- Citations — Understand how to ground Claude's responses in source documents for verifiable answers.
- Everything else — Explore the remaining features in any order.
For each feature, read the component file first (it shows the full client-side flow), then the API route (it shows the exact SDK call).
- Your API key is stored only in your browser's localStorage
- It's sent to the Next.js API routes via the
x-api-keyHTTP header - API routes use it to create a fresh SDK client, then discard it
- The key is never logged, stored on disk, or sent anywhere except to the Anthropic API
- For production use, you'd want server-side key management instead
MIT
Built with Claude Code using the Anthropic API.