AI Chat is your coding assistant built directly into Onlook. It understands your entire codebase, can read and modify files, run commands, and help you build features using natural language.
Unlike traditional AI code generators that work in isolation, Onlook's AI Chat:
Understands context - Knows about your selected elements, visible code, and project structure
Has access to tools - Can read, edit, search, create files, run CLI commands, typecheck, and more
Works with your code - Modifies your actual React/Next.js code, not proprietary abstractions
Provides reasoning - Can break down complex tasks step-by-step tasks
Learns from images - Upload screenshots or designs as references
Knows your brand - Automatically applies your brand colors and fonts defined in the brand panel
Creates automatic backups - Every prompt creates a restore point you can return to
Traditional AI coding tools:
Generate code in isolation
No awareness of your project structure
Require manual copy-paste into your codebase
Can't execute commands or read files
Onlook AI Chat:
Works directly with your actual project files
Understands selected elements and context
Applies changes automatically
Has a full suite of tools to analyze and modify your codebase
There are two core approaches to working with AI Chat, depending on whether you need project-wide changes or element-specific edits.
Use this when you want to:
Create new pages or project-wide features
Add functionality across multiple pages
Set up new libraries or configurations
Ask questions about your codebase
How to use:
Click in the AI Chat input at the bottom of the screen
Type your prompt
Press Enter
The AI will analyze your entire project and make changes across any files needed.
Use this when you want to:
Modify a specific page, component or element
Style or adjust a particular section
Add functionality to an existing element
Add a new component to a particular section of an existing page
How to use:
Select one or more elements on the canvas (hold Shift to select multiple)
Selected elements appear as pills above the AI Chat input
Type your prompt referencing "this" element
Press Enter
The AI understands exactly which elements you're working with and focuses changes there.
Upload screenshots, designs, or mockups to guide the AI on what you want to build.
Click the image icon (
) at the bottom left of the AI Chat input
Choose to upload a file or take a screenshot
The image appears in your chat
Write a prompt describing what you want the AI to do with the reference
Recreating designs:
Recreate this hero section exactly. Use shadcn/ui components and match
the spacing, colors, and typography from the image.Matching existing styles:
Make this card look like the one in the screenshot. Focus on the
shadow, border radius, and hover effect.Implementing wireframes:
Build this dashboard layout. Use the image as a guide for the
overall structure and component placement.AI Chat has two modes optimized for different types of tasks.
Use Build Mode when you want to:
Create new features
Modify existing code
Add functionality
Make changes to your app
What it does:
Automatically executes code changes
Creates files and folders
Runs commands when needed
Applies edits directly to your project
Use Ask Mode when you want to:
Understand how something works
Get explanations about your code
Learn best practices
Explore options before making changes
What it does:
Provides explanations without making changes
Answers questions about your codebase
Suggests approaches and solutions
Helps you plan before building
Click the dropdown at the bottom left of the AI Chat input to switch between Build and Ask modes.
Speed up your workflow by queuing multiple prompts at once. The AI will work through them sequentially.
Type your first prompt and press Enter
While the AI is working, type your next prompt
Press Enter to queue it
Repeat for additional tasks
The AI completes each task in order, applying changes before moving to the next prompt.
Building a feature in stages:
Create a navigation menu with Home, About, and Contact links
Add a mobile hamburger menu that toggles on small screens
Add smooth scroll animations when clicking navigation links
Iterative styling:
Make this card have rounded corners and a subtle shadow
Add a hover effect that lifts the card slightly
Make the card's button change color on hover
Sequential setup tasks:
Install and configure form using shadcn/ui components
Put the form into User model with email, name, and date fields
Connect the form to my webhook endpoint x
As you chat with the AI, Onlook displays your current token usage. This helps you understand how much context you're using and when to start a fresh conversation.
Tokens represent the amount of text in your conversation:
Your prompts
AI responses
Code context
Project files being referenced
Located in the AI Chat interface, the token counter shows your current usage against the model's context limit.
What the numbers mean:
Under 150k tokens: Optimal performance - AI has full context and attention
150k - 200k tokens: Performance begins to degrade - consider wrapping up
Above 200k tokens: Expect errors and confusion - start a new chat
As conversations grow longer:
AI has more information to track
Earlier context gets "lost/forgotten"
Response quality decreases
Errors become more likely
When approaching limits:
Ask AI to summarize your progress and copy the output
Start a new chat
Paste the summary of what you've built in your first message
Every prompt you send creates an automatic restore point. If the AI makes an unwanted change, you can instantly revert to any previous state.
Automatic creation:
Every time you send a prompt, Onlook creates a backup
Your entire project state is saved
No manual action required
What gets saved:
All file changes
Project structure
Code state at that moment
Hover over any message you’ve sent in your chat history
Click the "Restore" button that appears
Your project instantly returns to that state. All files revert to exactly how they were before that prompt was executed.
The AI made unexpected changes:
You asked: "Add a contact form"
The AI: Completely restructured your homepage
Action: Hover over the message and restore
You want to try a different approach:
You asked: "Style this with blue and white"
Result: You don't like the color scheme
Action: Restore, then try: "Style this with navy and cream"
An error was introduced:
The AI: Made changes that broke your build
Action: Restore to working state, then debug the prompt
Access all your previous conversations and restore from any point in your chat history.
Click the dropdown at the top left of the AI Chat panel
View all previous chat sessions
Click any session to open it and view messages
View past conversations:
See all messages in each chat
Review what you built
Reference previous solutions
Restore from history:
Hover over any message in any chat
Click "Restore" to revert your project to that state
Works across all chat sessions, not just the current one
Continue conversations:
Click a previous chat to continue where you left off
Add new prompts to existing conversations
Keep related work in the same chat thread
One chat per feature:
Chat 1: "Authentication Design"
Chat 2: "Dashboard Design"
Chat 3: "User Profile Page"
One chat per work session:
Chat 1: "Monday - Initial Setup"
Chat 2: "Tuesday - Core Features"
Chat 3: "Wednesday - Styling Polish"
Choose an organization method that makes it easy to find past work when you need to reference or restore it.
AI Chat proactively helps you build by suggesting next steps and detecting errors in your code.
As you work, the AI analyzes your project and suggests relevant next steps.
Where/why suggestions appear:
Above the chat input as clickable prompts
Based on your current work context
Tailored to what you're building
Using suggestions:
Click any suggestion to use it as a prompt
Edit the suggestion before sending if needed
Ignore suggestions that don't fit your needs
When the AI identifies errors in your code, it offers to fix them.
How it works:
AI scans your code and detects issues
A "Fix Error" button appears
Click it to let the AI resolve the problem
The AI explains what was wrong and how it fixed it
Common errors detected:
TypeScript type errors
Missing imports
Syntax errors
Configuration issues
Deprecated code patterns
etc.
Select elements first
Click elements on the canvas before prompting
The AI understands exactly what you're working with
Results are more accurate and focused
Be specific with libraries
Mention which component library to use (shadcn/ui, Radix, etc.)
Specify styling preferences (Tailwind classes, inline styles)
Name exact packages when relevant
Break down complex requests
Small, focused prompts get better results
Queue multiple simple tasks instead of one complex task
Easier to debug and restore if needed
Use images for design work
Upload mockups or screenshots as references
Describe what you want the AI to focus on
Faster than describing layouts in text
Watch your token count
Start fresh chats when approaching 150k tokens
Summarize progress before starting new conversations
Keep related work in the same chat
Experiment with restore points
Try bold changes knowing you can revert
Test multiple approaches to the same problem
Learn what works through experimentation