Claude Chat

Beautiful mobile-first chat interface for two-way communication with Claude Code. Runs behind Tailscale VPN for secure access.

Features

• Session Management - Multiple chat sessions, each with its own history
• Native Mobile Feel - Smooth animations, touch gestures, PWA support
• Real-time Updates - Messages appear automatically (2s polling)
• Image Support - Attach and send images
• Backwards Compatible - Works with existing Claude Code /sms skill

Quick Start

cd web
npm install
npm run dev

The app runs on http://0.0.0.0:3000

Production Build

cd web
npm run build
node build

Access from your phone

1. Make sure your phone is on Tailscale
2. Open http://<server-tailscale-ip>:3000 in your browser
3. Add to home screen for native app experience

How Claude Code uses it

The API is backwards compatible with the original Flask server:

# Send a message (from Claude)
curl -X POST http://localhost:3000/api/send \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello from Claude!"}'

# Check for replies
curl http://localhost:3000/api/messages

New Session-based API

# List all sessions
curl http://localhost:3000/api/sessions

# Create a new session
curl -X POST http://localhost:3000/api/sessions \
  -H "Content-Type: application/json" \
  -d '{"name": "Project Discussion"}'

# Get messages for a session
curl http://localhost:3000/api/sessions/<session-id>/messages

# Send a message to a session
curl -X POST http://localhost:3000/api/sessions/<session-id>/messages \
  -H "Content-Type: application/json" \
  -d '{"sender": "claude", "message": "Hello!"}'

Run as a service

Create /etc/systemd/system/claude-chat.service:

[Unit]
Description=Claude Chat Server
After=network.target

[Service]
Type=simple
User=your-user
WorkingDirectory=/path/to/mobile_agent/web
ExecStart=/usr/bin/node build
Restart=always
Environment=PORT=3000
Environment=HOST=0.0.0.0

[Install]
WantedBy=multi-user.target

Then:

sudo systemctl enable claude-chat
sudo systemctl start claude-chat

Tech Stack

• Frontend: SvelteKit + TypeScript + Tailwind CSS
• Backend: SvelteKit API routes
• Database: SQLite (better-sqlite3)
• Styling: Custom dark theme with mobile-first design