Your First App

This guide walks you through building a complete app from start to finish. By the end, you'll have a fully working task manager with categories, due dates, and a clean interface — all built through natural conversation with AI and refined to production quality.

Step 1: Writing a Good App Description

The quality of your initial description directly impacts how close the first version is to what you want. A few extra seconds spent on a clear description can save several rounds of refinement later.

Tips for Clear Descriptions

• State the purpose — Start with what the app does. "A task manager for personal productivity" is better than "a cool app."
• List key features — Mention the specific features you want. "With categories, due dates, priority levels, and a dashboard" gives the AI concrete targets.
• Describe the look and feel — If you have visual preferences, include them. "Clean, modern design with a dark sidebar and light content area" helps the AI make better design choices.
• Mention user interactions — Describe what users should be able to do. "Users can create tasks, mark them complete, filter by category, and see overdue items highlighted in red."
• Don't over-specify — You don't need to describe every detail. The AI fills in sensible defaults for anything you don't mention. Focus on what matters most to you.

Step 2: Generate Your Task Manager

Let's build a task manager. From your Webase dashboard, click New Application and enter a description like this:

A personal task manager app. Users can create tasks with a title, description, due date, and priority (low, medium, high). Tasks can be organized into categories like Work, Personal, and Shopping. The main view shows all tasks grouped by category with overdue tasks highlighted. Include a dashboard at the top showing total tasks, completed tasks, and overdue count. Use a clean, modern design with a blue and white color scheme.

Click Generate and watch as the AI creates your app. In the Chat panel, you'll see the AI explain what it's building. In about 20 to 40 seconds, your complete task manager will appear in the Preview panel.

Step 3: Review the Generated Files

Switch to the Code tab to see all the files the AI created. A typical task manager app might include:

• src/index.tsx — The app entry point that mounts the React application.
• src/App.tsx — The main component with routing and layout structure.
• src/components/TaskForm.tsx — A form for creating and editing tasks.
• src/components/TaskList.tsx — Displays tasks grouped by category.
• src/components/TaskCard.tsx — An individual task card showing title, due date, and priority.
• src/components/Dashboard.tsx — The summary stats panel at the top.
• src/components/CategoryFilter.tsx — Buttons or tabs for filtering by category.
• public/index.html — The HTML template with Tailwind CSS configuration.

Click on any file to view its contents. You don't need to understand the code to use Webase, but browsing the files can help you see how the app is structured and give you ideas for what to change.

Step 4: Refine with Chat

Your first version looks good, but there are always things to improve. Switch back to the Chat tab and start refining. Here's a typical refinement conversation:

Step 5: Run an Evaluation

After a few rounds of refinement, it's a good idea to check the overall quality of your app. Click the Evaluate button in the toolbar.

The evaluator is a separate AI that reviews your app against quality criteria including:

• Functionality — Do all features work as described?
• Code quality — Is the code well-structured and maintainable?
• UI/UX — Is the interface clean, intuitive, and responsive?
• Runtime compatibility — Does the app follow Webase's runtime constraints (CDN-based Tailwind, esm.sh imports, etc.)?

You'll receive a score from 0 to 100, along with detailed feedback on what's working well and what could be improved. A score of 70 or above is considered passing.

Step 6: Use Evaluate & Improve

If your evaluation score is below 70, or if the evaluator identified specific issues, click the Evaluate & Improve button instead. This powerful feature combines evaluation with automatic fixing:

1. The evaluator reviews your app and identifies issues.
2. The AI automatically applies fixes based on the evaluator's feedback.
3. The evaluator reviews the updated app again.
4. This cycle repeats up to three times until your app passes (score of 70+) or all iterations are used.

This is especially useful after making many changes, as it catches and fixes issues you might have missed. Most apps reach a passing score within one or two improvement cycles.

Step 7: Save and Share

Once you're happy with your app, it's time to save and share it.

What You Built

Congratulations! You've built a complete task manager application with:

• Task creation with titles, descriptions, due dates, and priorities
• Category organization (Work, Personal, Shopping)
• A dashboard with task statistics
• Real-time search and filtering
• Dark mode with remembered preferences
• Clean, responsive design with custom styling
• A public preview URL for sharing

And you did it all through natural conversation — no coding experience required.

Next Steps

Now that you've built your first app, here are some ways to go further:

• Add Data Models — Give your app a real backend database so tasks persist across sessions and can be shared between users.
• Master Chat Refinement — Learn advanced prompting techniques for getting the best results from the AI.
• Deploy to Netlify — Publish your app to a custom domain for production use.
• Suggest Features — Let the AI analyze your app and recommend new features to add.
• Add Authentication — Add user login so each person gets their own data and experience.