Skip to main content
Glama
thatcreativetayo

Kroma MCP

by thatcreativetayo
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Kroma MCP — @kromamcp/server

A completely stateless, internet-connected Model Context Protocol server for UI/UX design inspiration, live component discovery, and modern web micro-effects.

Kroma turns your AI assistant into a design scout. Ask for "a glassmorphic pricing card in React", "a grainy mesh gradient hero as CSS", "hand-drawn rocket icons", or "OG image inspiration for a dev tool" and Kroma resolves it live from the best design galleries, component libraries, gradient generators, icon sets, and code playgrounds on the internet — no local database, no cache, no stored files.

Every request is resolved in real time via the Serper API (Google Search / Images / Scrape).

✨ Highlights

  • Completely stateless — zero databases, zero local caches, zero file storage. Every answer is fetched fresh.

  • Real-time internet resolution — live queries against curated design galleries, component docs, and code repos.

  • Multi-tenant & zero-config — connect and go. Keys resolve per-request from the environment or a tool argument.

  • Two transports — stdio for desktop/IDE hosts, and Streamable HTTP + SSE for remote hosting.

  • 10 specialized tools — UI inspiration, graphic & brand inspiration, components, effects/shaders, backgrounds & gradients, icons & logos, site scraping, open web search, source discovery, and engineering-blueprint generation.

  • Smart source routing — every curated source is tagged, so asking for a mesh gradient as CSS or an OG image hits only the handful of sources that actually serve it.

Related MCP server: go_serper_mcp_server

🔑 Prerequisites

  1. Node.js ≥ 18

  2. A Serper API key — grab a free one at serper.dev (2,500 free credits to start).

Set it as an environment variable:

export SERPER_API_KEY="your_serper_key_here"

You can also pass a per-call api_key argument to any tool — it takes precedence over the env var. This is what makes Kroma multi-tenant: different callers can bring their own key.

🚀 Quickstart (npx)

No install required — run the latest published version directly:

SERPER_API_KEY=your_key npx -y @kromamcp/server

That starts the server on stdio, ready for any MCP host.

🧰 The Tools

Tool

What it does

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_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_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_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 generators with direct URLs.

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_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.

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_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).

Example tool arguments

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

// kroma_find_component_code
{ "component": "command palette", "framework": "react", "keywords": "tailwind accessible" }

// kroma_find_effects_and_shaders
{ "effect": "animated glowing border", "category": "glow", "framework": "react" }

// kroma_find_graphic_inspiration
{ "query": "developer tool launch announcement", "asset": "social-post", "num": 12 }
{ "query": "seed round pitch deck", "asset": "deck" }
{ "query": "dark OG image with product screenshot", "asset": "og-image" }

// kroma_find_backgrounds_and_gradients
{ "look": "dark purple hero backdrop", "style": "mesh", "format": "css" }
{ "look": "warm grainy noise texture", "style": "grainy", "include_previews": true }
{ "look": "accessible brand color ramp", "style": "palette", "format": "code" }

// kroma_find_icons_and_logos
{ "query": "rocket deploy", "kind": "icon", "style": "hand-drawn", "free_only": true }
{ "query": "minimal fintech symbol", "kind": "logo" }

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

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

// kroma_generate_blueprint
{ "project": "Fintech onboarding dashboard", "kind": "dashboard", "stack": ["Next.js", "TypeScript", "Postgres"], "goals": ["Reduce drop-off", "SOC2-ready"], "depth": "deep" }

Every tool returns both a readable JSON text block and structuredContent. Errors come back as graceful isError results (with an auth / request / unknown kind) instead of crashing the session.

Honest results

Google silently drops the site: operator when the scoped domains have a thin search index — and several of the best galleries (Deck.gallery, OGFolio, Footer.design, Ramps) are recent single-page apps with almost nothing indexed. So the three routing tools tell you exactly what you got:

Field

Meaning

curatedSource

Per result: the curated source it actually came from, or null if it's off-registry. Curated hits are sorted first.

curatedCount

How many of the returned results genuinely came from the curated set.

widened

true if the narrow route returned nothing and Kroma retried across the full registry.

hint

Set only when curatedCount is 0 — names the gallery URLs to open or pass to kroma_scrape_site_design, which reads these SPAs reliably even when Google can't.

generators / galleries / libraries always carry the matched sources with direct URLs. For a single-page generator like ColorFlow or Pryzm, that URL is the answer — there's no article to find.

🖥️ Client Setup

Claude Desktop

Edit the config file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "kroma": {
      "command": "npx",
      "args": ["-y", "@kromamcp/server"],
      "env": {
        "SERPER_API_KEY": "your_serper_key_here"
      }
    }
  }
}

Restart Claude Desktop. You'll see the Kroma tools appear under the tools menu.

Cursor

Add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project):

{
  "mcpServers": {
    "kroma": {
      "command": "npx",
      "args": ["-y", "@kromamcp/server"],
      "env": { "SERPER_API_KEY": "your_serper_key_here" }
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "kroma": {
      "command": "npx",
      "args": ["-y", "@kromamcp/server"],
      "env": { "SERPER_API_KEY": "your_serper_key_here" }
    }
  }
}

Roo Code

In the Roo Code MCP settings (mcp_settings.json), add:

{
  "mcpServers": {
    "kroma": {
      "command": "npx",
      "args": ["-y", "@kromamcp/server"],
      "env": { "SERPER_API_KEY": "your_serper_key_here" },
      "alwaysAllow": [
        "kroma_find_ui_inspiration",
        "kroma_find_graphic_inspiration",
        "kroma_find_component_code",
        "kroma_find_effects_and_shaders",
        "kroma_find_backgrounds_and_gradients",
        "kroma_find_icons_and_logos",
        "kroma_scrape_site_design",
        "kroma_search_design_web",
        "kroma_list_sources",
        "kroma_generate_blueprint"
      ]
    }
  }
}

🌐 Remote Hosting (HTTP + SSE)

For a shared, always-on deployment, run Kroma over HTTP:

SERPER_API_KEY=your_key npx -y @kromamcp/server --transport http --port 3000
# or: KROMA_TRANSPORT=http PORT=3000 npx -y @kromamcp/server

This exposes:

Path

Method

Purpose

/mcp

POST / GET / DELETE

Streamable HTTP transport (modern, recommended)

/sse

GET

Legacy SSE stream (Cursor / Windsurf compatibility)

/messages?sessionId=…

POST

SSE message channel

/health

GET

Liveness probe → { "ok": true }

Connecting a client to the SSE endpoint

Hosts that support a URL/SSE endpoint (e.g. Cursor, Windsurf) can point at:

{
  "mcpServers": {
    "kroma": {
      "url": "https://your-host.example.com/sse"
    }
  }
}

Or the Streamable HTTP endpoint:

{
  "mcpServers": {
    "kroma": {
      "url": "https://your-host.example.com/mcp"
    }
  }
}

When self-hosting, provide SERPER_API_KEY in the server's environment, or have each caller pass an api_key tool argument for true multi-tenant, bring-your-own-key operation.

⚙️ Configuration

Variable

Default

Description

SERPER_API_KEY

—

Required (unless passing api_key per call). Your Serper key.

SERPER_TIMEOUT_MS

20000

Per-request timeout in milliseconds.

KROMA_TRANSPORT

stdio

stdio or http.

PORT / KROMA_PORT

3000

HTTP port (http transport).

KROMA_HOST

0.0.0.0

HTTP bind host (http transport).

CLI flags: --transport <stdio|http>, --http, --port <n>, --host <h>, --help, --version.

🛠️ Local Development

git clone <this-repo>
cd kroma-mcp
npm install
npm run build        # compile TypeScript → dist/
npm start            # run the compiled server (stdio)
npm run dev          # tsc --watch
npm run typecheck    # type-check without emitting

Project layout

src/
  index.ts                 # entry point + stdio/http transports
  services/serper.ts       # stateless Serper API gateway (search/images/scrape)
  lib/
    sources.ts             # curated source registries + query builders
    response.ts            # MCP result helpers + error guard
  tools/
    find-ui-inspiration.ts
    find-graphic-inspiration.ts
    find-component-code.ts
    find-effects-and-shaders.ts
    find-backgrounds-and-gradients.ts
    find-icons-and-logos.ts
    scrape-site-design.ts
    search-design-web.ts
    list-sources.ts
    generate-blueprint.ts

Adding a source

Every source is a CuratedSource in src/lib/sources.ts:

{
  name: "Grainient",
  domain: "grainient.supply",
  note: "1,000+ grainy, smooth, and animated gradients plus AI backgrounds and a shader tool",
  tags: ["grainy", "animated", "mesh", "ai", "shader", "image"],
}

Drop it into the right registry (INSPIRATION_SOURCES, COMPONENT_SOURCES, EFFECT_SOURCES, GRAPHIC_SOURCES, BACKGROUND_SOURCES, ICON_SOURCES) and it's live — kroma_list_sources reads the arrays directly and the search tools build site: queries from them. name is what callers pass in sources; tags are what the asset / style / format / kind filters match against.

Architecture principles

  • Stateless by construction. No module holds user data between requests; HTTP sessions live only in-memory for the process lifetime and store no personal data.

  • Dynamic key resolution. resolveApiKey(explicit?) prefers an explicit api_key argument, then SERPER_API_KEY. Nothing is persisted.

  • Graceful failure. Network errors, timeouts, and auth failures become typed, readable tool errors — never uncaught throws.

  • Widening fallbacks. Source filters never return an empty set: an unrecognised name or an over-narrow tag combination widens back to the parent registry, so a bad argument degrades into a broader search instead of zero results.

📄 License

MIT © 2026 Kroma MCP

Available Tools

6 tools
kroma_find_component_codeFind Component CodeA

Search live web docs and repos (shadcn/ui, Magic UI, Aceternity, Uiverse, Tailwind, Radix, Headless UI, Flowbite, daisyUI, GitHub, and more) for copy-paste React/Vue/Svelte components. Returns doc pages, source links, and snippets. Use framework to target React/Vue/Svelte and keywords to refine.

ParametersJSON Schema
NameRequiredDescriptionDefault
numNoNumber of results to return (1-20, default 10).
api_keyNoOptional Serper API key override. Falls back to SERPER_API_KEY env var.
sourcesNoOptional subset of library names (e.g. ['shadcn/ui','Magic UI']). Omit to search all curated component sources.
keywordsNoExtra keywords to refine, e.g. 'tailwind accessible dark mode'.
componentYesThe component or pattern to find, e.g. 'animated bento grid', 'command palette', 'multi-step form', 'pricing table', 'sidebar navigation'.
frameworkNoTarget framework filter (default 'react'). Use 'any' to not constrain.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the behavioral burden. It transparently explains the tool performs live searches of web docs and repos (which implies network/read-only behavior) and specifies what it returns. It doesn't discuss rate limits or error behavior, but for a search tool this is sufficient core transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with the purpose, source list, return types, and key parameters included. It is front-loaded and every sentence earns its place, with no filler or repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite no output schema, the description specifies return categories (doc pages, source links, snippets), lists major sources, and names framework/keywords for refinement. It doesn't mention defaults (React, 10 results), but the schema covers those. Overall it is sufficiently complete for a search tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, giving a baseline of 3. The description adds meaning by explicitly explaining the roles of framework and keywords as refining controls, complementing the schema descriptions. This lifts it above baseline without being redundant.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states the verb ('Search') and specific resource ('live web docs and repos') for copy-paste React/Vue/Svelte components, which distinguishes it from sibling tools focused on design inspiration or effects. It also lists return types (doc pages, source links, snippets), fully clarifying what the tool does.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives clear context for when to use the tool (finding copy-paste component code) and explains how to refine with framework and keywords. It doesn't explicitly mention when not to use it or name sibling alternatives, but the component-code focus implies the boundary.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

kroma_find_effects_and_shadersFind Effects & ShadersA

Discover modern web micro-effects and motion techniques: GLSL/canvas shaders, Framer Motion variants, GSAP scroll timelines, glassmorphism, glowing borders, Three.js scenes, and more — sourced live from CodePen, Shadertoy, Codrops, GitHub, and technique blogs. Use category and framework to bias results.

ParametersJSON Schema
NameRequiredDescriptionDefault
numNoNumber of results to return (1-20, default 10).
effectYesThe effect to find, e.g. 'liquid metal shader', 'magnetic button', 'scroll reveal', 'aurora gradient background', 'animated glowing border'.
api_keyNoOptional Serper API key override. Falls back to SERPER_API_KEY env var.
sourcesNoOptional subset of source names (e.g. ['CodePen','Shadertoy']). Omit to search all curated effect sources.
categoryNoEffect category to bias the search (default 'any').
frameworkNoOptional framework filter, e.g. 'react' for Framer Motion. Default 'any'.

TDQS

A3.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the burden. It mentions that results are 'sourced live' from various websites, which conveys the web-search behavior. However, it does not disclose details like API key usage, rate limits, or potential failure modes, which would improve transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences long, front-loaded with the primary action and resource, and includes a compact list of examples and sources. Every word earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a search/find tool with 6 parameters and no output schema, the description explains the purpose and sources but does not mention what the results look like or that the 'effect' parameter is required. The API key fallback is only in the schema, not the description. It is adequate but has gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3. The description adds value by explicitly calling out category and framework as biasing parameters and providing concrete effect examples, which helps users formulate the required 'effect' parameter. This goes slightly beyond what the schema alone provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: discovering modern web micro-effects and motion techniques. It lists specific examples (GLSL/canvas shaders, Framer Motion variants, etc.) and sources, distinguishing it from sibling tools like kroma_find_ui_inspiration or kroma_find_component_code.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides context (finding effects) and suggests using category/framework to bias results, but it does not explicitly contrast with alternatives or state when not to use this tool. Usage is implied rather than directly guided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

kroma_find_ui_inspirationFind UI/UX InspirationA

Search live design galleries (Mobbin, Godly, Awwwards, Dribbble, Lapa Ninja, Minimal Gallery, Land-book, Behance, and more) via Google Images for visual UI/UX inspiration. Returns image URLs, the page each shot lives on, and the gallery it came from. Great for mood-boarding a screen, flow, or aesthetic.

ParametersJSON Schema
NameRequiredDescriptionDefault
glNoCountry code for geo-targeting, e.g. 'us'.
hlNoUI language, e.g. 'en'.
numNoNumber of images to return (1-20, default 12).
queryYesWhat to find inspiration for, e.g. 'fintech dashboard dark mode', 'bento grid landing page', 'onboarding flow', 'glassmorphism pricing'.
api_keyNoOptional Serper API key override. Falls back to SERPER_API_KEY env var.
sourcesNoOptional subset of gallery names to restrict the search to (e.g. ['Mobbin','Awwwards']). Omit to search all curated galleries.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description discloses the core behavior: searching via Google Images, returning image URLs, and page/gallery info. It does not mention limitations like reliance on external APIs, but it is transparent about the mechanism and output.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is exactly two sentences: the first states the function and resource, the second covers output and use case. It is front-loaded, concise, and contains no filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers purpose, mechanism, return values, and usage context. Since there is no output schema, it does well to state what it returns. It could add limitations or error behavior, but it is sufficiently complete for a search tool with a well-defined schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Although the schema covers all parameters, the description adds value by enumerating specific gallery names (e.g., Mobbin, Awwwards) that map to the `sources` parameter and explains the overall search mechanism ('via Google Images'), enriching the semantics of query, gl, hl, and num.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Search live design galleries via Google Images') and specific resources (Mobbin, Godly, Awwwards, etc.), distinguishing it from sibling tools like kroma_scrape_site_design or kroma_search_design_web.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It provides clear context with 'Great for mood-boarding a screen, flow, or aesthetic,' indicating when to use it. It does not explicitly mention alternatives or exclusions, but the context implies a visual inspiration use case, distinguishing it from code/effects tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

kroma_list_sourcesList Curated SourcesA

List the curated source registries Kroma searches — design galleries, component libraries, and effect/shader sources. Use this to discover the exact source names you can pass to the sources argument of the other Kroma tools. Runs offline; no API key required.

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoWhich registry to list (default 'all').

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the burden of disclosure. It adds valuable context by stating that it runs offline and requires no API key, which is not obvious from the schema. However, it does not describe the exact structure of the returned registry list, leaving a minor gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, front-loaded with the core action, and every sentence adds value. It avoids redundancy and clearly communicates purpose, usage, and operational traits.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool, the description covers purpose, usage, and operational context. The absence of an output schema is offset by the clear statement that it returns the curated source registries, though it could be slightly more explicit about the return format. Overall, it is sufficiently complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already fully covers the `category` parameter with an enum and description. The description adds extra meaning by mapping the enum values to design galleries, component libraries, and effect/shader sources, and by explaining that the output feeds the `sources` argument of other tools.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool lists curated source registries for design galleries, component libraries, and effect/shader sources. It differentiates itself from siblings by explicitly noting it is the way to discover source names for other Kroma tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit guidance on when to use this tool: to discover exact source names for the `sources` argument of other Kroma tools. It also mentions that it runs offline and requires no API key, covering practical usage constraints.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

kroma_scrape_site_designScrape Site DesignA

Scrape any live URL and extract design-relevant metadata: page title/description, a heading/typography outline, detected font families, a color-palette hint, and CSS/utility framework fingerprints (Tailwind, Radix, Framer, GSAP, Next.js, etc.). Ideal for reverse-engineering the structure and styling of a site you admire.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesThe fully-qualified URL to analyze, e.g. 'https://linear.app'.
api_keyNoOptional Serper API key override. Falls back to SERPER_API_KEY env var.
include_rawNoInclude the full raw markdown/text (can be large). Default false — a preview is returned.
include_markdownNoInclude the scraped page content as markdown in the response (default true).

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the transparency burden. It discloses the output metadata types and implies a network scrape, but it does not mention the external Serper API dependency, potential rate limits, or failure modes like blocked sites. The api_key parameter is in the schema but not discussed in the description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, front-loaded with the primary action and a clear list of extracted data. The second sentence adds a concrete use case without any filler. Every clause earns its place, making it concise yet informative.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a scraping tool with no annotations, the description covers purpose, output content, and a use case. It does not mention return format or operational caveats (like API key requirements or blocked URL handling), but the schema partially fills those gaps. It is adequate for an agent to decide whether to use the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema covers 100% of parameters with descriptions, so the baseline is 3. The description does not add additional meaning about include_raw/include_markdown defaults or api_key fallback behavior; it only reinforces the core URL analysis purpose. The schema itself does the heavy lifting here.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool scrapes any live URL and extracts specific design metadata (title, typography, fonts, colors, framework fingerprints). The verb 'scrape' plus the resource 'live URL' and the explicit output list distinguish it from sibling tools that search or find inspiration.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly identifies when to use it: 'Ideal for reverse-engineering the structure and styling of a site you admire.' It provides clear context but does not mention alternatives or when not to use it, so it misses a bit of the full guideline picture.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

kroma_search_design_webSearch Design WebA

General-purpose live web search tuned for design and front-end topics. Unlike the specialized tools, this is not locked to curated galleries — use it for design systems, articles, accessibility guidance, tokens, or anything else. Optionally scope to explicit domains with sites.

ParametersJSON Schema
NameRequiredDescriptionDefault
glNoCountry code for geo-targeting, e.g. 'us'.
hlNoUI language, e.g. 'en'.
numNoNumber of results to return (1-20, default 10).
tbsNoTime filter, e.g. 'qdr:y' for the past year.
queryYesAny design/front-end web query, e.g. 'design tokens naming conventions'.
sitesNoOptional list of domains to restrict to, e.g. ['smashingmagazine.com','web.dev'].
api_keyNoOptional Serper API key override. Falls back to SERPER_API_KEY env var.

TDQS

A4.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must carry the behavioral burden. It discloses that this is a live web search and that results can be scoped via `sites`, which is useful. However, it does not mention return format, error behavior, rate limits, or authentication requirements, leaving notable gaps in transparency for an unannotated tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is only two sentences, with the core purpose front-loaded in the first sentence. It efficiently contrasts with specialized tools and highlights the optional `sites` parameter without redundant detail. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's general-purpose nature, 7 parameters, no output schema, and no annotations, the description provides enough context for selection and invocation: what it does, when to use it, and a key parameter. It could be more complete by briefly describing the return structure or limitations, but it is not critically inadequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all 7 parameters. The description mentions `sites` for domain scoping, but this is already in the schema, adding no new semantic value. With full schema coverage, the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a clear specific verb and resource: 'General-purpose live web search tuned for design and front-end topics.' It also differentiates from siblings by stating this is not locked to curated galleries, unlike the specialized tools. This makes the tool's purpose unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly contrasts with specialized tools and gives concrete use cases: 'use it for design systems, articles, accessibility guidance, tokens, or anything else.' This tells the agent exactly when to choose this general tool over the sibling tools like kroma_find_ui_inspiration or kroma_find_component_code.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4.4/5.0
Disambiguation5/5

Each tool targets a distinct purpose: finding visual inspiration, scraping site metadata, general web search, listing sources, finding components, and finding effects. The overlap between find_ui_inspiration and search_design_web is minimal and clearly differentiated by scope.

Naming Consistency5/5

All tool names follow the consistent pattern 'kroma_<verb>_<noun>' in snake_case. Verbs are varied but always action-oriented, and the nouns clearly indicate the resource type, making the naming predictable and readable.

Tool Count5/5

With 6 tools, the server is well-scoped for design discovery and analysis. Each tool covers a distinct aspect of the workflow without redundancy, and the count is neither too thin nor overwhelming.

Completeness5/5

The tool set covers the full lifecycle implied by the domain: finding inspiration, scraping live sites, searching the web, listing available sources, and locating components and effects. There are no obvious missing operations for the server's stated purpose.

Maintenance

ActivityMaintained
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • Memory Store MCP Server

    divslingerx
    A
    license
    B
    quality
    D
    maintenance
    A lightweight, stateless MCP server utilizing Puppeteer for web searches, returning structured JSON results, easily integratable with other MCP-enabled systems.
    1
    225
    1
    MIT

  • go_serper_mcp_server

    hightemp
    A
    license
    Not graded
    quality
    D
    maintenance
    A Go-based MCP server that provides comprehensive access to the Serper Google Search API, including tools for images, news, maps, and scholar results. It also features a dedicated endpoint for scraping webpage content directly.
    10
    MIT

  • miromiro-mcp

    SoraiaBarroso
    A
    license
    Not graded
    quality
    B
    maintenance
    MCP server for the MiroMiro design-extraction API. It extracts real design data from live websites—including brand colors, fonts, tokens, SVGs, images, and component code—so AI agents can build from actual values.
    339
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/thatcreativetayo/kromamcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server