A completely stateless MCP server for UI/UX inspiration, live component discovery, and modern web micro-effects. No database, no cache, no stored files.
Ask for “a glassmorphic pricing card in React” or “aurora gradient shaders” and Kroma resolves it live from the best design galleries, component libraries, and code playgrounds on the internet — then hands your agent clean, structured results.
Zero databases, zero caches, zero stored files. Every answer is fetched fresh from the live internet, then forgotten.
Loose natural language becomes a precise, site-scoped query against curated galleries, component docs, and code playgrounds — via Serper.
Keys resolve per request from the environment or a per-call argument. Connect and go — no server-side account, no lock-in.
stdio for desktop & IDE hosts; Streamable HTTP + legacy SSE for shared, always-on remote hosting.
specialized tools
databases · caches
curated sources
transports
MADE FOR AGENTS
Each tool turns a natural-language request into a precise, live search — and returns clean JSON your agent can act on. Scroll to step through all six.
kroma_find_ui_inspiration
Mood-board a screen from live design galleries.
WHEN TO USE
You want visual reference for a screen, flow, or aesthetic before designing.
KEY ARGS
RETURNS
SAY THIS
“Find me dark-mode fintech dashboard inspiration from Mobbin and Awwwards.”
kroma_find_component_code
Copy-paste React / Vue / Svelte components from real docs.
WHEN TO USE
You need an actual implementation of a component or UI pattern.
KEY ARGS
RETURNS
SAY THIS
“Find an accessible React command palette I can copy from shadcn or Magic UI.”
kroma_find_effects_and_shaders
GLSL, canvas, GSAP, Framer Motion & glassmorphism, live.
WHEN TO USE
You want a motion technique or shader you can drop into a page.
KEY ARGS
RETURNS
SAY THIS
“Show me an animated glowing border effect for React.”
kroma_scrape_site_design
Reverse-engineer a site's type, palette & tech stack.
WHEN TO USE
You admire a site and want its structure, fonts, colors, and stack.
KEY ARGS
RETURNS
SAY THIS
“Break down the typography, palette, and tech stack of linear.app.”
kroma_search_design_web
Open-ended design search when the specialists don't fit.
WHEN TO USE
Design systems, tokens, accessibility, articles — anything else.
KEY ARGS
RETURNS
SAY THIS
“Search web.dev and Smashing for design-token naming conventions.”
kroma_list_sources
Discover the exact source names to pass to the others.
WHEN TO USE
You want to know which galleries/libraries Kroma can scope to.
KEY ARGS
RETURNS
SAY THIS
“List the component libraries Kroma can search.”
Grab a free key at serper.dev — 2,500 free credits. Kroma resolves every request through it.
Pick your tool and paste the config. It runs on stdio via npx — no install, no build.
Ask your agent: “List the Kroma sources.” It should call kroma_list_sources and return the registries — no key needed for that one, so it confirms the connection instantly.
ENV
SERPER_API_KEY — required (or pass api_key per call). Optional: SERPER_TIMEOUT_MS, KROMA_TRANSPORT, PORT.
# one-liner — adds Kroma over stdio to the current project
claude mcp add kroma \
--env SERPER_API_KEY=your_serper_key_here \
-- npx -y @kromamcp/server
# verify
claude mcp list # → kroma ✓ connected› Prefer JSON? Use `claude mcp add-json kroma '{"command":"npx","args":["-y","@kromamcp/server"],"env":{"SERPER_API_KEY":"your_serper_key_here"}}'`.
Task-oriented reference for all six tools — what each does, when to reach for it, the arguments it accepts, and the exact shape it returns. Every tool also returns a readable JSON text block plus structuredContent, and fails gracefully with a typed isError result rather than crashing the session.
WHEN TO USE
You want visual reference for a screen, flow, or aesthetic before designing.
ENGINE
Serper /images (Google Images)
ARGUMENTS
RETURNS
EXAMPLE CALL
{
"query": "fintech dashboard dark mode",
"sources": ["Mobbin", "Awwwards"],
"num": 12
}SAMPLE PROMPT
“Find me dark-mode fintech dashboard inspiration from Mobbin and Awwwards.”
Start Kroma over HTTP for an always-on, multi-tenant deployment. Endpoints:
SERPER_API_KEY=your_key \
npx -y @kromamcp/server --transport http --port 3000import { 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);› Over HTTP/SSE, pass api_key per call for true bring-your-own-key operation when the server holds no key.
Everything a developer or agent tends to ask before wiring Kroma in. Still stuck? The full reference is in Docs.
Kroma is a completely stateless Model Context Protocol (MCP) server that gives an AI assistant six design-focused tools: live UI/UX inspiration, copy-paste component code, web micro-effects and shaders, site design scraping, general design web search, and a source registry lister. Every request is resolved in real time from the internet — there is no database, cache, or stored file.
Any MCP-compatible host: Claude Code, Claude Desktop, Cursor, Windsurf, OpenAI Codex CLI, Roo Code, Cline, Zed, and VS Code — plus custom agents via the MCP SDKs (TypeScript and Python) over stdio or the HTTP/SSE endpoints. Copy-paste connection guides for each are on this page.
Kroma resolves every live request through Serper, so you need a free Serper API key (2,500 credits to start). Set it as SERPER_API_KEY, or pass an api_key argument per call for multi-tenant, bring-your-own-key operation. The kroma_list_sources tool runs offline and needs no key.
No module retains user data between requests. There are zero databases, zero caches, and zero stored files — every answer is fetched fresh and then forgotten. HTTP sessions live only in memory for the process lifetime and store no personal data.
Run it with npx — no install or build step: SERPER_API_KEY=your_key npx -y @kromamcp/server. That starts the server on stdio, ready for any MCP host. For remote hosting, add --transport http --port 3000 to expose the Streamable HTTP and SSE endpoints.
Yes. Kroma is MIT-licensed and published on npm as @kromamcp/server. You only bring your own free Serper key for live search resolution.