MCP Server for Impact UI Library - Provides AI access to component documentation and code examples
npm install impact-ui-mcp-serverAn MCP (Model Context Protocol) server that provides AI assistants with access to the Impact UI component library documentation, props, and code examples. This allows team members to query the UI library through natural language prompts without switching to Storybook or documentation.
Want to use this in your project? See DEPLOYMENT.md for complete setup instructions.
Quick setup:
1. Install: npm install @impact-analytics/impact-ui-mcp-server
2. Run setup script: npx @impact-analytics/impact-ui-mcp-server/setup-for-teams.sh
3. Add the generated config to Cursor settings
4. Restart Cursor IDE
- š Component Resources: Browse all components in a dropdown when selecting the MCP server
- š Component Discovery: List all available components or search by name/description
- š Component Documentation: Get detailed information about any component including props, types, defaults, and descriptions
- š» Code Generation: Generate ready-to-use code examples with proper imports and state management
- šÆ Smart Search: Search components by name, description, or prop names
- š Usage Tips: Get best practices and usage patterns for components
1. Navigate to the mcp-server directory:
``bash`
cd mcp-server
2. Install dependencies:
`bash`
npm install
Cursor IDE supports MCP servers through its settings. Here's how to configure it:
1. Open Cursor Settings:
- Press Cmd+, (macOS) or Ctrl+, (Windows/Linux)Cursor
- Or go to ā Settings ā Features ā MCP
2. Add MCP Server Configuration:
In your Cursor settings, add the following configuration. You can either:
Option A: Via Settings UI
- Navigate to Cursor ā Settings ā Features ā MCPimpact-ui
- Click "Add MCP Server"
- Fill in:
- Name: node
- Command: /absolute/path/to/impact-ui/mcp-server/src/index.js
- Args: /absolute/path/to/impact-ui/mcp-server
- Working Directory: Cmd+Shift+P
Option B: Via settings.json
Open your Cursor settings.json file:
- Press (macOS) or Ctrl+Shift+P (Windows/Linux)`
- Type "Preferences: Open User Settings (JSON)"
Add this configuration:
json`
{
"mcp.servers": {
"impact-ui": {
"command": "node",
"args": [
"/absolute/path/to/impact-ui/mcp-server/src/index.js"
],
"cwd": "/absolute/path/to/impact-ui/mcp-server"
}
}
}
/absolute/path/to/impact-ui
Replace with your actual project path.`
To get your project path, run:
bash`
cd /Users/narendrakumar/impact/impact-ui/mcp-server
pwd
3. Restart Cursor IDE for the changes to take effect.
4. Verify it's working:
- Open the Cursor chat (Cmd+L or Ctrl+L)
- Try asking: "What components are available in the Impact UI library?"
- The MCP server should automatically be used to answer your question
š” Quick Tip: Run npm run generate-config in the mcp-server directory to automatically generate the correct configuration for your system!
If you also use Claude Desktop, add the following to your Claude Desktop configuration file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json
Windows:
`json`
{
"mcpServers": {
"impact-ui": {
"command": "node",
"args": [
"/absolute/path/to/impact-ui/mcp-server/src/index.js"
],
"cwd": "/absolute/path/to/impact-ui/mcp-server"
}
}
}
The server uses stdio transport, so it can be used with any MCP-compatible client. Configure your client to run:
`bash`
node /path/to/mcp-server/src/index.js
When you select the Impact UI MCP server in Cursor, you'll see a dropdown list of all available components. You can:
1. Browse Components: Select any component from the dropdown to view its details
2. Ask Questions: After selecting a component, ask questions like:
- "What props does this component accept?"
- "Show me a code example"
- "What are the best practices for using this component?"
Each component resource includes:
- Component name and category
- Full description
- All props with types, defaults, and descriptions
- Available Storybook examples
- File locations
Example query: "What is the Button component and what props does it accept?"
Example query: "List all components in the Patterns category"
Example query: "What are all the props for the Modal component?"
Example query: "Generate a code example for Modal with a title and primary button"
Example query: "Find components related to forms or inputs"
Example query: "What are the best practices for using the Table component?"
Once configured, you can ask questions like:
- "What components are available for building forms?"
- "Show me how to use the Button component with an icon"
- "What props does the Table component accept?"
- "Generate a code example for Modal with state management"
- "Find all components that have a 'size' prop"
- "What's the difference between Button variants?"
1. Component Discovery: On startup, the server scans all Storybook story files (*.stories.js) in the frontend/src/stories directory.
2. Metadata Extraction: For each component, it extracts:
- Component name and category (Components vs Patterns)
- Description from Storybook
- All props with types, defaults, descriptions, and options
- Available story examples
3. Component File Parsing: It also attempts to find and parse the actual component source files to extract PropTypes and additional information.
4. Registry Building: All this information is stored in an in-memory registry for fast access.
5. Tool Handlers: When a tool is called, the server queries the registry and formats the response appropriately.
`bash`
npm run dev
This will watch for file changes and restart the server.
You can test the server manually by running:
`bash`
npm start
Then send JSON-RPC requests via stdin. For example:
`json`
{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}
``
mcp-server/
āāā src/
ā āāā index.js # Main MCP server entry point
ā āāā tools/ # Tool implementations
ā ā āāā componentInfo.js
ā ā āāā codeExample.js
ā āāā parsers/ # Parsers for extracting metadata
ā ā āāā storybookParser.js
ā ā āāā componentParser.js
ā āāā utils/ # Utility functions
ā āāā fileReader.js
āāā package.json
āāā README.md
- Verify the path to the frontend directory is correct
- Check that Storybook story files exist in frontend/src/stories$3
- Ensure Storybook story files follow the naming convention: ComponentName.stories.js
- Check that the story files export a default object with title and component` propertiesMIT