Home
/ DOCS

Wire Kroma into anything.

/ OVERVIEW

Live design intelligence for your agent.

You bring a free Serper key. The agent does the rest.

/ INSTALL

Get the binary.

One command. Your host points at it. That's the whole install.

NPX · DEFAULT

npx · stdio
SERPER_API_KEY=your_serper_key_here npx -y @kromamcp/server

First run downloads the package; after that it's cached. If a host times out on first launch, reconnect.

FROM SOURCE · OPTIONAL

Clone, build, point your host at dist/index.js.

clone · build · run
git clone https://github.com/thatcreativetayo/kromamcp.git
cd kromamcp
npm install
npm run build

SERPER_API_KEY=your_serper_key_here node dist/index.js

In host config use command "node" and args ["/absolute/path/to/kromamcp/dist/index.js"].

/ CONNECT

Paste it into your host.

Pick your app. Copy the snippet. Paste. Ask it to list Kroma sources.

  1. 02 — RUN THIS

    In a terminal, inside your project folder.

  2. 03 — PASTE / RUN

    claude code · bash
    claude mcp add kroma \
  --env SERPER_API_KEY=your_serper_key_here \
  -- npx -y @kromamcp/server

  3. 04 — CHECK

    Ask your agent: “List the Kroma sources.”

    Run claude mcp list. You should see kroma.

/ THE SIX TOOLS

Every tool, in full.

01

kroma_find_ui_inspiration

Find UI/UX Inspiration

EXAMPLE CALL

kroma_find_ui_inspiration · example
{
  "query": "fintech dashboard dark mode",
  "sources": ["Mobbin", "Awwwards"],
  "num": 12
}
02

kroma_find_component_code

Find Component Code

EXAMPLE CALL

kroma_find_component_code · example
{
  "component": "command palette",
  "framework": "react",
  "keywords": "tailwind accessible"
}
03

kroma_find_effects_and_shaders

Find Effects & Shaders

EXAMPLE CALL

kroma_find_effects_and_shaders · example
{
  "effect": "animated glowing border",
  "category": "glow",
  "framework": "react"
}
04

kroma_scrape_site_design

Scrape Site Design

EXAMPLE CALL

kroma_scrape_site_design · example
{
  "url": "https://linear.app",
  "include_markdown": true
}
05

kroma_search_design_web

Search Design Web

EXAMPLE CALL

kroma_search_design_web · example
{
  "query": "design tokens naming conventions",
  "sites": ["web.dev", "smashingmagazine.com"]
}
06

kroma_list_sources

List Curated Sources

EXAMPLE CALL

kroma_list_sources · example
{
  "category": "components"
}
/ REMOTE

Run it once, share it everywhere.

Start Kroma over HTTP for an always-on, multi-tenant deployment.

remote · http
SERPER_API_KEY=your_key npx -y @kromamcp/server --transport http --port 3000
  • /mcpPOST/GET/DELETE — Streamable HTTP (recommended)
  • /sseGET — legacy SSE (Cursor / Windsurf)
  • /messagesPOST — SSE message channel
  • /healthGET — liveness probe → { ok: true }
/ MCP SDK

Wire it into your own agent.

TypeScript · stdio
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const transport = new StdioClientTransport({
  command: "npx",
  args: ["-y", "@kromamcp/server"],
  env: { SERPER_API_KEY: process.env.SERPER_API_KEY! },
});

const client = new Client({ name: "my-agent", version: "1.0.0" });
await client.connect(transport);

const res = await client.callTool({
  name: "kroma_find_ui_inspiration",
  arguments: { query: "bento grid landing page", num: 8 },
});
console.log(res.structuredContent);
Back to start →