How do I connect Kroma MCP Server to Claude?

Run `claude mcp add kromamcp -- npx -y @kromamcp/server` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.

Is Kroma MCP Server free?

The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.

What can Kroma MCP Server do?

Kroma MCP Server documents 10 tools to the agent, including kroma_find_backgrounds_and_gradients, kroma_find_component_code, kroma_find_effects_and_shaders. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.

Kromamcp

Unclaimed

by thatcreativetayo

Zero-database, internet-connected MCP server for live design intelligence and UI component synthesis.

Set up this server

Compare servers My Stack

01 / Choose your client

02 / Before you connect

Authentication is not specified. Check the project instructions before connecting.

Install the runtime required by the project and make it available to your client.

Project instructionsEnvironment variable names (optional)

Use names from the project instructions, separated by commas. Enter names only, never secret values.

03 / Add the configuration

Source: generated from public install instructions

claude mcp add --transport stdio 'kromamcp' -- 'npx' '-y' '@kromamcp/server'

Run in your terminal after replacing any placeholders.

04 / Check it in your client

Open your client’s MCP settings and confirm the server connects and lists its tools. A copied configuration does not confirm a working connection.

ai-agentsclaude-desktopdesign-inspirationmcpmcp-servermodel-context-protocolserper-apiui-design

Is this your MCP server?

This listing was auto-indexed from the public record. Claim it to edit the page, set compatibility and unlock growth tools. Takes under two minutes.

Claim this server

Security profile

Claimed and verified servers get a weekly static scan that shows what the code can reach: external services, environment variables, shell commands, agent configuration folders, plus any dependencies with known advisories. Claim this listing to get one. How the security profile works

10 of 10 tools

Documented tools (10)

From project documentation. A server handshake does not verify each tool’s description or behavior.

kroma_find_backgrounds_and_gradients

Finds gradients, grain/noise textures, mesh & animated backgrounds, patterns, and color palettes from asset libraries and live generators — Grainient, Backgrounds Supply, Pryzm, ColorFlow, zoxilsi studio, Gradientool, CSS Gradient, Tabbied, Ramps, beUI Pro. Returns results plus the matched generator

kroma_find_component_code

Searches component libraries & docs (shadcn/ui, Magic UI, Aceternity, Uiverse, Tailwind, Radix, Headless UI, Flowbite, daisyUI, beUI Pro, GitHub…) for copy-paste React / Vue / Svelte components.

kroma_find_effects_and_shaders

Discovers GLSL/canvas shaders, Framer Motion variants, GSAP scroll timelines, glassmorphism, glowing borders, Three.js and more from CodePen, Shadertoy, Codrops, GitHub, and blogs.

kroma_find_graphic_inspiration

Mood-boards the artifacts that aren't a web page — social posts, pitch decks, OG images, logos, footers, branding, print. asset routes straight to the specialist gallery: posts.design, Deck.gallery, OGFolio, Logoinspo, Footer.design.

kroma_find_icons_and_logos

Searches icon sets and brand-mark libraries — Koboyo (133,000+ free hand-drawn SVGs), Logoinspo (1,200+ curated logos), SVGL, Simple Icons, Lucide, Phosphor, Tabler, Heroicons, Hugeicons, Iconify, Streamline, Noun Project.

kroma_find_ui_inspiration

Searches live galleries (Mobbin, Godly, Awwwards, Dribbble, Lapa Ninja, Minimal Gallery, Land-book, Saaspo, Inspora, Behance…) via Google Images for visual UI/UX inspiration.

kroma_generate_blueprint

Generates a full engineering blueprint (.md) for a larger project — overview, architecture, stack, data model, milestones, testing, plus optional live design/component/effect references. Returns the Markdown for you to save (stateless — writes no files).

kroma_list_sources

Lists all six curated source registries so the agent can discover exact sources names and routing tags. Runs offline — no API key needed.

kroma_scrape_site_design

Scrapes any live URL and extracts layout, typography outline, fonts, color palette, and CSS/framework fingerprints (Tailwind, Radix, Framer, Next.js…).

kroma_search_design_web

General-purpose design/front-end web search, optionally scoped to specific domains. For anything the specialized tools don't cover.

Tool change history

Compared across complete checks of the same configuration. Tools were listed, not invoked. Input-schema changes are not measured here.

No complete tool checks yet.

FAQ

Questions about Kroma MCP Server

How do I connect Kroma MCP Server to Claude?: Run `claude mcp add kromamcp -- npx -y @kromamcp/server` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.
Is Kroma MCP Server free?: The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.
What can Kroma MCP Server do?: Kroma MCP Server documents 10 tools to the agent, including kroma_find_backgrounds_and_gradients, kroma_find_component_code, kroma_find_effects_and_shaders. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.