Kombai: The World's First SOTA Agent for UI Development is here! Beats 2.5 Pro & Sonnet 4 w/ MCPs!

Key Concepts

• AI Agent for Front-End Development
• Backend Agnostic Code Generation
• Integration with Code Editors (VS Code, Cursor, Windsurf)
• Support for Front-End Libraries (React 19, Next 15, MUI, Tailwind V4, Antd, Shadson)
• Figma Design Integration
• Text-Based Prompts
• Image-Based Prompts
• Code Review and Approval
• Sandbox Code Preview
• Credit-Based Usage
• Complex UI Generation

Comi: AI Agent for Front-End Development

The video introduces Comi, an AI agent designed to simplify complex front-end development tasks, an area where many AI models and coders currently struggle.

Key Points:

• Comi aims to solve the problem of AI tools failing to handle complex and real-world front-end tasks effectively.
• It distinguishes itself by offering seamless integration and backend-agnostic code generation, meaning it focuses solely on the UI without disrupting existing backend logic.
• The tool launched with significant attention on Twitter, boasting over 2 million views, driven by impressive benchmark scores in real-world front-end use cases.

Functionality and Features

Comi integrates directly into code editors like VS Code, Cursor, and Windsurf, allowing developers to generate front-end code within their existing development environment.

Key Features:

• Backend Agnostic Output: Generates clean code that fits the existing tech stack and repository, minimizing the need for extensive refactoring.
• UI Generation from Various Inputs: Can build UIs from Figma files, images, or even text-based prompts.
• Library Support: Supports popular front-end libraries such as React 19, Next 15, MUI, Mantine, Tailwind V4, Antd, and Shadson.
• Two Modes: 'Ask' for general queries and planning, and 'Code' for generating actual code.
• Text Stack Selection: Allows users to specify the desired tech stack (e.g., React 19, TypeScript/JavaScript, Next.js 15).

Pricing and Usage

Comi offers a tiered pricing structure with a free tier and paid options.

Pricing Details:

• Free Tier: 200 credits per month.
• Launch Exclusive Offer: 500 credits per month for free.
• Paid Plan: $20 per month for 2,000 credits, with options for additional credits.

Installation and Setup:

1. Navigate to the Comi website.
2. Select the desired code editor (VS Code, Cursor, Windsurf).
3. Install the Comi plugin from the respective marketplace.
4. Sign in or create an account and activate it.

Demonstrating Comi's Capabilities: E-Commerce Admin Panel Case Study

The video demonstrates Comi's ability to handle complex front-end tasks by using it to add a feature to an existing e-commerce admin panel built with React 19, Material UI v7, and Emotion.

Step-by-Step Process:

1. Initial UI Generation: Comi was initially used to generate the main dashboard and product pages from a Figma design, utilizing the Fake Store Demo API for data.
2. Adding a New Feature (Settings Page):
   • A prompt was given to Comi to create a settings page, borrowing components from the existing dashboard and product pages.
   • Comi generated the code for the settings page, utilizing the libraries already present in the codebase.
3. Code Review and Approval: Comi runs the generated code in a sandbox, providing a preview of the output before it's saved to the repository.
4. Refinement: The presenter requested a modification to include a separate text box for the username, which Comi implemented.
5. Backend Integration: The presenter used another AI coding tool (Kilo Code with the Sonnet model) to implement the backend functionality for the settings page, demonstrating seamless integration with Comi's generated code.

Advantages Highlighted

• Consistent Design: Comi maintains a consistent design theme throughout the UI, avoiding styling inconsistencies.
• Backend Route Generation: Comi automatically generates backend routes and schema, simplifying backend integration.
• Figma Optimization: Comi is optimized for working with Figma designs.

Conclusion and Call to Action

The video concludes that Comi is potentially the best AI agent for front-end development currently available, praising its ability to handle complex tasks, maintain design consistency, and seamlessly integrate with existing codebases and backend systems. The presenter encourages viewers to try Comi.