Chat Interface - VibeFlow UI

The chat interface is your primary tool for editing UIs. Describe what you want in plain English and the AI modifies the code in real time.

How It Works

Every message you send is interpreted by the AI in the context of your current codebase. The AI:

Reads your current code - It understands every component, style, and layout
Interprets your request - Natural language is mapped to specific code changes
Applies the changes - Code is modified and the preview updates instantly
Explains what it did - The AI describes the changes it made

Writing Effective Prompts

Layout Changes

Move the sidebar to the right side of the page
Make the header fixed at the top with a blur backdrop
Add a 2-column grid layout for the card section on desktop, single column on mobile

Styling Changes

Change the primary color to emerald-500
Add a subtle box shadow to all cards
Switch to dark mode with a #0A0A0A background
Use the Inter font family throughout

Component Changes

Add a search bar with an icon to the header
Replace the static list with an accordion
Add a loading skeleton state for the data table
Create a modal that opens when clicking the "Edit" button

Content Changes

Replace the placeholder text with content for a fitness app
Add 5 more items to the pricing comparison table
Change the hero headline to "Build faster with AI"

Context Chips

When you select a Style or Design System from the footer buttons, they appear as context chips in the chat input area. These provide additional context to the AI:

Style chip (purple) - Tells the AI to use a specific visual aesthetic for the next change
Design System chip (teal) - Tells the AI to reference your component library and tokens

Context chips are automatically cleared after you send a message.

Style and Design System context chips in the chat input

Styles and Design Systems in the Editor

For UI projects, the Styles and Design Systems buttons are directly visible in the chat footer (no dropdown menu needed).

Styles Button

Click to open a dropdown with all 9 style cards. Select one to add it as context for your next message. This is useful when you want to restyle a section or generate new components in a specific aesthetic.

Design Systems Button

Click to browse your uploaded design systems with search and preview cards. Select one to ensure the AI uses your components and guidelines.

Tips

Chain small changes

Instead of one massive prompt, make small, incremental changes. “Add a nav bar” → “Make it sticky” → “Add a search icon” → “Add dropdown menus on hover.” This gives you more control over the result.

Reference specific sections

Say “in the hero section” or “in the footer” to target specific parts of the page. The AI understands spatial references.

Use undo as a safety net

If a change isn’t what you wanted, you can ask the AI to “undo that” or “revert the last change.” The chat history preserves the context.

Describe interactions, not just appearance

“When I click the menu button, slide in a sidebar from the left with a dark overlay” - the AI can build complex interactions from natural language.

​How It Works

​Writing Effective Prompts

​Layout Changes

​Styling Changes

​Component Changes

​Content Changes

​Context Chips

​Styles and Design Systems in the Editor

​Styles Button

​Design Systems Button

​Tips