Coveo UI-Kit MCP Server

A Model Context Protocol (MCP) server that provides intelligent assistance for developers using Coveo UI-Kit libraries (Atomic & Headless). This server integrates with AI assistants to provide documentation search, code examples, troubleshooting help, best practices, and component discovery.

Quick Start

For VS Code Users

1. Install the package:

   npm install -g @coveo/ui-kit-mcp-server

2. Add to VS Code settings (settings.json):

   {
     "github.copilot.chat.mcp.servers": {
       "coveo-ui-kit": {
         "command": "npx",
         "args": ["@coveo/ui-kit-mcp-server"]
       }
     }
   }

3. Start using Copilot Chat with Coveo UI-Kit assistance!

📦 Package: @coveo/ui-kit-mcp-server

Features

🔍 Documentation Search

• Search across Coveo's comprehensive documentation
• Target specific libraries (Atomic, Headless, or both)
• Filter by content type (components, guides, API documentation)
• Support for real API integration with fallback to mock data

📝 Code Examples

• Working code examples for Atomic and Headless components
• Multi-framework support (Vanilla JS, React, Vue, Angular)
• Complete integration examples
• Setup instructions for different environments

🛠️ Troubleshooting

• Intelligent assistance for common issues (CORS, authentication, etc.)
• Component-specific troubleshooting
• Detailed solutions with code examples

⭐ Best Practices

• Curated best practices for search interfaces, performance, authentication
• Framework-specific recommendations
• Security guidelines and implementation patterns

🧭 Component Discovery

• Find the right components for specific use cases
• Recommendations for building search interfaces, faceted search, recommendations
• Component comparison and selection guidance

🏗️ Architecture

• Modular Services: Separate services for documentation, examples, and types
• Real API Integration: Support for actual Coveo API calls when configured
• TypeScript: Full type safety with Zod validation
• Extensible: Easy to add new tools and capabilities

Installation

From npm Registry

# Install globally for easy access
npm install -g @coveo/ui-kit-mcp-server

# Or install locally in your project
npm install @coveo/ui-kit-mcp-server

For Development

git clone https://github.com/coveo/yolo-mcp.git
cd yolo-mcp
npm install
npm run build

Configuration

Default Configuration

The server comes with default Coveo platform configuration baked in for easy testing:

• Access Token: Demo token for Coveo documentation search
• Organization ID: coveosearch (public Coveo documentation)
• Platform URL: https://platform.cloud.coveo.com

Environment Variables (Optional)

You can override the defaults by setting environment variables:

# Optional: For custom Coveo platform integration
COVEO_ACCESS_TOKEN=your_access_token
COVEO_ORG_ID=your_organization_id
COVEO_PLATFORM_URL=https://platform.cloud.coveo.com

# Optional: For development/debugging
DEBUG=true
NODE_ENV=development

Usage

As a Standalone Server

npm start

Build and Development

# Development build
npm run build

# Clean build
npm run clean

# Install dependencies
npm install

With VS Code Copilot Chat

Add to your VS Code settings (settings.json):

{
  "github.copilot.chat.mcp.servers": {
    "coveo-ui-kit": {
      "command": "npx",
      "args": ["@coveo/ui-kit-mcp-server"]
    }
  }
}

Alternatively, if you have the package installed globally:

{
  "github.copilot.chat.mcp.servers": {
    "coveo-ui-kit": {
      "command": "coveo-ui-kit-mcp"
    }
  }
}

With Claude Desktop

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "coveo-ui-kit": {
      "command": "node",
      "args": ["/path/to/coveo-ui-kit-mcp-server/build/index.js"]
    }
  }
}

With Other MCP Clients

The server implements the standard MCP protocol and can be used with any MCP-compatible client.

Available Tools

1. search_docs

Search Coveo UI-Kit documentation for specific topics, components, or guides.

Parameters:

• query (string): Search query for Coveo documentation
• library (optional): Which library to search in (atomic, headless, both)
• type (optional): Type of documentation (all, components, guides, api)

Example:

Search for "search box" components in both Atomic and Headless libraries

2. get_component_example

Get code examples for specific Coveo Atomic or Headless components.

Parameters:

• component (string): Name of the component (e.g., "atomic-search-box")
• library (string): Library (atomic or headless)
• framework (optional): Framework (vanilla, react, vue, angular)

Example:

Get a React example for the headless search box controller

3. troubleshoot_issue

Get help troubleshooting common issues with Coveo UI-Kit components.

Parameters:

• issue (string): Description of the issue or error message
• component (optional): Component where the issue occurs
• library (optional): Library where the issue occurs (atomic or headless)

Example:

Help with CORS error when connecting to Coveo platform

4. get_best_practices

Get best practices and recommended patterns for Coveo UI-Kit development.

Parameters:

• topic (string): Topic to get best practices for
• library (optional): Which library to focus on (atomic, headless, both)

Examples:

• Performance optimization
• Authentication patterns
• Search interface design

5. discover_components

Discover which Coveo components to use for specific use cases.

Parameters:

• useCase (string): Description of what you want to accomplish
• library (optional): Which library to consider (atomic, headless, both)

Examples:

• "Build a search interface with faceting"
• "Add query suggestions to search"
• "Implement result recommendations"

Available Resources

coveo://atomic/components

Complete reference of all Coveo Atomic components with descriptions and properties.

coveo://headless/controllers

Complete reference of all Coveo Headless controllers with methods and usage patterns.

coveo://common/troubleshooting

Database of common issues and their solutions across both libraries.

Example Interactions

Getting Started with Atomic

User: "How do I create a basic search interface with Atomic?"

Tool: get_component_example
- component: "atomic-search-box"
- library: "atomic"
- framework: "vanilla"

Result: Complete HTML/JS example with initialization code

Troubleshooting CORS Issues

User: "I'm getting a CORS error when trying to connect to Coveo"

Tool: troubleshoot_issue
- issue: "CORS error"
- library: "atomic"

Result: Step-by-step solution including domain configuration and proxy setup

Finding Components for Use Cases

User: "What components do I need for a faceted search interface?"

Tool: discover_components
- useCase: "faceted search interface"
- library: "both"

Result: Recommendations for both Atomic and Headless approaches with examples

Project Structure

src/
├── index.ts                 # Main MCP server implementation
├── documentation-service.ts # Documentation search and content retrieval
├── examples-service.ts      # Code examples and setup instructions  
├── types.ts                # Shared TypeScript type definitions
└── README.md

.vscode/
├── tasks.json              # VS Code build/run tasks
└── mcp.json               # MCP server configuration for VS Code

build/                      # Compiled JavaScript output
├── index.js
├── documentation-service.js
├── examples-service.js
└── types.js

Service Architecture

DocumentationService

• Purpose: Handles documentation search and retrieval
• Features:
  • Real API integration with Coveo platform
  • Mock data fallback for development
  • Troubleshooting solutions database
  • Best practices repository
  • Component discovery recommendations

ExamplesService

• Purpose: Provides code examples and setup instructions
• Features:
  • Multi-framework code examples
  • Integration examples for complete solutions
  • Setup instructions for different environments
  • Component-specific examples with descriptions

Main Server (index.ts)

• Purpose: MCP protocol implementation and tool orchestration
• Features:
  • Tool registration and validation with Zod schemas
  • Resource handlers for component references
  • Error handling and response formatting
  • Service integration and coordination

Development

Adding New Tools

1. Define the tool schema in index.ts
2. Add the tool to the ListToolsRequestSchema handler
3. Implement the tool logic, preferably in the appropriate service
4. Add the tool case to the CallToolRequestSchema handler

Adding New Examples

1. Add examples to the appropriate service method in examples-service.ts
2. Follow the existing pattern for framework-specific examples
3. Include proper descriptions and complete, working code

Adding New Documentation

1. Extend the mock data in documentation-service.ts
2. For real API integration, modify the searchWithAPI method
3. Add new troubleshooting solutions to the findSolution method

Configuration

The server can be configured through environment variables:

• COVEO_ACCESS_TOKEN: Your Coveo access token (for enhanced documentation access)
• COVEO_ORG_ID: Your Coveo organization ID
• DEBUG: Set to true for debug logging

Integration with Coveo Documentation

This MCP server is designed to work with the official Coveo documentation at https://docs.coveo.com. As a maintainer of the UI-Kit project with access to the Coveo organization, you can enhance this server to:

1. Direct API Access: Integrate with Coveo's internal APIs for real-time documentation
2. Enhanced Search: Use Coveo's own search technology to power documentation search
3. Analytics Integration: Track usage patterns to improve recommendations
4. Live Examples: Generate examples that work with your specific organization configuration

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Development

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Build and test: npm run build
5. Submit a pull request

Publishing

This project uses automated publishing to GitHub Package Registry. See PUBLISHING.md for detailed instructions.

Quick Release

# Patch release (1.0.0 → 1.0.1)
npm run release:patch

# Minor release (1.0.0 → 1.1.0)  
npm run release:minor

# Major release (1.0.0 → 2.0.0)
npm run release:major

License

MIT License - see LICENSE file for details.

Related Links

• Coveo Atomic Documentation
• Coveo Headless Documentation
• Model Context Protocol
• Coveo UI-Kit GitHub

Support

For issues related to:

• MCP Server: Open an issue in this repository
• Coveo UI-Kit: Refer to the main UI-Kit repository
• Coveo Platform: Contact Coveo support

Built with ❤️ for the Coveo developer community