← All Docs

Getting Started

Quick Start Guide

Go from idea to live app in under 60 seconds. This guide walks you through signing up, describing your first app, and sharing it with the world.

No coding required. Webase uses AI to generate a complete, working React app from your plain-English description. You can refine it with chat, edit code directly, or let AI improve it automatically.

Getting Started

1

Create Your Free Account

Head to webase.com and click Sign Up. Enter your email address and choose a password. That's it — no credit card required. The Free plan gives you 3 apps and 30 messages per month to get started.

2

Describe Your App

Once you're logged in, you'll see the New Application page. In the text field, describe what you want your app to do in plain English. Be as specific or as general as you like — the AI will fill in the details.

Here are some example descriptions to inspire you:

  • "A personal task manager with categories, due dates, and a progress dashboard" — Great for productivity apps with multiple features.
  • "A recipe book where I can save recipes, rate them, and search by ingredient" — Shows how to describe data-driven apps.
  • "A simple landing page for my photography business with a gallery, about section, and contact form" — Perfect for websites and portfolios.
  • "A habit tracker that lets me log daily habits and see weekly streaks" — Demonstrates apps with tracking and visualization.

Tip: The more detail you provide, the closer the first version will be to what you have in mind. Mention specific features, color preferences, or layout ideas if you have them. But don't worry about getting it perfect — you can always refine later.

3

Watch the AI Generate Your App

After you submit your description, Webase's AI gets to work immediately. You'll see the AI's response stream in real-time in the Chat panel on the left side of the editor. The AI creates all the files your app needs — React components, styles, configuration, and more.

This typically takes between 15 and 45 seconds depending on the complexity of your app. You can watch the file list grow in the Code tab as each file is generated.

4

See Your Live Preview

Once the AI finishes generating files, the Preview panel on the right side of the editor automatically bundles and renders your app. You'll see a brief bundling spinner, and then your fully functional app appears right in the browser.

The preview is a live, interactive version of your app. You can click buttons, fill in forms, navigate between pages, and test every feature — all without leaving the editor.

5

Share Your App

Every app you create on Webase gets a unique preview URL that you can share with anyone. Click the Save button in the toolbar to persist your app's current state. Your app will be available at a URL like:

webase.com/preview/my-task-manager

Anyone with this link can view and interact with your app — no login required. It's a great way to share prototypes with friends, teammates, or clients.

What Just Happened?

Behind the scenes, Webase did quite a lot in those 60 seconds:

  • AI generation — The AI analyzed your description and produced a complete set of React and TypeScript source files, including components, pages, styles, and configuration.
  • Client-side bundling — Your browser compiled all those source files into a working application using a built-in bundler. No server-side build step needed.
  • Live preview — The compiled app was loaded into an iframe so you can interact with it immediately.
  • Persistent storage — When you save, the compiled HTML is stored so your preview URL always shows the latest version.

Next Steps

Your app is live, but this is just the beginning. Here's what you can do next:

  • Refine with chat — Send messages like "add a dark mode toggle" or "change the header color to blue" in the Chat panel. The AI will update your files instantly. See Chat-Based Refinement for more.
  • Edit code directly — Switch to the Code tab to browse and edit any file by hand. See Direct Code Editing.
  • Add data models — Give your app a real backend with structured data storage. See Data Models Overview.
  • Run an evaluation — Let the AI review your app for quality issues and fix them automatically. See App Evaluation.
  • Deploy to Netlify — Publish your app to a custom domain for production use. See Deploying to Netlify.

Ready to dive deeper? Continue to Understanding the Editor for a full tour of the Webase workspace, or jump straight to Your First App for a step-by-step tutorial.