### Quick Installation with npx

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Use npx for a quick start without any installation. Supports basic usage or enhanced rate limits with a GitHub token.

```bash
npx @jpisnice/shadcn-ui-mcp-server
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server -g ghp_your_token_here
```

--------------------------------

### Get Component Usage Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request examples demonstrating how to use specific shadcn/ui components.

```text
"Show me how to use the shadcn/ui card component"
```

```text
"Get the button component demo"
```

```text
"Show me examples of the dialog component"
```

--------------------------------

### Get Component Customization Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request examples demonstrating how to customize specific shadcn/ui components.

```text
"Show me how to customize the button component"
```

```text
"Get examples of card component customization"
```

```text
"Show me dialog component customization options"
```

--------------------------------

### Practical Block Examples for Building UIs

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/blocks.md

Use these commands to get starting points for building common UI sections like dashboards, login systems, calendars, and e-commerce sites using shadcn/ui blocks.

```text
"Help me build a dashboard using shadcn/ui blocks"
"Get the dashboard-01 block as a starting point"
"Show me how to customize the dashboard block"
```

```text
"Help me build a login system using shadcn/ui blocks"
"Get the login-01 block implementation"
"Show me how to customize the login form"
```

```text
"Help me build a calendar using shadcn/ui blocks"
"Get the calendar-01 block implementation"
"Show me how to customize the calendar"
```

```text
"Help me build an e-commerce site using shadcn/ui blocks"
"Get the products-01 block implementation"
"Show me how to customize the product listing"
```

--------------------------------

### Install project dependencies

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/CONTRIBUTING.md

Before starting development, install all necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Development Configuration Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Sets environment variables for transport mode, port, and CORS origins, then starts the server.

```bash
export MCP_TRANSPORT_MODE=sse
export MCP_PORT=3001
export MCP_CORS_ORIGINS="http://localhost:3000,http://localhost:8080"
node build/index.js
```

--------------------------------

### Framework Configuration Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/configuration/README.md

Examples demonstrating how to explicitly set the framework using command-line arguments.

```bash
npx @jpisnice/shadcn-ui-mcp-server
# or
npx @jpisnice/shadcn-ui-mcp-server --framework react
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework vue
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
```

--------------------------------

### Request Svelte Component with Usage Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a Svelte component along with its usage examples.

```text
"Get the Svelte card component with usage examples"
```

--------------------------------

### Docker Deployment Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Examples for deploying the shadcn-ui-mcp-server using Docker. This includes basic containerization, running with a GitHub API token via environment variables, and using Docker Compose for a recommended production setup. A health check endpoint is also shown.

```bash
# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server

# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health
```

--------------------------------

### Verify Server is Running Output

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

This is an example of the expected output when the MCP Server starts successfully.

```text
INFO: MCP Server starting...
INFO: Framework set to 'react' via command line argument
INFO: MCP Server configured for REACT framework
INFO: Repository: shadcn-ui/ui
INFO: File extension: .tsx
INFO: MCP Server ready
```

--------------------------------

### Global Installation and Execution

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Install the server globally for frequent use and run it from any directory. Requires a GitHub token for better rate limits.

```bash
npm install -g @jpisnice/shadcn-ui-mcp-server

shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

--------------------------------

### Basic CLI Usage

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

The server can be started with optional arguments. Defaults are provided for all options.

```bash
shadcn-mcp [options]
```

--------------------------------

### Request Vue Component

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a Vue component.

```text
"Show me the Vue button component"
```

--------------------------------

### Get Component Usage Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/INDEX.md

Retrieves usage examples for a specific component. Useful for understanding how to implement and utilize components.

```typescript
import { get_component_demo } from "@/lib/mcp/tools/component";

const componentDemo = await get_component_demo("button");
```

--------------------------------

### Request React Component Demo

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a usage demo for a React component.

```text
"Get the React card component demo"
```

--------------------------------

### Docker Compose Quick Start

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Builds and starts the server container using Docker Compose, then checks its health and tests an SSE connection.

```bash
# Build and start the container
docker-compose up --build -d

# Check health
curl http://localhost:7423/health

# Test SSE connection
curl -N -H "Accept: text/event-stream" http://localhost:7423/sse
```

--------------------------------

### Basic Setup with Framework Selection

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/configuration/README.md

Run the server with different framework configurations. Defaults to React if no framework is specified.

```bash
npx @jpisnice/shadcn-ui-mcp-server
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework vue
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
```

--------------------------------

### Usage Examples: Framework Comparison

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/integration/continue.md

Examples of prompts for comparing shadcn/ui components across different frameworks like React, Svelte, and Vue.

```text
"Compare the button component between React and Svelte"
"Show me the Vue version of the card component"
"Get the React form component with TypeScript"
```

--------------------------------

### Framework Detection Log Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/frameworks/README.md

Example log output indicating the framework being used by the server, including configuration details.

```bash
INFO: Framework set to 'svelte' via command line argument
INFO: MCP Server configured for SVELTE framework
INFO: Repository: huntabyte/shadcn-svelte
INFO: File extension: .svelte
```

--------------------------------

### Framework Selection Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Demonstrates how to specify the desired framework (React, Svelte, Vue, React Native) when running the server.

```bash
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
```

--------------------------------

### View Component Usage Examples

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/README.md

Use this command to see how a specific component is used and view its demos.

```text
"Show me how to use the card component"
```

--------------------------------

### Create Dashboard Prompt Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/prompts-reference.md

Example of how to invoke the 'create-dashboard' prompt handler with specific configuration options.

```typescript
const handler = promptHandlers["create-dashboard"];
const prompt = handler({
  dashboardType: "analytics",
  widgets: "charts,metrics,tables,timeline",
  navigation: "sidebar"
});
```

--------------------------------

### Request Vue Component Demo

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a usage demo for a Vue component.

```text
"Get the Vue card component demo"
```

--------------------------------

### Example Framework Comparison Requests

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/integration/claude-desktop.md

Examples of natural language prompts for comparing shadcn/ui components across different frameworks in Claude.

```text
"Compare the button component between React and Svelte"
"Show me the Vue version of the card component"
"Get the React dialog component with TypeScript"
```

--------------------------------

### Get Component Demo

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/api/README.md

Use the `get_component_demo` tool to fetch usage examples for a given component. Provide the component name in the arguments.

```typescript
// Get component demo
{
  "tool": "get_component_demo",
  "arguments": { "componentName": "card" }
}
```

--------------------------------

### Request React Native Component

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a React Native component.

```text
"Show me the React Native button component"
```

--------------------------------

### Request Svelte Component

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a Svelte component.

```text
"Show me the Svelte button component"
```

--------------------------------

### Get Component Demo Code

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/tools-reference.md

Retrieves example code demonstrating how to use a specific shadcn/ui component. Useful for understanding component integration.

```typescript
async function handleGetComponentDemo({ componentName }: { 
  componentName: string 
}): Promise<{ content: Array<{ type: string, text: string }> }>
```

```typescript
const demoCode = await toolHandlers.get_component_demo({ 
  componentName: "button" 
});
// Returns example usage of the button component
```

--------------------------------

### Local Development Server Start

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

Start the shadcn-mcp server for local development. This command sets the framework and UI library, then starts the server on the specified port.

```bash
export FRAMEWORK=react
export UI_LIBRARY=radix

shadcn-mcp --mode sse --port 7423
```

--------------------------------

### List Available React Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to list all available components for the React framework.

```text
"List all React components available"
```

--------------------------------

### Request React Component with TypeScript

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get a React component, specifically requesting TypeScript.

```text
"Show me the React button component with TypeScript"
```

--------------------------------

### Setup with GitHub Token

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/configuration/README.md

Configure the server with a GitHub Personal Access Token for API access, specifying the framework if needed.

```bash
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key ghp_your_token_here
```

--------------------------------

### Get Component Variants

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request examples showcasing different variants or styles of a shadcn/ui component.

```text
"Show me all button variants"
```

```text
"Get card component with different styles"
```

```text
"Show me dialog component variations"
```

--------------------------------

### List Available Vue Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to list all available components for the Vue framework.

```text
"List all Vue components available"
```

--------------------------------

### Install shadcn-ui MCP Server with Base UI

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Installs the shadcn-ui MCP server using npx, specifying React framework and Base UI library.

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base
```

--------------------------------

### Create a Dashboard with Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request component examples suitable for building dashboards, focusing on layout and display elements.

```text
"Show me the card and button components for a dashboard"
```

```text
"Get the layout components I need for a dashboard"
```

```text
"Show me how to use card components in a dashboard"
```

--------------------------------

### Install shadcn-ui MCP Server with Radix UI

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Installs the shadcn-ui MCP server using npx, defaulting to the React framework and Radix UI library.

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix
```

--------------------------------

### Globally Install shadcn-ui MCP Server

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Installs the shadcn-ui MCP server globally using npm. This is an optional installation method.

```bash
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Example Block Requests for shadcn/ui

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/integration/claude-desktop.md

Examples of natural language prompts to retrieve shadcn/ui block implementations or lists from Claude.

```text
"Get the dashboard-01 block implementation"
"Show me the calendar-01 block with all components"
"List all available shadcn/ui blocks"
```

--------------------------------

### Create Auth Flow Prompt Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/prompts-reference.md

Example of how to invoke the 'create-auth-flow' prompt handler to generate a login page with email and social login providers.

```typescript
const handler = promptHandlers["create-auth-flow"];
const prompt = handler({
  authType: "login",
  providers: "email,google,github",
  features: "remember-me,validation,password-recovery"
});
```

--------------------------------

### Install shadcn-ui MCP Server with Base UI via Environment Variable

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Installs the shadcn-ui MCP server using npx, setting the UI_LIBRARY environment variable to 'base' for React.

```bash
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Example Component Requests for shadcn/ui

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/integration/claude-desktop.md

Examples of natural language prompts to request shadcn/ui component source code or lists from Claude.

```text
"Show me the shadcn/ui button component source code"
"Get the card component with usage examples"
"List all available shadcn/ui components"
```

--------------------------------

### Install Dependencies for shadcn-ui-mcp-server

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Installs project dependencies using npm after cloning the repository.

```bash
# Install dependencies
npm install
```

--------------------------------

### Compare Svelte and React Button Implementations

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to compare component implementations across different frameworks.

```text
"Compare Svelte and React button implementations"
```

--------------------------------

### Usage Examples: Code Generation

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/integration/continue.md

Examples of prompts for generating code using shadcn/ui components and blocks with Continue.dev.

```text
"Generate a login form using shadcn/ui components"
"Create a dashboard with shadcn/ui blocks"
"Show me how to use the dialog component"
```

--------------------------------

### List Available React Native Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to list all available components for the React Native framework.

```text
"List all React Native components available"
```

--------------------------------

### Request Component Usage Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Ask your AI assistant to show how to use a specific shadcn/ui component.

```text
"Show me how to use the shadcn/ui card component"
```

--------------------------------

### Get Component with Dependencies

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request a component along with all its necessary dependencies and imports.

```text
"Get the button component with all its dependencies"
```

```text
"Show me the card component and what it needs"
```

```text
"Get the dialog component with required imports"
```

--------------------------------

### Run shadcn-ui MCP Server Locally with Options

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Examples of running the shadcn-ui MCP server locally after building, with different framework options.

```bash
# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte
```

--------------------------------

### Framework Detection Logs (Vue)

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/framework-selection.md

Example log output indicating that the Vue framework has been successfully configured via a command-line argument.

```bash
INFO: Framework set to 'vue' via command line argument
INFO: MCP Server configured for VUE framework
INFO: Repository: unovue/shadcn-vue
INFO: File extension: .vue
```

--------------------------------

### Verification Commands

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Commands to verify the server installation and check its version and help information.

```bash
# Check version
npx @jpisnice/shadcn-ui-mcp-server --version

# Check help
npx @jpisnice/shadcn-ui-mcp-server --help

# Run server (should start without errors)
npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Start shadcn-ui MCP Server in SSE Mode

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Command to start the shadcn-ui MCP server using Node.js, enabling SSE transport on a specified port.

```bash
# Start server in SSE mode
node build/index.js --mode sse --port 7423
```

--------------------------------

### SSE Transport Options Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/types.md

Provides an example configuration for Server-Sent Events transport, specifying port, host, CORS origins, and path.

```typescript
const config: SSETransportOptions = {
  port: 3000,
  host: "127.0.0.1",
  corsOrigin: ["http://localhost:3000", "https://myapp.com"],
  path: "/mcp/sse"
}
```

--------------------------------

### Build Navigation with Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Get component suggestions for building website navigation, including menus, breadcrumbs, and tabs.

```text
"Show me the navigation components for a website"
```

```text
"Get the breadcrumb and tabs components"
```

```text
"Show me how to build a navigation menu"
```

--------------------------------

### Check npx Availability

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Confirm that npx is installed and accessible in your environment.

```bash
npx --version
```

--------------------------------

### Build a Form with Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Get assistance and component suggestions for building specific forms like login or contact forms.

```text
"Help me build a login form using shadcn/ui components"
```

```text
"Show me the form components I need for a contact form"
```

```text
"Get the input and button components for a search form"
```

--------------------------------

### build-shadcn-page Usage Example

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/prompts-reference.md

Demonstrates how to invoke the build-shadcn-page prompt handler with specific parameters to generate a dashboard page.

```typescript
const promptHandler = promptHandlers["build-shadcn-page"];
const result = promptHandler({
  pageType: "dashboard",
  features: "charts,tables,user-menu",
  layout: "sidebar",
  style: "modern"
});
// Returns MCP prompt message for Claude
```

--------------------------------

### Get Component Dependencies

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Inquire about the dependencies and requirements for a specific shadcn/ui component.

```text
"What are the dependencies for the shadcn/ui dialog component?"
```

```text
"Show me the requirements for the card component"
```

```text
"What does the button component need to work?"
```

--------------------------------

### List All Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/api/README.md

Use the `list_components` tool to get a list of all available components. This tool requires no arguments.

```typescript
// List all components
{
  "tool": "list_components",
  "arguments": {}
}
```

--------------------------------

### Switching Between Frameworks for Comparison

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/framework-selection.md

Demonstrates how to sequentially switch between different frameworks to compare component implementations. This is useful for multi-framework development.

```bash
# Compare React and Svelte button components
npx @jpisnice/shadcn-ui-mcp-server --framework react
# Get React button component

npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Get Svelte button component

npx @jpisnice/shadcn-ui-mcp-server --framework vue
# Get Vue button component

npx @jpisnice/shadcn-ui-mcp-server --framework react-native
# Get React Native button component
```

--------------------------------

### Switch Frameworks via Command Line

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/frameworks/README.md

Demonstrates how to switch between different frameworks (Svelte, Vue, React, React Native) using command-line arguments.

```bash
# Switch to Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Switch to Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# Switch back to React
npx @jpisnice/shadcn-ui-mcp-server --framework react

# Switch to React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
```

--------------------------------

### Run Server in stdio Mode

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Starts the server using the default stdio transport mode. This is the default behavior if no mode is specified.

```bash
node build/index.js --mode stdio
# or
node build/index.js  # default mode
```

--------------------------------

### Run Server in Dual Mode

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Starts the server with both stdio and SSE transports enabled, specifying the port for the SSE endpoint.

```bash
node build/index.js --mode dual --port 7423
```

--------------------------------

### Command Line Options Overview

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Lists available command-line options for configuring the server, including GitHub token, framework selection, help, and version.

```bash
shadcn-ui-mcp-server [options]

Options:
  --github-api-key, -g <token>    GitHub Personal Access Token
  --framework, -f <framework>     Framework to use: 'react', 'svelte', 'vue', or 'react-native' (default: react)
  --help, -h                      Show help message
  --version, -v                   Show version information

Environment Variables:
  GITHUB_PERSONAL_ACCESS_TOKEN    Alternative way to provide GitHub token
  FRAMEWORK                       Framework to use: 'react', 'svelte', 'vue', or 'react-native' (default: react)

Examples:
  npx @jpisnice/shadcn-ui-mcp-server --help
  npx @jpisnice/shadcn-ui-mcp-server --version
  npx @jpisnice/shadcn-ui-mcp-server -g ghp_1234567890abcdef
  GITHUB_PERSONAL_ACCESS_TOKEN=ghp_token npx @jpisnice/shadcn-ui-mcp-server
  npx @jpisnice/shadcn-ui-mcp-server --framework svelte
  npx @jpisnice/shadcn-ui-mcp-server -f react
  export FRAMEWORK=svelte && npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Request React Native Component Metadata

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Example prompt to get metadata for a React Native component.

```text
"Get the React Native input component metadata"
```

--------------------------------

### Get Blocks with Component Files

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/blocks.md

Request a block along with all its associated component files and dependencies. This ensures you have all necessary parts for implementation.

```text
"Get the dashboard-01 block with all its component files"
"Show me the calendar-01 block with components"
"Get the login-02 block with all dependencies"
```

--------------------------------

### GitHub Token Setup Methods

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/installation.md

Shows two methods for providing a GitHub Personal Access Token: via command-line argument or environment variable.

```bash
# Method 1: Command line
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Method 2: Environment variable
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Manual SSE Testing

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Starts the server in SSE mode and tests multiple concurrent SSE connections, then checks the connection count.

```bash
# Start server in SSE mode
node build/index.js --mode sse --port 3001

# Test multiple connections
curl -N -H "Accept: text/event-stream" http://localhost:3001/sse &
curl -N -H "Accept: text/event-stream" http://localhost:3001/sse &

# Check connection count
curl http://localhost:3001/connections
```

--------------------------------

### Command Line Options Reference

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/configuration/README.md

Lists available command-line options for configuring the server, including GitHub token, framework selection, help, and version.

```bash
shadcn-ui-mcp-server [options]

Options:
  --github-api-key, -g <token>    GitHub Personal Access Token
  --framework, -f <framework>     Framework to use: 'react', 'svelte' or 'vue' (default: react)
                                  Also supports 'react-native'
  --help, -h                      Show help message
  --version, -v                   Show version information
```

--------------------------------

### Docker Testing Commands

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Provides commands for starting the server with Docker Compose, testing its health and SSE endpoint, and viewing container logs.

```bash
# Start with Docker Compose
docker-compose up -d

# Test health
curl http://localhost:3001/health

# Test SSE
curl -N -H "Accept: text/event-stream" http://localhost:3001/sse

# View logs
docker logs shadcn-mcp-server
```

--------------------------------

### ComponentInfo Type Definition

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/types.md

Provides comprehensive information about a component, encompassing its name, description, URL, properties, examples, source code location, installation instructions, and usage details.

```typescript
export type ComponentInfo = {
  name: string;
  description: string;
  url?: string;
  props?: ComponentProp[];
  examples?: ComponentExample[];
  source?: string;
  installation?: string;
  sourceUrl?: string;
  usage?: string;
}
```

--------------------------------

### Verify Framework Selection

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Use the --help flag with a specific framework to verify its selection and available options.

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --help
```

--------------------------------

### Standard Publishing Workflow

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/scripts/README.md

Follow the recommended publishing workflow: first bump the version, then publish with all checks enabled.

```bash
# 1. Bump version (choose patch/minor/major)
npm run version:patch

# 2. Publish with all checks
npm run publish:auto
```

--------------------------------

### Get Component Metadata

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/README.md

Retrieves metadata for a specific component. Use this to get details about a component without fetching its full source.

```typescript
const result = await toolHandlers.get_component_metadata({
  componentName: "dialog"
});
```

--------------------------------

### Basic CLI Usage

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/README.md

Demonstrates basic command-line interface usage for starting the shadcn-mcp tool. Includes options for default, GitHub token, and framework selection.

```bash
# Default (React, stdio mode)
shadcn-mcp

# With GitHub token (recommended)
shadcn-mcp --github-api-key ghp_your_token

# Switch framework
shadcn-mcp --framework svelte
```

--------------------------------

### Select Framework via Command Line Argument

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/framework-selection.md

Use the --framework or -f flag to specify the desired framework. This is the recommended method for switching frameworks.

```bash
# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server -f svelte

# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server -f vue

# Switch back to React
npx @jpisnice/shadcn-ui-mcp-server --framework react
npx @jpisnice/shadcn-ui-mcp-server -f react

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
npx @jpisnice/shadcn-ui-mcp-server -f react-native
```

--------------------------------

### Docker Configuration with CLI Arguments

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

Shows how to run the shadcn-ui-mcp-server Docker image and pass CLI arguments for mode, port, and GitHub API key.

```bash
# With CLI args
docker run \
  shadcn-ui-mcp-server \
  --mode sse --port 7423 --github-api-key ghp_xxx
```

--------------------------------

### Start shadcn/ui MCP Server

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Run the MCP Server using npx. It's recommended to provide a GitHub token for better performance and to specify the framework if not using React.

```bash
npx @jpisnice/shadcn-ui-mcp-server
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key ghp_your_token_here
```

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework react-native --github-api-key ghp_your_token_here
```

--------------------------------

### Start the server locally

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/CONTRIBUTING.md

Launch the Shadcn UI MCP Server locally to test its functionality. Use the --help flag for command-line options.

```bash
npx @jpisnice/shadcn-ui-mcp-server --help
```

--------------------------------

### Get Specific TweakCN Theme Details

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/tools-reference.md

Retrieves detailed information for a specific TweakCN theme by its name or label. Use this to get the full definition of a theme, including colors and CSS.

```typescript
const theme = await toolHandlers.get_theme({ 
  themeName: "cyberpunk" 
});
const themeData = JSON.parse(theme.content[0].text);
console.log(themeData.colors);
```

--------------------------------

### Cache.deleteByPrefix

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/utilities-reference.md

Deletes all keys from the cache that start with the specified prefix.

```APIDOC
## Cache.deleteByPrefix(prefix: string): number

### Description
Deletes all keys from the cache that start with the specified prefix.

### Parameters
#### Parameters
- **prefix** (string) - Required - The prefix to match keys against.

### Returns
Number of items deleted.

### Usage Example
```typescript
// Clear all component-related cache
cache.deleteByPrefix("components:");
```
```

--------------------------------

### Basic CLI Usage

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

Demonstrates how to run the shadcn-mcp command with default settings (stdio mode, no authentication) and how to provide a GitHub API key.

```bash
# Default stdio mode, no auth
shadcn-mcp

# With GitHub token
shadcn-mcp --github-api-key ghp_xxx
```

--------------------------------

### Get Complete Block Implementation

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Request the full implementation of a shadcn/ui block.

```text
"Get the dashboard-01 block implementation"
```

--------------------------------

### createServer

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/server-architecture.md

Creates an MCP server instance with specified capabilities. This is the primary entry point for initializing a server.

```APIDOC
## `createServer(version: string)`

### Description
Creates an MCP server instance with capabilities. This function initializes a new server with a given version and an empty set of capabilities for resources, prompts, and tools.

### Signature
```typescript
function createServer(version: string): Server
```

### Parameters
#### Path Parameters
- **version** (string) - Required - Server version (e.g., "2.0.0")

### Returns
- MCP Server instance ready for handler setup and connection.

### Capabilities
- The server is initialized with empty objects for `resources`, `prompts`, and `tools`, indicating support for these features without specific restrictions at this level.
```

--------------------------------

### List Available Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Prompt your AI assistant to list all available shadcn/ui components.

```text
"List all available shadcn/ui components"
```

--------------------------------

### Get Current Cache Size

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/utilities-reference.md

Returns the current number of items stored in the cache.

```typescript
cache.size();
```

--------------------------------

### Get Layout Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request specific layout components such as card, container, or grid.

```text
"Show me all layout components"
```

```text
"Get the card component"
```

```text
"Show me the container component"
```

```text
"Get the grid component"
```

--------------------------------

### Get Block with Component Files

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/first-steps.md

Request a block along with all its associated component files.

```text
"Get the calendar-01 block with all its component files"
```

--------------------------------

### Get Navigation Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request specific navigation components like breadcrumb, pagination, or tabs.

```text
"Show me all navigation components"
```

```text
"Get the breadcrumb component"
```

```text
"Show me the pagination component"
```

```text
"Get the tabs component"
```

--------------------------------

### Get Form Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request specific form-related components like input, select, or checkbox.

```text
"Show me all form-related components"
```

```text
"Get the input component"
```

```text
"Show me the select component"
```

```text
"Get the checkbox component"
```

--------------------------------

### Get Component Information

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request descriptive information about a shadcn/ui component's purpose and features.

```text
"Tell me about the shadcn/ui button component"
```

```text
"What is the card component used for?"
```

```text
"Describe the dialog component features"
```

--------------------------------

### Switch Frameworks via Environment Variable

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/frameworks/README.md

Shows how to set the desired framework (Svelte, Vue, React, React Native) using the FRAMEWORK environment variable.

```bash
# Use Svelte
export FRAMEWORK=svelte
npx @jpisnice/shadcn-ui-mcp-server

# Use Vue
export FRAMEWORK=vue
npx @jpisnice/shadcn-ui-mcp-server

# Use React
export FRAMEWORK=react
npx @jpisnice/shadcn-ui-mcp-server

# Use React Native
export FRAMEWORK=react-native
npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Docker Configuration with Environment Variables

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

Provides an example of running the shadcn-ui-mcp-server Docker image and configuring it using environment variables for GitHub token, transport mode, and port. It also maps the container port to the host.

```bash
# With environment variables
docker run -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_xxx \
           -e MCP_TRANSPORT_MODE=sse \
           -e MCP_PORT=7423 \
           -p 7423:7423 \
           shadcn-ui-mcp-server
```

--------------------------------

### Get Framework Metadata

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/INDEX.md

Retrieves metadata associated with the current framework. Useful for configuration or compatibility checks.

```typescript
import { getFrameworkInfo } from "@/utils/framework";

const frameworkInfo = getFrameworkInfo();
```

--------------------------------

### Verify Framework Selection

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/troubleshooting/README.md

Confirm the correct framework is selected for your project by checking the available options and help information.

```bash
# Verify framework selection
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --help
```

--------------------------------

### Get Vue Component Source Code

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Retrieve the source code for specific shadcn/ui components in Vue.

```text
"Show me the Vue button component"
```

```text
"Get the Vue card component source code"
```

```text
"Show me the Vue dialog component"
```

--------------------------------

### Framework Detection Logs (React Native)

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/getting-started/framework-selection.md

Example log output indicating that the React Native framework has been successfully configured via a command-line argument.

```bash
INFO: Framework set to 'react-native' via command line argument
INFO: MCP Server configured for REACT NATIVE framework
INFO: Repository: founded-labs/react-native-reusables
INFO: File extension: .tsx
```

--------------------------------

### Quick Select Vue Framework

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/frameworks/README.md

Use this command to quickly select the Vue framework for shadcn-ui-mcp-server.

```bash
npx @jpisnice/shadcn-ui-mcp-server --framework vue
```

--------------------------------

### Get UI Library

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/INDEX.md

Determines and returns the React UI library being used. Useful for framework-specific integrations.

```typescript
import { getUiLibrary } from "@/utils/framework";

const uiLibrary = getUiLibrary();
```

--------------------------------

### Get Svelte Component Source Code

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Retrieve the source code for specific shadcn/ui components in Svelte.

```text
"Show me the Svelte button component"
```

```text
"Get the Svelte card component source code"
```

```text
"Show me the Svelte dialog component"
```

--------------------------------

### Get Component Source Code

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/README.md

Use this command to retrieve the source code for any specific shadcn/ui component.

```text
"Show me the shadcn/ui button component"
```

--------------------------------

### Health Check API Endpoint

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/SSE_IMPLEMENTATION.md

Demonstrates the GET /health endpoint, which provides server status information.

```http
GET /health
```

```json
{
  "status": "healthy",
  "timestamp": "2025-09-22T13:10:00.000Z",
  "activeConnections": 2,
  "serverInfo": {
    "name": "shadcn-ui-mcp-server",
    "version": "1.0.3"
  }
}
```

--------------------------------

### Build the project

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/CONTRIBUTING.md

Compile the project's code using the npm build script.

```bash
npm run build
```

--------------------------------

### List All Available Components

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/usage/components.md

Request a list of all components available in the shadcn/ui library.

```text
"List all available shadcn/ui components"
```

```text
"Show me all components in the library"
```

```text
"What components are available?"
```

--------------------------------

### Get Theme Details

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/README.md

Fetches detailed information about a specific theme. Use this to understand the properties of a theme.

```typescript
const result = await toolHandlers.get_theme({
  themeName: "cyberpunk"
});
```

--------------------------------

### Configure UI Framework via Environment Variable

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/configuration.md

Select the UI framework (react, svelte, vue, react-native) using the FRAMEWORK environment variable. CLI arguments take precedence.

```bash
export FRAMEWORK=svelte
shadcn-mcp
```

--------------------------------

### Install and Run Shadcn UI MCP Server

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/README.md

Basic usage of the shadcn-ui-mcp-server. For higher rate limits, provide a GitHub API key. Frameworks can be switched using the --framework flag, and the UI library can be changed to 'base' for React projects.

```bash
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base
```

--------------------------------

### Cache.getInstance

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/utilities-reference.md

Gets or creates the singleton cache instance. It allows setting a default Time-To-Live (TTL) for cache items.

```APIDOC
## Cache.getInstance(defaultTTL?: number): Cache

### Description
Gets or creates the singleton cache instance. It allows setting a default Time-To-Live (TTL) for cache items.

### Parameters
#### Parameters
- **defaultTTL** (number) - Optional - Default TTL in milliseconds (defaults to 3600000, which is 1 hour).

### Returns
Singleton Cache instance.

### Usage Example
```typescript
const cache = Cache.getInstance();
```
```

--------------------------------

### Quick Select React Framework

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/docs/frameworks/README.md

Use this command to quickly select the default React framework for shadcn-ui-mcp-server.

```bash
npx @jpisnice/shadcn-ui-mcp-server
```

--------------------------------

### Cache Get Size

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/INDEX.md

Returns the current number of items stored in the cache. Useful for monitoring cache usage.

```typescript
import { Cache } from "@/utils/cache";

const cacheSize = Cache.size();
```

--------------------------------

### Get Current Framework

Source: https://github.com/jpisnice/shadcn-ui-mcp-server/blob/master/_autodocs/INDEX.md

Retrieves the currently active framework. Use this to adapt logic based on the framework environment.

```typescript
import { getFramework } from "@/utils/framework";

const framework = getFramework();
```