Claude Agent SDK Playground

Overview

This is a Next.js web application that demonstrates the capabilities of the Claude Agent SDK. It provides an interactive chat interface where you can communicate with Claude AI, which has the ability to execute various development tools directly on your local machine.

What It Does

This project creates a conversational AI assistant with real-world capabilities:

• Interactive Chat Interface: A modern, responsive chat UI built with React and Next.js

• Tool Execution: Claude can execute various development tools including:

  • Bash - Run shell commands
  • Read - Read files from the filesystem
  • Write - Create or modify files
  • Edit - Make precise edits to existing files
  • Glob - Search for files using patterns
  • Grep - Search for content within files
  • And more...

• Session Management: Maintains conversation context across multiple messages

• Real-time Streaming: Server-Sent Events (SSE) for smooth, real-time responses

• Tool Visibility: Visual feedback showing which tools Claude is using and their results

Key Features

• Built with Next.js 16 and React 19
• Modern UI components using shadcn/ui and Tailwind CSS
• TypeScript for type safety
• Dark mode interface
• Suggested prompts to get started quickly
• Server-side streaming with SSE
• Abort capability for long-running requests

Use Cases

This playground is ideal for:

• Exploring the Claude Agent SDK capabilities
• Understanding how to integrate AI agents into web applications
• Learning how to build tool-enabled AI assistants
• Prototyping AI-powered development tools

Technology Stack

• Framework: Next.js 16
• AI SDK: @anthropic-ai/claude-agent-sdk
• UI: React 19, Tailwind CSS, shadcn/ui
• Language: TypeScript
• Runtime: Node.js (required for tool execution)

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev