AI Assistant✨ One-Click Setup

MCP Server Setup

Enable AI assistants like Claude to intelligently work with shadcn-angular components. Setup in seconds with just a URL - no complex configuration needed!

✨ One-Click Setup

Just add this URL to your IDE's MCP configuration:

Text
https://shadcn-angular.tigayon.com/mcp

That's it! No build steps, no local server, no dependencies. Works instantly with Claude Desktop, Zed, Cline, and any MCP-compatible client. 🎉

How It Works

The shadcn-angular MCP server is hosted at shadcn-angular.tigayon.com and serves component information via HTTP endpoints. Your AI assistant connects directly to this service - no local installation, no build steps, no dependencies. Just add the URL to your IDE config and you're ready to go!

Deployed with Your App MCP endpoints are served directly from your Angular SSR server at /api/mcp Component Search Find components by name, description, or category instantly Multi-Package Manager Installation support for npm, pnpm, yarn, bun, and ng add

Prerequisites

  • An MCP-compatible IDE or client (Claude Desktop, Zed, Cline, etc.)
  • Internet connection to access the MCP service

That's it! No Node.js, no build tools, no local server needed. The MCP service is hosted and ready to use.

Setup Methods

Claude DesktopZedCline

Claude Desktop Configuration

Add the MCP server to your Claude Desktop configuration file:

1. Locate your config file

macOSWindowsLinux
Bash
~/Library/Application Support/Claude/claude_desktop_config.json

2. Add the configuration

Json
{
  "mcpServers": {
    "shadcn-angular": {
      "url": "https://shadcn-angular.tigayon.com/mcp",
      "transport": {
        "type": "sse"
      }
    }
  }
}

3. Restart Claude Desktop

Completely quit and restart Claude Desktop for the changes to take effect.

Verification

After configuration, verify the MCP server is working:

  1. Open Claude Desktop
  2. Look for an MCP indicator or connection status
  3. Try asking: "What shadcn-angular components are available?"
  4. Claude should respond with component information from the MCP server

Success

If Claude provides detailed component information, the MCP server is working correctly!

Available Tools

Once configured, Claude can access these MCP tools:

search_components Search for components by name, description, or category
Text
Ask Claude: "Search for button components"
get_component Get detailed information about a specific component
Text
Ask Claude: "Show me details about the Button component"
list_components List all available components with optional category filter
Text
Ask Claude: "List all form components"

Troubleshooting

MCP server not connecting

  • Verify the URL is correct: https://shadcn-angular.tigayon.com/mcp
  • Ensure you have a stable internet connection
  • Check your IDE's config file format (JSON must be valid)
  • Completely restart your IDE after configuration changes

Service unavailable

If you get a service unavailable error, the MCP service might be temporarily down. Try again in a few moments.

Tools not showing up

After adding the configuration, you should see MCP tools available in your IDE. If not:

  • Check your IDE's MCP settings or logs
  • Verify the URL is accessible in your browser
  • Make sure your IDE supports SSE (Server-Sent Events) transport

Next Steps

Explore Components Browse the component library and see what's available Installation Guide Learn how to install and configure shadcn-angular