Back to Projects

Kroma

2026

MCP Server for AI Design Intelligence

View LiveView Code
K
MCPTypeScriptNode.jsAI ToolingOpen Source

The Challenge

AI coding agents design from memory, which converges on the same visual defaults — centered divs, gray gradients, the same handful of fonts. There was no way for an agent to look up current, real design work the way a human designer browses Dribbble or Awwwards before building.

The Solution

Built Kroma as a stateless MCP server exposing six tools that let any MCP-compatible agent search live design sources in real time: UI inspiration from galleries like Mobbin and Awwwards, copy-pasteable component code from shadcn/Magic UI/Aceternity, motion and shader techniques from CodePen/Shadertoy/GSAP sources, a site design scraper, an open-ended design-web search, and a source registry lookup. Resolves results through the Serper API so agents get live data instead of hallucinated recommendations.

Impact

  • •Published as an open-source npm package (@kromamcp/server), installable with a single npx command, no local setup
  • •Compatible with every major MCP host: Claude Code, Claude Desktop, Cursor, Windsurf, Codex CLI, Roo Code, Cline, Zed, VS Code
  • •Five of six tools work on Serper's free tier — only image-based inspiration search needs a paid plan
  • •Curated source registry spans 31 sources across inspiration, components, and effects

Key Features

kroma_find_ui_inspiration — mood-boards from live design galleries

kroma_find_component_code — real, copy-pasteable component code from doc sites

kroma_find_effects_and_shaders — GLSL/canvas/GSAP/Framer Motion techniques

kroma_scrape_site_design — reverse-engineers a site's type, palette, and stack

kroma_search_design_web — open-ended fallback search

kroma_list_sources — offline source registry lookup, no API key required

Tech Stack

TypeScript, Node.js, MCP SDK
Serper API for live search resolution
Distributed via npm (@kromamcp/server), MIT licensed
Runs over stdio for any MCP-compatible host

Lessons Learned

  • →Giving an agent search tools scoped to a specific problem (design references) works better than a generic web search tool
  • →Keeping the tool stateless and API-key-optional (for the offline source list) lowers the adoption barrier significantly
  • →MIT-licensing an infrastructure-adjacent tool like this builds credibility faster than a closed beta would

Interested in working together?

Let's build something amazing.

Get in Touch