Documentation

Get started with Kromi

Kromi lets you generate and edit complete brand system websites using AI. Connect your favourite AI tool via MCP and start shaping your brand with natural language.

Quick Start

1

Create a project

Sign in, hit "New Project", pick a template, and give your brand a name. You'll get a unique project ID instantly.

2

Connect your AI tool

Copy the MCP config snippet below into your AI tool's settings. It takes less than a minute.

3

Start editing with conversation

Ask your AI to change colors, add components, tweak typography, anything. It updates your live brand site in real time.

MCP Setup

Add Kromi as an MCP server in your AI tool. Replace YOUR_PROJECT_ID with the ID from your project settings page.

Claude Desktop

Open Settings → Developer → Edit Config and add the following to claude_desktop_config.json:

{
  "mcpServers": {
    "kromi": {
      "transport": "sse",
      "url": "https://kromi.app/api/mcp/YOUR_PROJECT_ID"
    }
  }
}

Cursor

Open Settings → MCP → Add Server and paste this config:

{
  "mcpServers": {
    "kromi": {
      "transport": "sse",
      "url": "https://kromi.app/api/mcp/YOUR_PROJECT_ID"
    }
  }
}

What you can do

Every aspect of your brand system is editable through conversation. Here are the main capabilities:

Colors & Palette

Update your brand palette, accent colors, and semantic color tokens.

update_colors

Typography

Change fonts, sizes, weights, and line heights across your system.

update_typography

Design Tokens

Manage spacing, radii, shadows, and other low-level tokens.

update_tokens

Components

Add, update, or remove component definitions and their variants.

add / update / remove_component

Sections & Layout

Add, remove, and reorder page sections. Adjust layout and spacing.

add / remove / reorder_sections, update_layout

Content & Tone

Set your brand voice, messaging guidelines, and project metadata.

update_tone, update_meta

Assets

Upload logos, icons, and images directly through conversation.

upload_image

Export HTML

Export your complete brand system as a standalone HTML site.

export_brand

Export DESIGN.md

Export as a DESIGN.md file that AI coding agents consume for consistent UI generation. Compatible with Cursor, Claude Code, Copilot, and the Google Stitch ecosystem.

export_design_md

Example prompts

Not sure where to start? Try any of these prompts in your connected AI tool:

“Make the palette warmer and more earthy”

“Add a card component with hover state and subtle shadow”

“Change the heading font to Inter and body to system-ui”

“Export my brand system as JSON”

“Increase the border radius across all components”

“Set the brand voice to be friendly but professional”

“Add a testimonial section after the hero”

“Upload this logo and use it as the primary brand mark”

FAQ

Do I need an API key?

No. Kromi uses project-specific MCP endpoints. Just add your project URL to your AI tool's config and you're ready to go.

Which AI tools work with Kromi?

Any tool that supports the Model Context Protocol (MCP) over SSE transport. This includes Claude, Cursor, and more.

Is my data private?

Yes. Each project has its own isolated endpoint. Your brand data is stored securely and only accessible through your project URL.

Can I use Kromi without AI?

Absolutely. The visual editor lets you tweak everything directly. AI editing via MCP is an optional superpower on top.