Skip to main content

A visual editor for your UI.
Full browser context for your agent.

Edit your rendered UI like you would in a design tool. Attach exact elements, screenshots, and inspirations to your prompts. Or let Kombai run the browser autonomously with full access to DevTools data.

Kombai
Kombai

Your AI design engineer

Design standout websites and product UIs.
Ship production frontend in the same loop.

localhost:3000
Kombai
Pulse

Track performance signals and surface trends across your entire product.

⚠At Risk

Activation Funnel

Step 3 completion fell 18% this week, users abandon before connecting their first data source.

Signups

2.4K

Drop-off

54%

Surface anomalies and performance regressions before they impact users.

✓On Track

Revenue Pipeline

Upsell conversions up 22% this quarter driven by usage-based triggers in the growth tier.

MRR

$184K

Growth

+22%

Track adoption patterns and usage momentum across key segments.

Browser tools built for frontend

Inspect, tweak, and refine UIs using the Kombai browser extension. Send your changes to the agent for final code implementation.

KombaiKombai
Connected:nutrizen-app
Design
CSS
Text Styles
Manrope
Font Weight
Semi-bold (600)
Font Size
↑A14px
Color
Solid
#1C1917100%
Line Height
IA20px
Letter Spacing
AV-0.25px
Transform
Ab
Aa
AA
aa

Edit text, styles, and layout

Click any element to quickly update its text or CSS properties. Use design tokens from your repo, or switch to a DevTools-like UI to edit raw CSS.

Rearrange and delete elements

Drag elements around to test new page structures, or press delete to remove them from the page. No need to touch your codebase just to explore a change.

KombaiKombai
Connected:nutrizen-app
What needs to be updated?
Send to agent
Deleted 1 element
delete-1Delete
Deletedsection.hero-search

Send precise browser-context to Kombai

Attach the exact elements, snips, or edits you want Kombai to work with. Code references, screenshots, and browser data come along automatically.

Target DOM elements

Add DOM elements to your prompts in a click. Relevant screenshots and code references are also attached automatically.

div-11div-9p-8
This sidebar has hardcoded nav items. Refactor them into a reusable component that accepts a config array and supports collapsible sections
Send to agent

Add code-aware screenshots

Snip any area on your screen to add visual context to your prompts. Kombai automatically maps your screenshot to the relevant DOM elements and code references.

snip-3snip-2snip-1
These metric cards repeat the same layout. Extract a shared KPI card component and add a summary row above them showing total users, revenue, and growth rate
Send to agent

Turn visual edits into code

Use the visual editor to make changes directly on the page. Then send them to Kombai to implement in your codebase, with optional prompts.

Text Styles
Manrope
Font Weight
Regular (400)
Font Size
↑A16px
Color
Solid
#171717100%
Line Height
IA24px
Letter Spacing
AVnormal
Transform
Ab
Aa
AA
aa

Assemble multi-tab context in a single prompt

Bring together elements and screenshots from any browser tab into the same prompt. Show Kombai the target UI, the inspiration, and every relevant state without trying to compress it all into words.

Nord
3
Light fashion flat lay by engin akyurt on Unsplash
div.hero1

Wear the cosmos

Shop now
Light consumer app background on Unsplash
Arcv2.0
div.hero2
ImagineBuildDeploy
Launch app
Read docs
div.hero1×div.hero2×
Replace the "div.hero1" element's current styling and position with "div.hero2".
Send to agent

Use specific parts from an reference or inspiration

Pull in components, styles or content from any website to improve specific parts of your page. Attach all sources and targets in the same prompt as snips or DOM elements.

FinPilot
Summary
Expenses
Savings
Goals
svg.pie-chart
Total84%
Salary
$1,60032%
Investment
$1,10022%
Savings
$90018%
$5,000
Income
$3,501
Expenses
$1,499
Saved
FinPilot
Summary
Expenses
Savings
Goals
TransactionCategoryAmount
Rent — April
Rent-$1,600
Whole Foods
Food-$142.80
Con Edison
Utilities-$94.30
Metro Card
Transport-$127.00
ASOS Order
Shopping-$89.99
svg.pie-chart×table.expenses×
Visualize my expenses by category using this pie chart style. Show each category as a colored slice with its total spend
Send to agent

Work across states and variants at once

Capture multiple states and variants of components or sections in one go. Open each in a separate tab, then attach the relevant elements or screenshots in the same prompt.

Full browser data, available on demand

Whenever needed, Kombai can fetch relevant browser data from any open tab. This works whether you're prompting manually from the browser or the agent is operating it.

Console logs

Spot runtime errors and warnings without copy-pasting from the console.

Performance metrics

Diagnose slow renders and other performance bottlenecks.

Network requests

Trace API calls, payloads, and failed requests.

Rendered DOM & styles

See the actual rendered output, not just the source code.

Raw CSS Rules

Inspect the raw CSS rules behind any element on the page.

Questions?
We've got answers.

What is the visual editor in Kombai?
You can edit your live, rendered UI right in the browser. Change text, styles, and layout the same way you would in a design tool. Once you like a result, Kombai turns those visual edits into real code in your repo.
How is this different from Chrome DevTools?
DevTools lets you experiment, but the changes vanish on refresh. None of it reaches your codebase. Kombai's visual editor keeps your code in sync with what you see. Anything you change visually can be implemented for real, using the design tokens and component patterns already in your stack.
Can I edit my UI without writing code?
Yes. Click any element to update its text or CSS. Drag elements to rearrange the layout. Press delete to remove them. You can explore a change from start to finish without opening a file. When you like what you see, hand it to Kombai to implement.
Can I use design tokens from my repo in the editor?
Yes. The editor pulls tokens straight from your codebase. You can pick from your real color, spacing, and typography values instead of typing raw CSS. If you'd rather write CSS by hand, you can switch to a mode that works like DevTools.
How do I send a specific element or area to Kombai?
Click an element to attach it to your prompt. Or snip any region of the screen. Relevant screenshots and code references come along on their own. You don't have to describe what you mean in words.
Can I pull in references from other websites or browser tabs?
Yes. You can attach elements, styles, or screenshots from any open tab in the same prompt. Show Kombai the target page, an inspiration site, and every relevant state at once. There's no need to compress all of it into words.
Can I prompt with multiple states or variants of a component?
Yes. Open each state or variant in its own tab. Then attach the elements or screenshots you care about in a single prompt. Kombai works through all of them together, so your changes stay consistent across the set.
What browser data can Kombai access?
Kombai can fetch console logs, performance metrics, network requests, the rendered DOM, computed styles, and raw CSS rules from any open tab. It pulls this data only when it helps with the task at hand. You don't have to copy and paste from DevTools yourself.
Can Kombai operate the browser by itself?
Yes. Kombai can drive the browser to test user flows, check responsiveness, inspect UI states, catch regressions, and reproduce bugs. You can step in at any point, or let it run on its own.
Does Kombai work with authenticated pages and logged-in sessions?
Yes. You can connect your Chrome profiles, so the agent uses the same authenticated sessions you do. It can test flows behind a login, open private dashboards, and see real production data when you need it to.

Try Kombai Now

Kombai is a domain-specialized design and coding agent that builds world-class Frontends. Build beautiful, production-ready UXs with all frontend specific skills, context, features and tools today.