Build beautiful, zero-dependency HTML presentations through natural language conversation with Claude.
- Conversational Interface: Chat with Claude to create presentations
- Smart Content Discovery: Guided questions to understand your needs
- Style Previews: Choose from 3 unique design styles
- Real-time Preview: See your presentation as it's built
- Single HTML Export: Download as a standalone HTML file
- Iterative Editing: Request changes conversationally
spark/
├── frontend/ # React + TypeScript + Vite
├── backend/ # Node.js + Express + TypeScript
└── shared/ # Shared type definitions
- Node.js 20+
- npm or yarn
- Anthropic API key (Get one here)
- Daytona account (Sign up here)
# Install frontend dependencies
cd frontend
npm install
# Install backend dependencies
cd ../backend
npm install# Copy example env file
cp .env.example backend/.env
# Edit backend/.env and add your keys:
# - DAYTONA_API_KEY=your_key_here- Sign up at https://www.daytona.io/
- Create API Key in Settings → API Keys
- Create workspace template "spark-html-generator":
- Base image:
node:20-alpine - CPU: 0.5 cores
- Memory: 512 MB
- Timeout: 30 minutes
- Base image:
- Add API key to
backend/.env
# Terminal 1 - Backend
cd backend
npm run dev
# Terminal 2 - Frontend
cd frontend
npm run devThe frontend will be available at http://localhost:5173
- Enter API Key: Provide your Anthropic API key (stored locally)
- Content Discovery: Chat with Claude about your presentation
- What is it for? (pitch, teaching, conference, internal)
- How many slides? (short, medium, long)
- Content ready? (ready, notes, topic only)
- Style Selection: (Future) Choose from 3 generated style previews
- Generation: Claude creates your complete HTML presentation
- Iterate: Request modifications ("make title bigger", "change color to blue")
- Export: Download your presentation as a single HTML file
- ✅ Conversational interface with Claude Opus 4.5
- ✅ Real-time streaming responses
- ✅ Session management with auto-cleanup
- ✅ Content discovery through natural conversation
- ✅ Automatic HTML detection and preview
- ✅ Iterative editing support
- ✅ Single-file HTML export
- ✅ Split-pane layout (chat + preview)
- ✅ Iframe-based presentation preview
- ✅ Fullscreen presentation mode
- ✅ Loading states and progress indicators
- ✅ Error boundary for crash recovery
- ✅ Toast notifications
- ✅ Responsive design
- ✅ TypeScript throughout
- ✅ Server-Sent Events for streaming
- ✅ Zustand state management
- ✅ TailwindCSS styling
- ✅ API key validation
- ✅ In-memory session storage
- ✅ Daytona service (mock for MVP)
To enhance the MVP:
- Integrate Real Daytona: Replace mock sandbox with actual Daytona SDK
- Style Previews: Complete the style generation and preview flow
- PPT Import: Add Mode B (import existing PowerPoint files)
- More Styles: Expand style library beyond 3 options
- Collaboration: Add sharing and real-time co-editing
- Templates: Pre-built templates for common use cases
- Analytics: Track usage and generation statistics
- Open the app and enter your Anthropic API key
- Answer 3 content discovery questions
- Select from 3 generated style previews
- Watch as Claude generates your presentation
- Request modifications ("make title bigger")
- Export as a single HTML file
✅ MVP Complete! All phases implemented and ready for testing.
- Phase 0: Project Setup & Configuration
- Phase 1: Authentication & API Key Flow
- Phase 2: Basic Chat Interface
- Phase 3: Content Discovery Questions
- Phase 4: Style Preview Generation
- Phase 5: Full HTML Generation
- Phase 6: Iteration & Export
- Phase 7: Polish & Error Handling
Frontend:
- React 19
- TypeScript
- Vite
- TailwindCSS
- Zustand (state management)
- Axios (HTTP client)
Backend:
- Node.js 20+
- Express 5
- TypeScript
- Anthropic SDK
- Daytona SDK (planned)
MIT