---
title: "Vibe Coding Platform "
description: "An end to end text-to-app coding platform"
url: "https://vercel.com/templates/next.js/vibe-coding-platform"
links:
  repository: "https://github.com/vercel/examples/tree/main/apps/vibe-coding-platform"
  demo: "https://oss-vibe-coding-platform.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Vibe+Coding+Platform+&demo-description=An+end+to+end+text-to-app+coding+platform&demo-url=https%3A%2F%2Foss-vibe-coding-platform.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FWt6jnxAtBGWapPn2hphXX%2Ff482eba41754f65e70f4e05c2eb9544c%2Fimage.png&project-name=Vibe+Coding+Platform+&repository-name=vibe-coding-platform&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fapps%2Fvibe-coding-platform&from=templates&skippable-integrations=1&envDescription=Set+a+random+secret+to+use+for+authentication.&project-names=Comma+separated+list+of+project+names%2Cto+match+the+root-directories"
---

# Vibe Coding Platform 

An end to end text-to-app coding platform

An open-source vibe coding platform built with Next.js, AI SDK, GPT-5, and the Vercel AI Cloud. The platform combines real-time AI interactions with safe sandboxed execution environments and framework-defined infrastructure.

## Getting Started

First, run the development server:

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev
    # or
    bun dev

Open http://localhost:3000 in your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

## How it Works
### Frontend

The frontend is built with Next.js and AI SDK. User messages are submitted through the sendMessage API, which forwards the prompt and selected model (default GPT-5) to the backend.

Once deployed, Vercel automatically provisions infrastructure to:

Serve the frontend quickly through the Vercel CDN.

Handle API calls with Vercel Functions.

### Backend

The backend runs as a function on Fluid compute, optimized for prompt-based workloads. Since LLMs often idle while reasoning, Fluid compute reallocates unused cycles to serve other requests or reduce cost.

    const result = streamText({
      model: "openai/gpt-5",
      system: prompt,
      messages,
      stopWhen: stepCountIs(20),
      tools
    });

The API call is powered by the AI SDK. It handles the conversation history, verifies the user with Vercel BotID, and routes through AI Gateway automatically.

### Sandboxed Execution

AI responses stream into an ephemeral sandbox. Each sandbox is stateless, isolated, and expires after a short timeout. It has no access to your projects or data, making it safe to run arbitrary code.

The sandbox streams real-time updates back to the frontend so users see progress instantly:

    {
      "type": "data-run-command",
      "data": {
"status": "done",
"sandboxId": "sbx_123",
"command": "npm install",
"commandId": "cmd_abc"
      }
    }

### Security

The platform protects high-value API calls with BotID for advanced bot detection and Vercel Firewall for rate limiting.

## Related Templates

### [Nuxt AI Chatbot](https://vercel.com/templates/nuxt/nuxt-ai-chatbot)

An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI SDK.

### [ChatGPT Plugin Starter: WeatherGPT](https://vercel.com/templates/next.js/weathergpt)

The ultimate ChatGPT Plugin starter template. WeatherGPT is a ChatGPT Plugin to get the weather of any given location.

### [Chatbot UI](https://vercel.com/templates/next.js/chatbot-ui)

A ChatGPT clone for running locally in your browser.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.