The coding agent built for frontend engineering

Ship production-grade frontends faster, without fighting your agent. Kombai natively handles the complexities that general-purpose agents often struggle with: library-specific quirks, component reuse, design handoffs, accessibility, and more.

Code mode demo
Play around with this interactive demo

Add the Webhook Logs page using the existing webhook_events table with filtering, retry, and an expandable payload viewer.

webhooks.ts
webhook-logs-client.tsx
page.tsx
1"use server";
2
3import { db } from "@/db";
4import { webhookEvents } from "@/db/schema";
5import { eq } from "drizzle-orm";
6import { revalidatePath } from "next/cache";
7
8export async function getWebhookEvents(filters: WebhookFilters) {
9 return db.query.webhookEvents.findMany({
10 where: buildWhereClause(filters),
11 orderBy: desc(webhookEvents.createdAt),
12 });
13}
14
15export async function retryWebhookEvent(eventId: string) {
16 const event = await db.query.webhookEvents.findFirst({
17 where: eq(webhookEvents.id, eventId),
18 });
19 if (!event) throw new Error("Event not found");
20 await db.update(webhookEvents)
21 .set({ status: "pending", retries: event.retries + 1 })
22 .where(eq(webhookEvents.id, eventId));
23}
24
25export async function retryAction(eventId: string) {
26 await retryWebhookEvent(eventId);
27 revalidatePath("/webhooks/logs");
28}

Codes like it's been on your team

Kombai deeply understands your frontend stack, best practices, and reusable code. So every task starts with the context of an engineer who knows your codebase.

Tech Stack
Context Graphs
Selected Tech Stack
Sync with stack.json:
Project Type: ReactFramework: NextJS 15Build Tool: TurbopackComponent Library: shadcn
Add to Tech Stack
Categories
Project Type11
Framework19
Build Tool4
Component Library58
CSS Implementation6
Tailwind Version3
TS/JS2
Router22
State Management27
API Client29
Testing Framework21
Project Type
React
Vue
Angular
Svelte
Solid
Preact
Vanilla JS
React Native
Flutter
Blazor
Discard ChangesSave

Always-on best practices for your stack

Kombai scans your repo, understands your whole stack, and applies human-tested best practices for 400+ frontend libraries. This improves accuracy without wasting tokens.

Consistent code reuse from your repo, npm packages, and Storybook

Context Graphs give Kombai a semantic understanding of your code across sources. So it consistently reuses what's already there, including components, hooks, tokens, types, and constants.

Tech Stack
Context Graphs
Context GraphsAdd New
Context Graphs help Kombai understand and reuse existing code.
sorcerorLocal
Rebuild
Badgecomponent
TScomponents/ui/badge.tsx
Buttoncomponent
TScomponents/ui/button.tsx
Cardcomponent
TScomponents/ui/card.tsx
cnfunction
TSlib/utils.ts
fetchMatchesfunction
TSlib/api.ts
FilterBarcomponent
TScomponents/match-tracker/FilterBar.tsx
FilterStatustype
TSlib/types.ts
getUpdatedMatchesfunction
TSlib/mock-data.ts

Agentic superpowers, built for frontend work

From planning to debugging, Kombai comes with specialized capabilities for the parts of frontend work that generic coding agents often struggle with.

Skills Library

Developer-tested skills for common frontend tasks, from wireframing and architectural diagrams to SEO improvements, accessibility checks, and more.

Plan Mode

Proposes plans with frontend-specific details such as lo-fi mockups, design choices, and component structure. Asks targeted clarifications when there's ambiguity.

Debug Mode

Uses specialized debugging strategies to find tricky frontend bugs. Automatically tracks temporary debugging changes and reverts them cleanly when you're done.

blank-checkout-screenshot.png
The checkout page shows a blank confirmation after payment. useOrder.ts silently catches the API error and returns null. Fix the error handling in ConfirmationPage.tsx to show the order details or a retry prompt
Debug
Ultra

Agent Variants

Kombai continuously benchmarks top models across common frontend tasks and routes each request to the best-fit model for your chosen cost tier.

Extended thinking
Ultra2x

Best for hard tasks & deep reasoning.

Uses Opus 4.6

High1x

Excels in complex problem-solving and reasoning

Medium0.5x

Balances cost-efficiency with quality output

Mini0.33x

Good for high volume, low-complexity tasks

Native Figma Integration

Parses complex design files, fixes common issues like messy grouping and invisible layers, and extracts icons and assets. No MCP needed.

Enter the link to your Figma frame

Ask Kombai to turn your designs into code by attaching a link to a desired frame in your Figma file.

link1,link2,link3...
How to get Figma frame url?

Right click frame > "Copy/Paste as" > "Copy link to selection"

Reconnect Figma
CancelConfirm

Closes the loop on every edit

Kombai runs checks, tests your app in the browser, and fixes issues before marking a coding task complete.

Verifies in-browser, automatically

All code changes are applied. Let me verify everything renders correctly in the browser.

Interacted with Browser

Navigated to localhost:3000/account. Page loaded in 1.2s — no console errors. Screenshot captured.

The account page loads correctly. Checking navigation tabs now.

Interacted with Browser

Clicked "Transactions" tab. Table renders 12 rows. Scrolled to bottom — pagination visible.

I noticed a layout shift when loading the table — CLS is 0.18. Fixing skeleton dimensions.

+TSXTransactionRow.tsx+5 -2
Interacted with Browser

Reloaded page. CLS now 0.02 — within threshold. No layout shift on scroll or tab switch.

Done. All issues found during testing have now been fixed- localhost:3000. The layout shift is resolved, tabs render correctly, and there are no console errors or warnings.

Kombai uses the browser to verify its own work — with full access to console logs, network activity, performance data, and computed and raw styles.

Auto-fix errors as they happen

Code changes applied. Running lint and type checks.

npm run lint && tsc --noEmit

Found lint errors

AccountCard has an unused import, TransactionTable is missing a key prop, and FilterBar uses any. Removing the import, adding txn.id as the row key, and replacing any with TransactionFilter.

+TSXTransactionTable.tsx+4 -2
+TSXFilterBar.tsx+2 -1
npm run lint && tsc --noEmit
All checks passed

All lint and type errors are resolved. The codebase is clean — handing it back to you.

After every code edit, Kombai checks for lint, build, and runtime errors, then fixes them automatically before handing the code back to you.

Everything you'd expect from a modern coding agent

Kombai has all the familiar features of a complete coding agent. All the modern capabilities you rely on are here, and just work.

MCPs

Connect Kombai to external services, tools, and data sources through MCP.

MCP Servers
+ Add MCP
linear38 tools enabled
sentry14 tools enabled
neon29 tools enabled
context72 tools enabled
playwright21 tools enabled
github26 tools enabled
excalidraw5 tools enabled

Parallel agent runs

Use parallel threads to run multiple tasks at once, without waiting for earlier ones to finish.

Add dark mode toggle
Refactor sidebar nav
Update footer links

I'll update the footer links and navigation config to match the new sitemap.

Readcomponents/Footer.tsx

Found 3 outdated links, a stale nav config, and a broken sitemap entry. Updating all three.

+TSXFooter.tsx+8−5
+TSlib/nav-config.ts+3−2
+TSapp/sitemap.ts+2−1

I've updated all three files. Everything should be pointing to the right routes now.

Auto-compaction

Let Kombai intelligently compacts long threads or toggle it off to trigger it manually anytime.

Now update the sidebar to be collapsible and add a footer with social links.

Chat context compacted.Learn more

I'll make the sidebar collapsible and add footer links with social icons. Let me check what's already there.

ReadSidebar.tsx
ReadFooter.tsx
To-do Started: Add collapsible sidebar + footer links

The sidebar uses a fixed layout right now. I'll add a collapse toggle with local state and animate the width. The footer just needs a row of icon links added at the bottom.

+TSXSidebar.tsx+14−3
+TSXFooter.tsx+9−1

I've added the collapse toggle to the sidebar and a social links row to the footer. Should be good to go.

Custom commands and skills

Add your own slash commands and skills to extend Kombai for your specific workflows.

Agent Skills
.kombai
skills
coding-standards
SKILL.md
references
component-patterns
SKILL.md
assets
api-conventions
testing-guidelines
design-tokens
deployment

Web fetch tools

Bring in context from any URL, including docs, references, and content sources.

Read ui.shadcn.com/docs/sidebar and update our AppSidebar to use the new component.

Let me fetch the latest sidebar docs from shadcn.

Navigated tohttps://ui.shadcn.com/docs/...

It uses a composition model with SidebarProvider and SidebarContent. I'll refactor AppSidebar and update the layout wrapper to match.

+TSXAppSidebar.tsx+28−15
+TSXapp/layout.tsx+6−4

I've migrated AppSidebar and wrapped the layout with SidebarProvider. Your nav items and icons are all intact.

Terminal access

Kombai executes terminal commands autonomously to complete tasks end-to-end.

Got it. A Vite + React + TypeScript + shadcn + Tailwind v4 project inside packages/new-app. Let me fetch the relevant setup skills first.

To-do Started: Scaffold new Vite app with shadcn
Scaffold Vite app with React, TypeScript and shadcn
$ npm create vite@latest new-app -- --template react-ts
Scaffolding project in ./new-app...
Done. Now run: cd new-app && npm install
$ npx shadcn@latest init
Installing dependencies...
Updating files... Created 2 files:
- src/components/ui/button.tsx
- src/lib/utils.ts
Project initialization completed.

I've scaffolded the project and initialized shadcn. Ready to start building components.

Questions?
We've got answers.

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.

Kombai