MCP (Pro)

The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. It can browse your saved shaders, search across the full library of Pro presets, install and modify/hook up props, all without switching context.

Your API key

You'll need a personal API key to authenticate the MCP server. Generate one below, then use it in the configuration step.

Connect your tool

Add the following to your MCP client configuration, replacing YOUR_API_KEY with the key from your dashboard.

claude mcp add --transport http shaders https://shaders.com/mcp --header "Authorization: Bearer YOUR_API_KEY"

// .cursor/mcp.json
{
  "mcpServers": {
    "shaders": {
      "url": "https://shaders.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

// .windsurf/mcp_config.json
{
  "mcpServers": {
    "shaders": {
      "serverUrl": "https://shaders.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

// Lovable → Settings → Integrations → MCP Servers
{
  "name": "shaders",
  "url": "https://shaders.com/mcp",
  "headers": {
    "Authorization": "Bearer YOUR_API_KEY"
  }
}

[mcp_servers.shaders]
enabled = true
url = "https://shaders.com/mcp"

[mcp_servers.shaders.http_headers]
Authorization = "Bearer YOUR_API_KEY"

{
  "mcpServers": {
    "shaders": {
      "type": "http",
      "url": "https://shaders.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Start prompting

Once connected, your agent gains access to the following capabilities:

Browse and retrieve your shaders — list all effects saved to your Shaders account, then pull ready-to-use component code for any of them in your framework of choice (Vue, React, Svelte, Solid, or vanilla JS). Great for picking up a design you built in the editor and dropping it straight into your codebase.

Explore the Pro preset library — search and retrieve Pro collections and presets, complete with code exports, thumbnail previews, and additional context. Watch your agent find, install and customize from a high-quality starting point.

Modify and connect props to state — make changes to your shaders and presets in-code, then wire up props to reactive state in your framework of choice for compelling interactive effects.

Generate SDF from your SVG files — certain shape effects (like Glass, Emboss, or Neon) require what's called an "SDF" (Signed Distance Field) to work. You can just tell your agent to generate one for you from any SVG file in your codebase or from a public URL. It will generate and store the resulting SDF back in your codebase. In most cases, you won't have to worry about this, the agent knows it's needed and will just ask you which SVG you want to use.

Example prompts to get started:

Install my "Landing Hero" shader in the hero section as a background.

Add a shader to the background of this card, something blue with a subtle flowing animation.

Make the circle in this shader get bigger as we scroll past the section.

Add my logo.svg as a liquid glass effect on top of this shader.

Pro knowledge base

Beyond account access, Shaders Pro MCP includes an exclusive knowledge base of expert notes added into your agent's context — detailed guidance on advanced composition patterns that aren't part of the public documentation. Your agent reads these automatically when relevant, so you get higher-quality implementations out of the box rather than having to work through trial and error.

Certain collections and presets also provide additional contextual information, which makes it easier for your agent to understand how to best implement the specific look of that effect.

This is the difference between an agent that knows Shaders exists and one that knows how to use it well.