README

AI Prompt Pad

A minimal, modern AI chat interface with streaming responses built with React TypeScript frontend and Golang REST API backend.

Features

Real-time streaming AI responses
Clean, modern UI with gradient effects
Multi-turn conversations
Stop generation mid-stream
Keyboard shortcuts (Enter to send, Shift+Enter for newline)
Comprehensive Playwright E2E tests
Hot-reload development with Docker

Tech Stack

Frontend:

React 18 with TypeScript
Vite for fast development
Server-Sent Events (SSE) for streaming
Playwright for E2E testing

Backend:

Golang 1.21
REST API with SSE streaming
CORS enabled
Air for hot-reload development

Quick Start

Using Docker (Recommended)

bash

# Start everything (backend + frontend)
./dev-all.sh

# Stop everything
./stop-dev.sh

The app will be available at:

Frontend: http://localhost:3001
Backend API: http://localhost:8082

Manual Setup

Backend:

bash

cd backend
go mod download
go run main.go

Frontend:

bash

cd frontend
npm install
npm run dev

Running Tests

Playwright E2E Tests

bash

cd frontend

# Install Playwright browsers (first time only)
npx playwright install

# Run all tests
npm run test

# Run tests in UI mode
npm run test:ui

# Debug tests
npm run test:debug

Test Coverage

The Playwright test suite includes:

Initial page load and UI rendering
Prompt input and validation
Streaming response generation
Multi-turn conversations
Conversation clearing
Keyboard shortcuts (Enter, Shift+Enter)
Stop generation functionality
Error handling
Auto-scrolling behavior

Project Structure

shell

prompt-pad/
├── backend/
│   ├── main.go              # Go REST API server
│   ├── go.mod               # Go dependencies
│   ├── Dockerfile           # Backend container
│   └── .air.toml            # Hot-reload config
├── frontend/
│   ├── src/
│   │   ├── App.tsx          # Main React component
│   │   ├── App.css          # Styles
│   │   ├── main.tsx         # React entry point
│   │   └── index.css        # Global styles
│   ├── tests/
│   │   └── prompt-pad.spec.ts  # Playwright tests
│   ├── playwright.config.ts # Playwright configuration
│   ├── package.json         # NPM dependencies
│   ├── vite.config.ts       # Vite configuration
│   └── Dockerfile           # Frontend container
├── docker-compose.yml       # Docker orchestration
├── dev-all.sh              # Start dev environment
└── stop-dev.sh             # Stop dev environment

API Endpoints

POST /api/generate

Streams AI-generated response for a given prompt.

Request:

json

{
  "prompt": "Your prompt here"
}

Response: Server-Sent Events (SSE) stream

shell

data: {"content": "Hello", "done": false}
data: {"content": " world", "done": false}
data: {"content": "", "done": true}

GET /api/health

Health check endpoint.

Response:

json

{
  "status": "ok"
}

Development

Hot Reload

Both frontend and backend support hot-reload:

Frontend: Vite automatically reloads on file changes
Backend: Air watches .go files and rebuilds

Customization

Mock AI Response: Edit generateMockResponse() in backend/main.go to customize the simulated AI behavior.

Integrate Real AI: Replace the mock function with calls to:

OpenAI API
Anthropic Claude
Local LLM (Ollama, LM Studio)
Any streaming-capable AI service

Styling: Edit frontend/src/App.css to customize the look and feel.

Production Deployment

Build Frontend

bash

cd frontend
npm run build
# Output in frontend/dist/

Build Backend

bash

cd backend
go build -o prompt-pad-server main.go

Environment Variables

bash

# Backend
PORT=8082

# Frontend (build time)
VITE_API_URL=https://your-api-domain.com

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)

License

MIT

Contributing

Fork the repository

Create a feature branch

Make your changes

Run tests: npm run test

Submit a pull request

Troubleshooting

Port already in use:

bash

# Change ports in docker-compose.yml or
# Kill existing processes
lsof -ti:3001 | xargs kill -9
lsof -ti:8082 | xargs kill -9

Playwright tests failing:

bash

# Reinstall browsers
npx playwright install --with-deps

Docker issues:

bash

# Clean rebuild
docker-compose down -v
docker-compose up --build

Future Enhancements

[ ] Authentication
[ ] Conversation history persistence
[ ] Multiple AI model selection
[ ] Export conversations
[ ] Dark/light theme toggle
[ ] Mobile responsive design improvements
[ ] File upload support
[ ] Code syntax highlighting
[ ] Markdown rendering