Spark UI MCP Server

Connect Spark UI to Claude, Cursor, or any MCP-compatible client. Your agent can then search all 66 animated components and pull their full React + TypeScript source directly into your project, with no copy-pasting from the browser.

Claude Code

Add the server with a single command.

claude mcp add --transport http spark-ui https://spark-ui-cyan.vercel.app/api/mcp

Cursor, Claude Desktop & others

Add this to your client's MCP configuration file.

{
  "mcpServers": {
    "spark-ui": {
      "type": "http",
      "url": "https://spark-ui-cyan.vercel.app/api/mcp"
    }
  }
}

Endpoint

Streamable HTTP transport. A GET returns a small status payload you can check in a browser.

https://spark-ui-cyan.vercel.app/api/mcp

Available tools

list_components(category?)

Lists every component with its slug, category, and description. The place to start.

search_components(query)

Keyword search across names, categories, descriptions, and feature lists.

get_component(slug, props?)

Returns the full React + TypeScript source for one component, plus its props, npm dependencies, and the static assets it references.

Try it

Once connected, ask your agent things like:

·“What animated components are available in Spark UI?”
·“Find me a scroll-driven text reveal and add it to my landing page.”
·“Pull in the aurora login card component and wire it up with my own images.”

Prefer a CLI?

The same registry backs the command line, if you would rather add components yourself.

npx spark-ui-registry@latest list

npx spark-ui-registry@latest add aurora-login-card

REST alternative

The same catalogue is available over plain HTTP if you would rather not use MCP.

curl https://spark-ui-cyan.vercel.app/api/components

curl https://spark-ui-cyan.vercel.app/api/components/aurora-login-card