Skip to content

MCP (Model Context Protocol) Tools

This document covers MCP server integrations that enhance Claude Code's capabilities during development.

What are MCP Tools?

MCP (Model Context Protocol) is a standard for connecting AI assistants to external data sources and tools. MCP servers give Claude Code direct access to: - Component registries (shadcn/ui) - Databases - File systems - APIs - And more...

Available MCP Servers

shadcn/ui Registry

Purpose: Direct access to shadcn/ui component registry for searching, viewing, and adding UI components.

Status: ✅ Active

Setup

Run this command once per project inside your Next.js app directory:

npx shadcn@latest mcp init --client claude

What this does: - Configures MCP server connection in project - Enables Claude Code to search and view shadcn components - No additional dependencies added to package.json

Capabilities

Once configured, Claude Code can:

  1. List all components in the registry
  2. Search components by name or description
  3. View component details (props, usage, code)
  4. Get usage examples with full implementation code
  5. Generate add commands for installing components

Usage Examples

In conversation with Claude:

You: "Show me all available shadcn components"
Claude: [Uses mcp__shadcn__list_items_in_registries]

You: "Find calendar components"
Claude: [Uses mcp__shadcn__search_items_in_registries]

You: "Show me examples of the button component"
Claude: [Uses mcp__shadcn__get_item_examples_from_registries]

Claude can then: - Show you the component code - Explain props and usage - Give you the exact npx shadcn add command - Help integrate the component into your app

When to Use

Use shadcn MCP when: - Building new UI features - Looking for pre-built component patterns - Need accessible, tested components - Want consistent UI across apps

Don't use when: - Component doesn't exist in registry (build custom) - Need highly specialized behavior - Simple HTML/Tailwind is sufficient

Component Categories

Available in registry: - UI Components (60+): buttons, inputs, dialogs, tables, etc. - Blocks (90+): complete page sections (sidebars, login forms, dashboards) - Charts (100+): area, bar, line, pie, radar charts with variants - Examples (250+): demos for every component variant - Utilities: hooks, lib functions, themes

See complete list: [Query Claude with "show me all shadcn components"]

Integration with App Conventions

See /root/tower-fleet/docs/reference/app-conventions.md for: - When to use shadcn vs custom components - Styling patterns with shadcn - Accessibility considerations - Component composition patterns

Future MCP Servers

Additional MCP servers under consideration:

  • Database MCP: Direct schema inspection and query capabilities
  • Filesystem MCP: Enhanced file navigation and search
  • Git MCP: Repository history and branch management
  • API MCP: OpenAPI schema exploration

Submit requests for new MCP integrations via GitHub issues.

Troubleshooting

"MCP server not found"

Cause: mcp init not run in project directory

Fix: 

cd /root/projects/<app-name>
npx shadcn@latest mcp init --client claude

Then restart Claude Code session.

"Component not found in registry"

Cause: Component name misspelled or doesn't exist

Fix: Use search instead of exact match: 

You: "Search for accordion components"
Claude: [Searches with fuzzy matching]

Permission errors when adding components

Cause: File ownership issues (host vs container)

Fix: See /root/tower-fleet/docs/workflows/creating-new-app.md#file-permissions

See Also