Leon4gr45/builder

1---2title: OSW Studio3emoji: 🤖4colorFrom: indigo5colorTo: yellow6sdk: docker7app_port: 78608pinned: false9license: mit10hf_oauth: true11hf_oauth_scopes:12  - inference-api13  - contribute-repos14tags:15  - ai16  - web-development17  - code-generation18  - llm19  - agent20  - low-code21short_description: Agentic Browser-based Website Builder22---23 24<div align="center">25  <img src="public/osw-studio-logo.svg" alt="OSW Studio Logo" width="128" height="128" />26 27# Open Source Web Studio28 29### Build websites through natural language conversations with agentic AI30 31[![GitHub Stars](https://img.shields.io/github/stars/o-stahl/osw-studio?style=social)](https://github.com/o-stahl/osw-studio/stargazers)32[![License](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)33[![Live Demo](https://img.shields.io/badge/Demo-Try%20Now-success)](https://huggingface.co/spaces/otst/osw-studio)34[![Version](https://img.shields.io/badge/Version-1.84.0-blue)](https://github.com/o-stahl/osw-studio/releases)35[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/o-stahl/osw-studio/pulls)36[![Discord](https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white)](https://discord.gg/mAJ8Ss4u)37 38[Try it Now](https://huggingface.co/spaces/otst/osw-studio) · [Documentation](docs/README.md) · [Discord](https://discord.gg/mAJ8Ss4u) · [GitHub](https://github.com/o-stahl/osw-studio)39 40---41 42<img src="public/osws-demo.gif" alt="OSW Studio Demo" width="800" />43 44</div>45 46## Overview47 48**OSW Studio** is an AI-powered development platform where you build and maintain websites and web apps through natural language conversations.49 50Static sites have always been fast, cheap to host, and secure. The tradeoff was that maintaining them required technical skill. OSW Studio removes that tradeoff - describe what you want, and AI handles the implementation.51 52**For developers:** Skip the boilerplate. Rapid prototyping, full code access when you need it, and an AI that understands your project's context.53 54**For everyone else:** Finally maintain the site that was built for you. Add blog posts, update business hours, swap team photos - without filing a support ticket or hiring an agency.55 56**What you get:**57- **Multiple runtimes** - Static (HTML/CSS/JS), Handlebars (templated websites), React, Preact, Svelte, Vue, Python, Lua58- **Sandboxed agent** - AI operates in a virtual file system with automatic checkpoints - explore freely, rollback anytime59- **Dual AI modes** - Chat (exploration, planning) + Code (full implementation)60- **Multi-provider AI** - OpenRouter (200+ models), OpenAI, Anthropic, Google Gemini, Groq, HuggingFace, MiniMax, Zhipu AI, SambaNova, Ollama, LM Studio, llama.cpp, mesh-llm61- **Full IDE** - Monaco editor, live preview, file explorer, multi-tab support62- **Templates & Skills** - Reusable project templates (with bundled backend infrastructure) and AI workflow guides63- **Export anywhere** - Download as ZIP, deploy to Vercel/Netlify/GitHub Pages64- **Optional Server Mode** - Self-host a multi-user platform with workspaces, publishing, SEO, analytics, and admin dashboard65 66**Perfect for:** Business websites, landing pages, portfolios, documentation sites, blogs, React apps, interactive tools67 68**Two modes:** Browser Mode (build and export as ZIP) or [Server Mode](#server-mode-optional) (self-hosted platform with workspaces, databases, APIs, and publishing)69 70## 🚀 Quick Start71 72Get started in **3 steps**:73 74```bash75# 1. Clone and install76git clone https://github.com/o-stahl/osw-studio.git77cd osw-studio78npm install79 80# 2. Start development server81npm run dev82```83 84**3. Open browser and start building:**85 861. ✅ Get an API key from [OpenRouter](https://openrouter.ai), [OpenAI](https://platform.openai.com), or run [Ollama](https://ollama.ai) locally872. ✅ Open http://localhost:3000883. ✅ Click settings → Select provider → Enter API key894. ✅ Create project → Describe your website905. ✅ Export as ZIP → Deploy anywhere91 92**Try the hosted version:** [Live Demo](https://huggingface.co/spaces/otst/osw-studio) (no installation required)93 94## Key Features95 96### Development Environment97- **Monaco Editor** - Full-featured code editor with syntax highlighting, IntelliSense98- **Live Preview** - Hot reload, instant updates as AI builds99- **File Explorer** - Tree view with right-click context menus100- **Multi-tab Support** - Work on multiple files simultaneously101- **Handlebars Templates** - Build reusable components with partials102 103### AI Capabilities104- **Dual Modes**:105  - 💬 **Chat Mode** - Exploration, planning, Q&A106  - 🔧 **Code Mode** - Full implementation with file operations107- **13 LLM Providers** - OpenRouter, OpenAI, Anthropic Claude, Google Gemini, Groq, HuggingFace, MiniMax, Zhipu AI, SambaNova, Ollama, LM Studio, llama.cpp, mesh-llm108- **200+ Models** - From tiny 4B tool models to SOTA frontier models109- **Smart Agent** - Uses shell commands for all file operations, with explicit build verification and status evaluation110- **Skills System** - Teach AI your workflow preferences with Anthropic-style skills111 112### Project Management113- **Templates** - Export/import reusable project templates (.oswt files)114- **Checkpoints** - Rollback to any point in conversation with per-message restore115- **Export Options** - ZIP deployment packages or .osws backups (full history)116- **Project Gallery** - Grid/list views with screenshots, search, sorting117 118## What Can You Build?119 120| ✅ Browser Mode | Details |121|----------------|---------|122| **Landing Pages** | Marketing sites, product pages, SaaS homepages |123| **Portfolios** | Personal websites, photography, design portfolios |124| **Documentation** | Project docs, help centers, knowledge bases |125| **Blogs** | Static blogs with templates and navigation |126| **Framework Apps** | React, Preact, Svelte, Vue with in-browser bundling via esbuild |127| **Scripts** | Python (Pyodide) and Lua (wasmoon) with interactive Console |128| **Client-side Apps** | Calculators, tools, games, interactive demos |129 130| ✅ Server Mode | Details |131|----------------|---------|132| **Dynamic Websites** | Contact forms, comment systems, user submissions via Edge Functions |133| **Database-backed Apps** | CRUD apps, dashboards, admin panels with per-deployment SQLite |134| **Blogs & CMS** | Static posts with Handlebars partials, comments via Edge Functions |135| **API Backends** | REST APIs with database access, secrets management, auth flows |136| **Multi-user Platform** | Workspaces with shared access, quotas, and per-workspace isolation |137 138See [Server Mode](#server-mode-optional) for full details.139 140## How It Works141 142OSW Studio uses an agentic AI system with a single tool:143 1441. **Shell Tool** - File system operations and editing (`ls`, `cat`, `grep`, `find`, `mkdir`, `rm`, `mv`, `cp`, `sed -i`, `cat >`, `echo >`, `tree`, `head`, `tail`, `build`, `status`)145 146The `status` command signals task completion — the AI must articulate what it did and what remains before finishing.147 148**Command validation** → **Execution** → **Checkpoint** → **Continue**149 150The agent runs entirely in your browser, operating on a virtual file system (IndexedDB). You describe what you want, AI handles the implementation.151 152## Model Recommendations153 154### ✅ Recommended Models (Tool Calling)155- **Gemini 3** - Good pricing, speed and quality, best value currently156- **Haiku 4.5** - Reasonable pricing, speed and quality157- **GLM4.7, GLM4.6, GLM4.5 & air** - Fast, reliable and cheap, among SOTA for webdev158- **Grok Code Fast 1** - Good balance of speed, quality and price159- **Kimi K2** - Good balance of speed, quality and price160- **gpt-oss-120b & 20b** - Strong agentic capabilities161- **Qwen3 series** - Some models perform better than others, but functional across the board162- **DeepSeek v3.2, v3.1 and R1** - Can handle most tasks, but not optimized for this use case163- **Claude Sonnet 4.5 & Opus 4.5** - Good, but can rack up a large bill quickly (Gemini 3 is much better value)164- **SOTA models** - Generally SOTA models will perform, but come with a higher pricing165 166### ⚠️ Models Without Tool Calling (JSON Parsing Fallback)167- DeepSeek V3, Qwen2.5, Gemma3, Mistral-small, Granite 3.x, Llama4 Maverick/Scout168 169**Rule of thumb:** A 4B tool-calling model typically outperforms a 70B non-tool model for this use case. Models released after summer 2025 should work well.170 171## Supported Providers172 173**Local (Free, Private):**174- [Ollama](https://ollama.ai) - Run models locally (no API key)175- [LM Studio](https://lmstudio.ai) - Local model hosting176- [llama.cpp](https://github.com/ggerganov/llama.cpp) - Lightweight C++ inference server177- [mesh-llm](https://github.com/michaelneale/mesh-llm) - Peer-to-peer network for free open-model inference178 179**Cloud:**180- [OpenRouter](https://openrouter.ai) - 200+ models, pay-per-use181- [OpenAI](https://platform.openai.com) - GPT-4, GPT-5 series (+ ChatGPT subscription)182- [Anthropic](https://console.anthropic.com) - Claude 3/4 series183- [Google](https://aistudio.google.com) - Gemini models184- [Groq](https://console.groq.com) - Fast inference185- [HuggingFace](https://huggingface.co) - Free tier ($0.10/month), 120+ models186- [MiniMax](https://platform.minimaxi.com) - MiniMax models187- [Zhipu AI](https://open.bigmodel.cn) - GLM series188- [SambaNova](https://sambanova.ai) - High-performance models189 190## File Support191 192| Type | Formats | Limits |193|------|---------|--------|194| **Code** | HTML, CSS, JS/JSX, TS/TSX, JSON, HBS, Svelte, Vue, Python, Lua | 5MB per file |195| **Docs** | TXT, MD, XML, SVG | 5MB per file |196| **Media** | PNG, JPG, GIF, WebP, MP4, WebM | 10MB images, 50MB video |197 198## Server Mode (Optional)199 200OSW Studio runs client-side by default (Browser Mode). For advanced use cases, enable **Server Mode**:201 202### Browser Mode (Default)203- ✅ Client-side only, no backend required204- ✅ IndexedDB storage (stays in browser)205- ✅ Deploy to Vercel, Netlify, HuggingFace206- ✅ Complete privacy207- ✅ Zero configuration208 209### Server Mode (Optional)210- ✅ **Workspaces** - Isolated environments with own projects, deployments, and quotas211- ✅ **Multi-user** - User accounts with shared workspace access and admin management212- ✅ SQLite persistence (no external database setup)213- ✅ Static site publishing to `/deployments/{deploymentId}/`214- ✅ Edge Functions - JavaScript API endpoints with database access215- ✅ Scheduled Functions - Run edge functions on cron schedules216- ✅ Per-deployment SQLite databases (WAL mode) with SQL editor217- ✅ Secrets management (AES-256-GCM encrypted)218- ✅ SEO controls - Meta tags, Open Graph, Twitter Cards, auto-sitemap219- ✅ Built-in analytics (privacy-focused) or external (GA4, Plausible)220- ✅ Compliance - Cookie consent banners with GDPR/CCPA support221- ✅ Custom scripts - Inject head/body scripts, CDN resources222- ✅ Project sync (IndexedDB ↔ SQLite)223- ✅ Custom domains via reverse proxy224- ✅ **Server-Side Generation** - AI tasks continue on server if browser disconnects, with automatic reattach on reconnect225- ✅ Site Templates - Create from templates with automatic backend provisioning226 227**Quick Start (Server Mode):**228 229```bash230# 1. Configure .env231NEXT_PUBLIC_SERVER_MODE=true232SESSION_SECRET=$(openssl rand -base64 32)233ANALYTICS_SECRET=$(openssl rand -base64 32)234SECRETS_ENCRYPTION_KEY=$(openssl rand -base64 32)235 236# 2. Start server (SQLite databases created automatically)237npm install && npm run dev238 239# 3. Visit http://localhost:3000/admin — create admin account on first visit240```241 242**Documentation:**243- [Server Mode Guide](docs/SERVER_MODE.md) - Full setup and features244- [Multitenancy Guide](docs/MULTITENANCY.md) - Workspaces, users, quotas245- [Backend Features](docs/BACKEND_FEATURES.md) - Edge Functions, Secrets, Database246 247## Tech Stack248 249- **Framework**: Next.js 15.5, React 19, TypeScript250- **UI**: TailwindCSS v4, Radix UI primitives251- **Editor**: Monaco Editor (VS Code engine)252- **Storage**: IndexedDB (browser), SQLite (server mode)253- **AI**: 13 LLM provider integrations254- **Templating**: Handlebars.js for components255- **Export**: JSZip for deployment packages256 257## Architecture258 259```260/components/       # React UI components (workspace, editor, preview)261/lib/vfs/          # Virtual file system with checkpoints262/lib/llm/          # AI orchestration, tool execution, providers263/app/api/          # API routes (generation, models, validation)264/docs/             # Comprehensive documentation265```266 267## Debugging268 269### Environment Variables270 271Create `.env`:272 273```bash274# Log level: error, warn, info, debug (default: warn)275NEXT_PUBLIC_LOG_LEVEL=warn276 277# Tool streaming debug (default: 0)278NEXT_PUBLIC_DEBUG_TOOL_STREAM=0279```280 281### Troubleshooting282 283- **Generation fails** → Check DevTools console (F12)284- **Model compatibility** → Test at `/test-generation`285- **Tool issues** → Enable `DEBUG_TOOL_STREAM=1`286- **Rate limits** → Watch for toast notifications287- **Local providers** → Ensure Ollama/LM Studio running288 289## Privacy290 291- **API keys** - Stored in browser `localStorage` (never sent to OSW Studio servers)292- **Network calls** - Direct to AI providers or via optional proxy endpoints293- **Data storage** - Projects stay in IndexedDB (browser mode) or SQLite (server mode)294- **Complete privacy** - Use Ollama/LM Studio for 100% local operation295- **Anonymous telemetry** - Lightweight usage analytics (page views, provider/model selection, task success rates) help improve OSW Studio. No prompts, code, file names, or API keys are ever collected. A random anonymous ID in localStorage counts unique visitors — no cookies, no fingerprinting. Opt out anytime in Settings, or disable entirely with `NEXT_PUBLIC_TELEMETRY_ENABLED=false`296 297**Note:** Remote LLM providers (OpenAI, Anthropic, etc.) will receive your code during generation. For complete privacy, use local models.298 299## Limitations300 301- **No package managers** - Static projects use CDN links for libraries; framework projects (React, Preact, Svelte, Vue) auto-resolve npm imports via esm.sh302- **Browser Mode** - Client-side projects only, no backend (use Server Mode for APIs/databases)303 304## Contributing305 306OSW Studio is a **solo-maintained, community-driven** project. Contributions welcome!307 308**Ways to help:**309- 🐛 [Report bugs](https://github.com/o-stahl/osw-studio/issues)310- 💡 [Request features](https://github.com/o-stahl/osw-studio/issues)311- 🔀 [Submit pull requests](https://github.com/o-stahl/osw-studio/pulls)312- 📣 Share what you've built (open an issue or discussion!)313 314**Built something cool?** I'd love to see it! Share your creations in GitHub Discussions or open an issue with screenshots.315 316## License317 318MIT License - See [LICENSE](LICENSE) file for details319 320## 🙏 Credits321 322**Original Inspiration:**323- [@enzostvs](https://github.com/enzostvs) & [@victor](https://github.com/victor) - DeepSite v2 (original fork source)324- [Hugging Face](https://huggingface.co) - Hosting platform325 326**Technical Inspiration:**327- [Google AI Studio](https://aistudio.google.com) - App Builder workflow328- [OpenAI Codex CLI](https://github.com/openai/codex-cli) - Agentic patterns329- [Anthropic Claude](https://www.anthropic.com) - Agentic patterns330 331**Special Thanks:**332- All open source contributors making projects like this possible333- The AI community for pushing boundaries334 335---336 337**Note:** OSW Studio is not affiliated with Anthropic, OpenAI, Google, Hugging Face, or other mentioned organizations. All trademarks belong to their respective owners.338