AI coding agent in your browser
Try it live: www.blankspace.build
What is Blank Space?
Open-source AI app builder. Fast, simple, self-hostable (optimized for mobile).
Architecture
┌─────────────────────────────────────────────────────────────────┐
│ FRONTEND │
│ src/ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ React + Vite │ │
│ │ │ │
│ │ components/ UI components (editor, preview, chat) │ │
│ │ contexts/ React contexts (auth, files, theme) │ │
│ │ hooks/ Custom React hooks │ │
│ │ services/ Business logic & AI orchestration │ │
│ │ ├── orchestration/ Multi-agent routing │ │
│ │ ├── tools/ LLM function calling tools │ │
│ │ ├── prompts/ Prompt templates │ │
│ │ └── utils/ Shared utilities │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
│ HTTP/REST API
▼
┌─────────────────────────────────────────────────────────────────┐
│ BACKEND API │
│ api/ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Vercel Serverless Functions │ │
│ │ │ │
│ │ chat.js OpenAI proxy (GPT-5, web search) │ │
│ │ gemini.js Google Gemini proxy (code generation) │ │
│ │ files.js File CRUD (Firebase Storage) │ │
│ │ conversations.js Conversation history │ │
│ │ user/ User profile, usage, quotas │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
│ External Services
▼
┌─────────────────────────────────────────────────────────────────┐
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ OpenAI │ │ Google │ │ Firebase │ │
│ │ GPT-5 │ │ Gemini │ │ Auth + DB │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Directory Structure
/
├── src/ # React frontend (Vite)
│ ├── components/ # UI components
│ ├── contexts/ # React contexts (auth, files, theme)
│ ├── hooks/ # Custom React hooks
│ ├── services/ # Business logic & AI orchestration
│ │ ├── orchestration/ # Multi-agent routing
│ │ ├── tools/ # LLM function calling tools
│ │ ├── prompts/ # Prompt templates
│ │ └── utils/ # Shared utilities
│ ├── styles/ # Global styles
│ └── templates/ # Project templates
│
├── api/ # Vercel serverless functions
│ ├── chat.js # OpenAI chat endpoint
│ ├── gemini.js # Gemini code generation
│ ├── files.js # File operations
│ ├── conversations.js # Conversation history
│ └── user/ # User endpoints
│
└── public/ # Static assets
Agent System
The orchestration layer routes user requests to specialized agents:
| Agent | Model | Purpose | Tools |
|---|---|---|---|
| Code Agent | Gemini 3 Flash/Pro | Code generation, debugging | read, write, edit, glob, grep, validate |
| Chat Agent | GPT-5-mini | General conversation, web search | None (single response) |
| Assistant Agent | GPT-5-mini | File operations on user storage | read_file, write_file, list_directory |
Data Flow
User Message
│
▼
Intent Classification (GPT-4o-mini)
│
├── "create" / "debug" ──→ Code Agent ──→ Gemini API
│ │
│ ▼
│ Tool Loop (read/write/validate)
│ │
│ ▼
│ Generated Files
│
├── "chat" ──→ Chat Agent ──→ OpenAI API (+ web search)
│ │
│ ▼
│ Text Response
│
└── "assistant" ──→ Assistant Agent ──→ OpenAI API
│
▼
File Operations (Firebase Storage)
Deployment
Vercel (Recommended)
npm install
vercel
Quick Start (Development)
# 1) Clone
git clone https://github.com/BrandeisPatrick/blank-space
cd blank-space
# 2) Configure
cp .env.example .env.local
# Edit .env.local with your API keys
# 3) Install & run
npm install
npm run dev
# open http://localhost:5173
Environment Variables
# Required
OPENAI_API_KEY=sk-...
GOOGLE_AI_API_KEY=...
# Firebase (for auth & storage)
FIREBASE_PROJECT_ID=...
FIREBASE_PRIVATE_KEY=...
FIREBASE_CLIENT_EMAIL=...
# Optional
USE_GPT5=true # Enable GPT-5 models
PRODUCTION_MODE=true # Use premium models everywhere
Roadmap
- Web app (current focus)
- iOS app
- Android app
- Your idea here? — open an issue!
Contributing
- Fork the repo
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
Apache 2.0 - see LICENSE for details.