@primenglab/mcp

@primenglab/mcp

Model Context Protocol (MCP) server for PrimeNG component library. Provides AI assistants with comprehensive access to PrimeNG component documentation, props, events, templates, theming, and code examples.

What is MCP?

Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources. By installing this MCP server, your AI assistant gains deep knowledge of PrimeNG components and can provide accurate, up-to-date information while helping you build Angular applications.

Installation

Claude Code

Add the PrimeNG MCP server using the CLI:

# Add to your user config (available in all projects)
claude mcp add primeng -s user -- npx -y @primenglab/mcp

# Or add to current project only
claude mcp add primeng -- npx -y @primenglab/mcp

Alternatively, use the JSON format for more control:

claude mcp add-json primeng '{"command":"npx","args":["-y","@primenglab/mcp"]}' -s user

Useful commands:

claude mcp list           # List all MCP servers
claude mcp get primeng    # Get server details
claude mcp remove primeng # Remove the server

After adding, start a new Claude Code session and use /mcp to verify the connection.

Reference: Claude Code MCP Documentation

---

VS Code

Option 1: Project Configuration

Create .vscode/mcp.json in your project:

{
    "servers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primenglab/mcp"]
        }
    }
}

Option 2: Global Configuration

Create or edit ~/Library/Application Support/Code/User/mcp.json (macOS) or ~/.config/Code/User/mcp.json (Linux):

{
    "servers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primenglab/mcp"]
        }
    }
}

After adding, the MCP server will be available in GitHub Copilot Chat.

Reference: VS Code MCP Documentation

---

Cursor

Option 1: Project Configuration

Create .cursor/mcp.json in your project:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primenglab/mcp"]
        }
    }
}

Option 2: Global Configuration

Create or edit ~/.cursor/mcp.json in your home directory:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primenglab/mcp"]
        }
    }
}

Option 3: Via Settings UI

1. Go to Cursor Settings > Tools & Integrations
2. Click New MCP Server
3. Add the configuration above

After adding, go to Settings > MCP and click the refresh button. The Composer Agent will automatically use PrimeNG tools when relevant.

Reference: Cursor MCP Documentation

---

OpenAI Codex CLI

Option 1: Using the CLI

codex mcp add primeng -- npx -y @primenglab/mcp

Option 2: Direct Configuration

Edit ~/.codex/config.toml:

[mcp_servers.primeng]
command = "npx"
args = ["-y", "@primenglab/mcp"]

After adding, the MCP server will be available in both the Codex CLI and VS Code extension.

Reference: OpenAI Codex MCP Documentation

---

Windsurf

Option 1: Via Settings UI

1. Click Windsurf - Settings (bottom right) or press Cmd+Shift+P / Ctrl+Shift+P
2. Type "Open Windsurf Settings"
3. Navigate to Cascade section
4. Click Manage MCPs > View raw config

Option 2: Direct Configuration

Edit ~/.codeium/windsurf/mcp_config.json:

{
    "mcpServers": {
        "primeng": {
            "command": "npx",
            "args": ["-y", "@primenglab/mcp"]
        }
    }
}

After adding, the MCP server will be available in Cascade.

Reference: Windsurf MCP Documentation

---

Zed

Add to your Zed settings (~/.config/zed/settings.json on Linux, ~/Library/Application Support/Zed/settings.json on macOS):

{
    "context_servers": {
        "primeng": {
            "command": {
                "path": "npx",
                "args": ["-y", "@primenglab/mcp"]
            }
        }
    }
}

After adding, restart Zed. Check the Agent Panel's settings view - a green indicator dot next to "primeng" confirms the server is active.

Reference: Zed MCP Documentation

---

Available Tools

Component Information

Tool	Description
list_components	List all PrimeNG components with categories
get_component	Get detailed info about a specific component
search_components	Search components by name or description
get_component_props	Get all props for a component
get_component_events	Get all events for a component
get_component_methods	Get all methods for a component
get_component_slots	Get all templates for a component
compare_components	Compare two components side by side
get_categories	Get all component categories

Code Examples

Tool	Description
get_usage_example	Get code examples for a component
list_examples	List all available code examples
get_example	Get a specific example by component and section
generate_component_template	Generate a basic component template

Theming & Styling

Tool	Description
get_component_pt	Get Pass Through options for DOM customization
get_component_tokens	Get design tokens (CSS variables)
get_component_styles	Get CSS class names
get_theming_info	Get theming information
get_theming_guide	Get detailed theming guide
get_passthrough_guide	Get Pass Through customization guide
get_tailwind_guide	Get Tailwind CSS integration guide

Documentation & Guides

Tool	Description
list_guides	List all guides and documentation pages
get_guide	Get a specific guide by name
get_configuration	Get PrimeNG configuration options
get_installation	Get installation instructions
get_icons_guide	Get icons usage guide
get_accessibility_guide	Get accessibility guide
get_accessibility_info	Get accessibility info for a component

Migration

Tool	Description
get_migration_guide	Get migration guide overview
migrate_v18_to_v19	v18 to v19 migration guide
migrate_v19_to_v20	v19 to v20 migration guide
migrate_v20_to_v21	v20 to v21 migration guide

Search & Discovery

Tool	Description
search_all	Search across components, guides, and props
suggest_component	Suggest components based on use case
find_by_prop	Find components with a specific prop
find_by_event	Find components that emit a specific event
find_components_with_feature	Find components supporting a feature
get_related_components	Find related components

Utilities

Tool	Description
get_component_url	Get the official documentation URL
get_component_import	Get the correct import statement
get_component_sections	Get all sections/features for a component
validate_props	Validate props for a component
export_component_docs	Export documentation in markdown
get_form_components	Get all form input components
get_data_components	Get all data display components
get_overlay_components	Get all overlay/popup components
get_performance_tips	Get performance optimization tips
get_version_info	Get version and compatibility info

Example Prompts

Once installed, try asking your AI assistant:

• "Show me how to use the DataTable component with sorting and filtering"
• "What props does the Button component have?"
• "How do I customize the Dialog component styling with Pass Through?"
• "Compare the Select and Listbox components"
• "What's the best component for a date picker?"
• "How do I migrate from PrimeNG v20 to v21?"

Requirements

• Node.js 18+
• One of the supported AI tools (Claude Code, Cursor, OpenAI Codex, Windsurf, Zed)

Links

• PrimeNG Documentation
• Model Context Protocol
• GitHub Repository
• Report Issues

License

MIT