Source: https://ai-sdk.dev/elements/mcp

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

MCP Server

AI Elements supports the Model Context Protocol (MCP) for model-driven development.

The Model Context Protocol (MCP) is an open standard that allows AI assistants like Claude, Cursor, and other AI-powered tools to securely connect with external data sources and systems. Think of it as a "universal remote" that lets your AI tools access real-world data and functionality.

AI Elements supports MCP to supercharge your AI development workflow.

Installation Guide

Step 1: Choose Your AI Tool

First, make sure you're using an AI development tool that supports MCP:

Claude Desktop (Free - recommended for beginners)
Cursor (AI-powered code editor)
Windsurf by Codeium (AI development platform)
Other MCP-compatible tools

Step 2: Locate Your Configuration File

Depending on your AI tool, you'll need to edit one of these files:

Claude Desktop: .cursor/mcp.json
Cursor: .cursor/mcp.json
Windsurf: .codeium/windsurf/mcp_config.json
Other tools: Check your tool's MCP documentation

Step 3: Add AI Elements Configuration

Copy and paste this configuration into your MCP config file:

.cursor/mcp.json

{
  "mcpServers": {
    "ai-elements": {
      "command": "npx",
      "args": [\
        "-y",\
        "mcp-remote",\
        "https://registry.ai-sdk.dev/api/mcp"\
      ]
    }
  }
}

Step 4: Restart Your AI Tool

Close and reopen your AI application for the changes to take effect.

Step 5: Verify the Connection

Test the integration by asking your AI assistant:

What AI Elements components are available for building an AI app?

If successful, your AI should be able to list and explain AI Elements components!

Multiple MCP Servers

You can use AI Elements alongside other MCP servers:

.cursor/mcp.json

{
  "mcpServers": {
    "ai-elements": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://registry.ai-sdk.dev/api/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}

Usage Examples