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

Getting Component Information

Ask your AI assistant:

Show me how to use the AI Elements PromptInput component with different variants

Expected response will include current documentation and code examples.

Building Layouts

Help me create an AI app layout using AI Elements components

Your AI can suggest appropriate layout components and provide implementation code.

Styling Guidance

What are the recommended spacing tokens in AI Elements?

Get up-to-date information about design tokens and styling conventions.

Security and Privacy

Data Handling

The AI Elements MCP server only provides public component documentation
No personal data or code is transmitted to our servers
All communication happens through your chosen AI tool's security layer

Authentication

No authentication required for public component information
Future premium features may require API keys
Always use official AI Elements MCP endpoints

On this page