Sprout Social

Components

Seeds MCP Server

A Model Context Protocol (MCP) server that provides AI assistance for the Seeds Design System, enabling intelligent help with component migrations and usage guidance.

Overview

The Seeds MCP Server is a Model Context Protocol (MCP) server that provides AI assistance for the Seeds Design System. This server enables engineers to get intelligent help with component migrations, usage guidance, and design system knowledge directly within MCP-compatible AI tools and IDEs.

Features

  • Component Migration Assistance: Automatically analyze deprecated components and provide migration paths to newer versions
  • Component Search & Discovery: Find components by name, functionality, or use case
  • Detailed Usage Information: Get comprehensive documentation, props, examples, and best practices for any component
  • Real-time Component Analysis: Access live component metadata and documentation
  • Migration Planning: Generate step-by-step migration plans for complex component updates

Installation

Prerequisites

  • An MCP-compatible IDE or AI tool (such as Cursor or VS Code)
  • Node.js version 18 or higher
  • Access to the Seeds repository

Setup

  1. Clone and build the Seeds MCP server:
git clone https://github.com/sproutsocial/seeds-packets.git
cd seeds-packets/seeds-tooling/seeds-mcp-server
yarn install
yarn build
  1. Configure your IDE:

Cursor

  1. Open Cursor and find your Cursor Settings
  2. Click on Tools and Integrations
  3. Click the "New MCP Server" button to add a new MCP server
  4. Add the following JSON configuration:
{
  "name": "Seeds Design System",
  "type": "stdio",
  "command": "node",
  "args": [
    "/path/to/your/seeds-packets/seeds-tooling/seeds-mcp-server/dist/index.js",
    "--seeds-root",
    "/path/to/your/seeds-packets"
  ]
}

Replace /path/to/your/seeds-packets with the actual path to your Seeds repository.

VS Code

VS Code supports multiple configuration methods. Choose one of the following:

Option 1: Workspace Configuration (Recommended)

Create a .vscode/mcp.json file in your workspace:

{
  "servers": {
    "seeds-design-system": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/path/to/your/seeds-packets/seeds-tooling/seeds-mcp-server/dist/index.js",
        "--seeds-root",
        "/path/to/your/seeds-packets"
      ]
    }
  }
}

Option 2: Extensions View

  1. Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
  2. Look for the MCP servers section
  3. Follow the prompts to add a new server

Option 3: Command Palette

  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)

  2. Run MCP: List Servers

  3. Follow the prompts to add a new server

  4. Restart your IDE

Usage Examples

Component Migration

Ask your AI assistant to help migrate deprecated components:

I have this old menu code that needs to be updated:


<MenuButton content={<Menu>...</Menu>}>
  Open Menu
</MenuButton>


Can you help me migrate it to the new menu system?

Component Discovery

Find the right component for your use case:

I need a component for user profile pictures. What's available in Seeds?

Component Usage

Learn how to use a specific component:

How do I use the new ActionMenu component? Show me examples and props?

Available Tools

The MCP server provides these AI-callable functions:

migrate_component

Analyze React code and provide migration assistance for deprecated Seeds components.

Parameters:

  • code (required): React code snippet to analyze
  • sourceComponent (optional): Specific deprecated component to migrate from
  • targetComponent (optional): Specific component to migrate to

search_components

Search for Seeds components by name, functionality, or use case.

Parameters:

  • query (required): Search term (e.g., "button", "menu", "form input")
  • includeDeprecated (optional): Include deprecated components in results
  • includeExamples (optional): Include code examples in results

get_component_usage

Get comprehensive usage information for a specific Seeds component.

Parameters:

  • componentName (required): Name of the component (e.g., "Button", "Avatar")
  • includeAllExamples (optional): Include all available examples
  • includeAdvancedUsage (optional): Include advanced patterns and recipes

Verification

Test the setup by asking your AI assistant:

Search for button components in the Seeds design system

You should see your AI tool using the MCP server to find and describe Seeds components.

Troubleshooting

If your AI tool can't find the server:

  • Check that the file paths in your config are correct
  • Ensure the build completed successfully (yarn build)
  • Restart your MCP-compatible tool completely
  • Verify your Seeds repository is up to date
  • Check your tool's documentation for MCP server configuration requirements

Feedback and Support

For issues, questions, or feedback:

License

MIT © Sprout Social, Inc.