a containerized next.js application with claude code integration via trpc api
- next.js app - built with bun, typescript, tailwind css
- trpc api - type-safe api for communication with claude code
- claude code integration - sends prompts to claude code sdk for code modification
- docker support - containerized deployment with docker and docker-compose
- hot reload - development environment with automatic reloading
- bun (or npm/yarn)
- docker & docker-compose
- anthropic api key for claude code
- install dependencies:
bun install- set environment variable:
export ANTHROPIC_API_KEY="your-api-key"- run development server:
bun run dev- create
.envfile:
echo "ANTHROPIC_API_KEY=your-api-key" > .env- run with docker-compose:
docker compose down && docker compose build --no-cache && docker compose upthe app exposes a trpc endpoint at /api/trpc/click.sendToClaudeCode that accepts:
{
prompt: string, // the prompt to send to claude code
context?: any // optional context data
}response format:
{
success: boolean,
results: Array<{
type: 'result' | 'text' | 'tool_use',
content: any,
timestamp: string
}>,
request: object
}.
├── src/
│ ├── app/ # next.js app router
│ ├── server/ # trpc server & api
│ ├── utils/ # utility functions
│ └── claude-code-handler.ts # claude code sdk integration
├── public/ # static assets
├── Dockerfile # production docker image
└── docker-compose.yml # docker compose configuration
ANTHROPIC_API_KEY- required for claude code api accessNODE_ENV- set to 'production' for production buildsPORT- server port (default: 3000)
- ensure bun.lock file exists (run
bun installlocally first) - check docker daemon is running
- verify anthropic api key is set correctly
- check api key has proper permissions
- ensure port 3000 is not in use
- check docker logs:
docker logs <container-name>
mit