{"id":50687998,"url":"https://github.com/x-eight/vibe-coding-platform","last_synced_at":"2026-06-09T00:32:56.575Z","repository":{"id":358857932,"uuid":"1243395580","full_name":"x-eight/vibe-coding-platform","owner":"x-eight","description":"An in-browser AI coding assistant \u0026 full-stack workspace. Compile, install dependencies, run dev servers, and preview web apps in real-time completely inside the browser using Next.js, LangChain, WebContainers API, and Vercel Sandbox. ","archived":false,"fork":false,"pushed_at":"2026-05-19T09:56:51.000Z","size":229,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-19T12:38:24.796Z","etag":null,"topics":["ai","developer-tools","gemini","in-browser-ide","langchain","nextjs","openai","react","sandbox","serverless","tailwindcss","typescript","vibe-coding","wasm","web-development","webassembly","webcontainers","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/x-eight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-19T09:53:35.000Z","updated_at":"2026-05-19T10:02:05.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/x-eight/vibe-coding-platform","commit_stats":null,"previous_names":["x-eight/vibe-coding-platform"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/x-eight/vibe-coding-platform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-eight%2Fvibe-coding-platform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-eight%2Fvibe-coding-platform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-eight%2Fvibe-coding-platform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-eight%2Fvibe-coding-platform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/x-eight","download_url":"https://codeload.github.com/x-eight/vibe-coding-platform/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-eight%2Fvibe-coding-platform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34086664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","developer-tools","gemini","in-browser-ide","langchain","nextjs","openai","react","sandbox","serverless","tailwindcss","typescript","vibe-coding","wasm","web-development","webassembly","webcontainers","zustand"],"created_at":"2026-06-09T00:32:56.433Z","updated_at":"2026-06-09T00:32:56.570Z","avatar_url":"https://github.com/x-eight.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vibe Coding Platform ⚡\n\n[![Next.js](https://img.shields.io/badge/Next.js-15.0%2B-black?style=for-the-badge\u0026logo=next.js)](https://nextjs.org/)\n[![LangChain](https://img.shields.io/badge/LangChain-Enabled-1C3C3C?style=for-the-badge\u0026logo=chainlink\u0026logoColor=white)](https://js.langchain.com/)\n[![Zustand](https://img.shields.io/badge/Zustand-State_Management-navy?style=for-the-badge)](https://zustand-demo.pmnd.rs/)\n[![WebContainers](https://img.shields.io/badge/WebContainers-In--Browser_OS-purple?style=for-the-badge\u0026logo=webassembly\u0026logoColor=white)](https://webcontainers.io/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v4-38B2AC?style=for-the-badge\u0026logo=tailwind-css)](https://tailwindcss.com/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](LICENSE)\n\nAn advanced, production-grade **Vibe Coding Platform** that empowers users to build, edit, install dependencies, and execute full-stack web applications completely in the browser using AI. \n\nLeveraging cutting-edge technologies like WebAssembly-powered browser sandboxing (**WebContainers**), cloud compute isolation (**Vercel Sandbox**), and real-time streaming LLM orchestration via **LangChain**, this platform represents the next generation of AI-assisted, zero-config software engineering environments.\n\n---\n\n## ⚡ System Architecture \u0026 Execution Flow\n\nThis platform combines a streaming AI compiler with dual execution sandboxes. The flowchart below details how a user prompt is compiled into real-time in-browser previews:\n\n```mermaid\nflowchart TD\n    subgraph Client [Browser Client]\n        UI[Workspace UI] --\u003e|1. Prompt + API Keys| API_Chat\n        UI --\u003e|Keys persisted locally| LocalStore[(Browser LocalStorage)]\n    end\n\n    subgraph Server [Next.js Server API]\n        API_Chat[\"/api/chat Route\"] --\u003e|2. Resolves keys and prompt| LangChain[LangChain Agent]\n        LangChain --\u003e|3. Streaming Markdown Blocks| API_Chat\n    end\n\n    subgraph Execution [Dual Sandbox Engine]\n        API_Chat --\u003e|4. SSE Streaming Chunk| UI\n        UI --\u003e|5. Regex Parser| FileParser[Code \u0026 File Parser]\n        \n        FileParser --\u003e|6a. Direct File System Writes| WebContainer[WebContainer API WA Sandbox]\n        FileParser -.-\u003e|6b. Cloud Sandbox Route| VercelSandbox[Vercel Sandbox Cloud]\n        \n        WebContainer --\u003e|7. npm install offline| WC_Deps[Sandboxed node_modules]\n        WebContainer --\u003e|8. npm run dev| WC_Server[In-Browser Server Ready Event]\n        \n        WC_Server --\u003e|9. Exposes localhost URL| Iframe[Live Preview Iframe]\n        WC_Server --\u003e|10. Streams stdout/stderr| Terminal[Logs Panel]\n    end\n\n    classDef client fill:#1E293B,stroke:#3B82F6,stroke-width:2px,color:#fff;\n    classDef server fill:#0F172A,stroke:#10B981,stroke-width:2px,color:#fff;\n    classDef exec fill:#020617,stroke:#8B5CF6,stroke-width:2px,color:#fff;\n    class Client client;\n    class Server server;\n    class Execution exec;\n```\n\n---\n\n## ✨ Features\n\n- **💻 In-Browser WebContainer Sandbox**: Runs full-stack Node.js environments inside a secure browser WebAssembly sandbox via `@webcontainer/api`. Users can run actual dev servers, write files, and inspect outputs with zero local dependencies.\n- **☁️ Cloud Vercel Sandbox Fallback**: Integrated Cloud Sandbox support through `@vercel/sandbox` allowing the generation and execution of environments in fully isolated remote runtimes.\n- **🤖 LangChain Streaming (OpenAI \u0026 Gemini)**: Orchestrated streaming via LangChain (`@langchain/openai` and `@langchain/google`). Markdown code blocks are compiled and streamed chunk-by-chunk using Server-Sent Events (`text/event-stream`).\n- **🛡️ Advanced Security Shield**:\n  - **Zero credential leaks**: No hardcoded API keys exist in the codebase.\n  - **Dual API Key Routing**: Developers can input and persist their own OpenAI and Gemini keys securely inside their browser `localStorage`, or fall back to secure backend server environment variables (`.env`).\n  - **Watertight `.gitignore`**: Pre-configured to ignore all forms of environment variables and sandbox operational artifacts.\n- **🧊 Premium Glassmorphic Workspace UI**:\n  - **Live Preview Panel**: Real-time rendering inside a sandboxed Iframe connected to the container port.\n  - **Code Inspector**: Interactive file explorer tree-view with individual file content tabs.\n  - **Live Telemetry Terminal**: Color-coded, ANSI-stripped system log terminal tracking package installs and server output.\n- **📦 Ultra-Fast Sandboxed Installation**: Executed with speed optimization flags (`--prefer-offline`, `--no-audit`, `--no-fund`) minimizing registry lookups inside the sandbox.\n\n---\n\n## 📂 Project Directory Structure\n\n```bash\n├── LICENSE                  # MIT License\n├── README.md                # Project documentation \u0026 architecture guides\n├── .gitignore               # Multi-environment secret protection\n├── .env.example             # Clean template configuration for environment setups\n├── package.json             # Scripts, LangChain, Zustand \u0026 WebContainer dependencies\n├── tsconfig.json            # Strict TypeScript configuration\n├── lib\n│   ├── store.ts             # Centralized Zustand state store \u0026 streaming block parsers\n│   ├── utils.ts             # Style merging helper utilities\n│   └── webcontainer.ts      # WebContainer API boots, commands \u0026 event listeners\n├── components\n│   ├── chat-panel.tsx       # Prompt input \u0026 streaming assistant message threads\n│   ├── file-explorer.tsx    # Tree-view directory manager for compiled files\n│   ├── header.tsx           # Model selectors \u0026 secure client-side key config modals\n│   ├── logs-panel.tsx       # Live sandboxed console terminal\n│   ├── preview-panel.tsx    # Multi-tab view container (Preview Iframe, Code, Console)\n│   ├── tab-bar.tsx          # Tab switching manager\n│   ├── theme-provider.tsx   # Global dark mode theme provider\n│   └── vibe-coding-platform.tsx # High-level workspace layout wrapper\n└── app\n    ├── api\n    │   ├── chat             # SSE router carrying LangChain prompt templates\n    │   └── sandbox          # API endpoint spinning up Vercel Cloud Sandboxes\n    ├── globals.css          # Tailwind CSS styling framework\n    ├── layout.tsx           # Primary HTML header structures\n    └── page.tsx             # Next.js workspace viewport entrypoint\n```\n\n---\n\n## 🛠️ Getting Started\n\n### 1. Clone \u0026 Install Dependencies\n\nEnsure you have **Node.js 18+** installed locally:\n\n```bash\ngit clone https://github.com/x-eight/vibe-coding-platform.git\ncd vibe-coding-platform\npnpm install # or npm install\n```\n\n### 2. Configure Environment Variables\n\nCreate a `.env` file in the root directory (automatically ignored by Git). You can copy the template:\n\n```bash\ncp .env.example .env\n```\n\nOpen `.env` and configure your fallback keys:\n\n```env\n# Google Gemini API Key\nGEMINI_API_KEY=your_gemini_api_key_here\n\n# OpenAI API Key\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\u003e Note: If no backend variables are set, the application will prompt users to configure their own keys in the **Settings Dialog** (Key Icon 🔑) inside the app header. Client-side keys are stored securely inside the browser's local sandbox.\n\n### 3. Spin Up local dev environment\n\nStart the local Next.js development server:\n\n```bash\npnpm dev\n# or\nnpm run dev\n```\n\nNavigate your browser to [http://localhost:3000](http://localhost:3000) to open the interactive AI workspace!\n\n---\n\n## 🔒 Security Best Practices\n\nWhen publishing this repository or hosting it publicly, keep the following security structures in mind:\n\n1. **Shared Environment Variables**: If deploying on public hosters like Vercel, do not input personal keys in the public `.env` file. Utilize the hoster's environment panel or rely entirely on client-side key storage.\n2. **Cross-Origin Isolation Headers**: WebContainers require SharedArrayBuffer capabilities. The application is pre-configured with security headers inside `next.config.mjs` to satisfy these requirements:\n   ```javascript\n   headers.push(\n     { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },\n     { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' }\n   );\n   ```\n\n---\n\n## ⚖️ License\n\nThis project is licensed under the MIT License. See `LICENSE` for more information.\n\nDeveloped with 💙 by [x-eight](https://github.com/x-eight).\n# vibe-coding-platform\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-eight%2Fvibe-coding-platform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fx-eight%2Fvibe-coding-platform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-eight%2Fvibe-coding-platform/lists"}