Chat-Based Refinement

The Chat panel is the fastest way to refine your app. Just describe what you want to change in plain English, and the AI will update your source files instantly. No coding knowledge required.

How the Chat Panel Works

The Chat panel sits on the left side of the Application Editor. It works like a conversation — you send a message describing what you want, and the AI responds by modifying your app's source files. The preview on the right updates automatically after each change.

Tips for Writing Effective Prompts

The AI is powerful, but clear instructions get the best results. Here are some tips for getting exactly what you want:

• Be specific about what to change. Instead of "make it look better," try "add more spacing between the cards and use rounded corners with a subtle shadow."
• Name the element you're targeting. Say "change the header background to dark blue" rather than "change the color." The more precise you are, the fewer follow-up messages you'll need.
• Describe features in detail. Instead of "add search," try "add a search bar at the top of the task list that filters tasks by title as the user types."
• Reference colors, sizes, and positions. Use words like "top-right corner," "red," "larger font," or "full-width" to guide the AI's design choices.
• One change at a time works best. Smaller, focused requests are easier for the AI to get right. You can always send multiple messages in a row.

What the AI Can Do

The chat-based AI is remarkably flexible. Here are the most common types of changes you can request:

• Add new features — "Add a dark mode toggle," "add a sidebar navigation," "add a confirmation dialog before deleting."
• Fix bugs — "The save button doesn't work," "the list shows duplicate items," "clicking the back button breaks the page."
• Change styles and design — "Use a green color scheme," "make the font larger," "add a gradient background to the hero section."
• Restructure layout — "Move the sidebar to the right," "switch from a grid to a list view," "make it mobile-responsive."
• Add new pages — "Add a settings page," "create an about page with a team section."
• Work with data models — "Show the contacts in a table sorted by name," "add a form to create new tasks."

What the AI Can't Do

There are a few limitations to keep in mind:

• No npm packages. The AI cannot install packages from npm. If your app needs an external library, the AI will import it from esm.sh (a CDN that serves npm packages as browser-ready modules). This happens automatically — you don't need to worry about it.
• No server-side code. Generated apps run entirely in the browser. The AI cannot create backend APIs, server routes, or database connections outside of Webase's built-in Data Models.
• No direct external API calls with secrets. The AI won't embed API keys in your app's source code. If your app needs to call an external service, it will use publicly accessible endpoints only.
• No file uploads to external storage. File handling is limited to what the browser and Webase's built-in attachment fields support.

Example: Iterative Refinement

Here's an example of how a typical refinement conversation might look:

1. You: "Add a search bar to the top of the task list."
2. AI: Adds a search input that filters tasks by title. Preview updates.
3. You: "Make the search bar wider and add a magnifying glass icon inside it."
4. AI: Expands the search bar to full width and adds an SVG search icon. Preview updates.
5. You: "Also filter by description, not just title."
6. AI: Updates the filter logic to search both the title and description fields. Preview updates.
7. You: "Add a clear button that appears when there's text in the search bar."
8. AI: Adds an X button that clears the search input and resets the filter. Preview updates.

In four quick messages, you went from no search to a polished search experience. Each step built on the last, and you could verify the result in the live preview before moving on.

Chat vs. Direct Code Editing

Webase gives you two ways to modify your app. Here's when to use each:

• Use chat when you want to add features, make design changes, fix bugs, or restructure your app. Chat is faster and doesn't require any coding knowledge. It's the best choice for most changes.
• Use the Code tab when you want to make a small, precise edit — like fixing a typo in some text, tweaking a specific CSS value, or adjusting a constant. The Code tab lets you edit any file directly and see the result immediately.