Claude Web App Prototype

A web application that replicates the Claude chat experience with artifacts functionality for visualizations and interactive content.

🎯 Current Status - Phase 1 Complete

✅ Basic Flask Structure Created

• Flask app with routing
• Service architecture (Claude + Data services)
• JSON file-based data storage
• Template structure with modern HTML layout

🚀 Quick Start

1. Set up Python Environment

# Create virtual environment
python -m venv venv

# Activate it (Windows)
venv\Scripts\activate
# Or on macOS/Linux:
# source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

2. Configure Environment

Create a .env file in the root directory:

# Flask Configuration
FLASK_ENV=development
SECRET_KEY=your-secret-key-here

# Claude API Configuration (optional for testing)
ANTHROPIC_API_KEY=your-anthropic-api-key-here

3. Run the Application

python app.py

The app will be available at http://localhost:5000

📁 Project Structure

ClaudeSDKPrototype/
├── app.py                 # Main Flask application ✅
├── config.py             # Configuration settings ✅
├── requirements.txt       # Python dependencies ✅
├── services/
│   ├── __init__.py       # Services package ✅
│   ├── claude_service.py # Claude SDK integration ✅
│   └── data_service.py   # JSON file data management ✅
├── templates/
│   ├── base.html         # Base template ✅
│   └── index.html        # Main chat interface ✅
├── data/                 # Auto-created on first run
│   ├── conversations.json # Conversation storage
│   └── sample_data.json  # Sample datasets
└── tests/
    └── test_app.py       # Basic tests ✅

🛠️ Available Endpoints

• GET / - Main chat interface
• GET /api/health - Health check
• POST /api/chat - Send message to Claude
• GET /api/conversations - Get conversation history
• GET /api/sample-data - Get sample datasets

🧪 Testing

Run the tests:

python -m pytest tests/ -v

Or run individual test file:

python tests/test_app.py

🔧 Features Implemented

Core Infrastructure

• ✅ Flask application factory pattern
• ✅ Configuration management
• ✅ Service architecture
• ✅ JSON file-based storage
• ✅ Basic error handling

Claude Integration

• ✅ Claude API service wrapper
• ✅ Artifact detection and parsing
• ✅ Sample response generation (for testing without API key)
• ✅ Multiple artifact types support (HTML, JS, Python, SVG, JSON)

Data Management

• ✅ Conversation persistence to JSON
• ✅ Sample datasets for testing
• ✅ Safe file operations with error handling

Frontend Structure

• ✅ Modern HTML templates
• ✅ Claude-inspired layout design
• ✅ Artifacts panel structure
• ✅ Responsive design foundation

📋 Next Steps (Phase 2)

Ready to continue? The next phase will focus on:

1. Claude SDK Integration: Connect to real Claude API
2. Artifact Functionality: Implement artifact rendering
3. Sample Data Integration: Connect sample datasets
4. Basic Styling: Add CSS for the interface
5. JavaScript Functionality: Make the chat interactive

🔍 Notes

• No API Key Required: The app works without Claude API key using sample responses
• Auto-Setup: Data directory and JSON files are created automatically
• Development Ready: Configured for development with debug mode
• Test Coverage: Basic test suite included

---

Ready to move to Phase 2? Let me know and we'll start implementing the Claude SDK integration and artifacts functionality!