fluentui

This Fluent UI MCP Server acts as an AI-assisted companion for Fluent UI React development, providing a knowledge base of Fluent UI v9 components, design tokens, and best practices. It offers a suite of 12 tools across four categories, including component information (get_component_info, get_component_props, get_component_examples, search_components), design token access and validation (get_design_tokens, validate_design_tokens), code generation (generate_component, generate_component_hook, generate_component_styles), and validation/analysis (validate_component_design, check_accessibility, analyze_component_patterns). These tools enable you to retrieve detailed component documentation, explore design tokens, generate TypeScript component scaffolding and hooks, and analyze designs for accessibility and quality. To use the server, run it locally and interact with these tools via the MCP client, sending the appropriate JSON payloads to perform queries, generate code, or validate designs. For example, you can fetch Button component props, search for components by capability, or generate a ready-to-use CustomCard component scaffold with token-aware styling. The server makes it straightforward to integrate Fluent UI patterns into your projects with consistent design system alignment and accessibility checks.

Prerequisites:

• Node.js 18+
• npm (or yarn)
• Access to a MCP-compatible client

Installation steps:

1. Clone or download the repository: git clone https://github.com/aminvishvam/aminvishvam-fluentui-mcp-server.git cd fluentui-mcp-server

2. Install dependencies: npm install

3. Build the server (if the project uses a build step): npm run build

4. Run tests (optional to verify setup): npm run test

5. Start the MCP server: npm start

Notes:

• Ensure you run Node.js 18+ as required by the server.
• If you use yarn, replace npm install with yarn install and npm start with yarn start.
• The server exposes a set of JSON-based tools for interaction via an MCP client.

Tips:

• If you encounter token or component naming mismatches, ensure your MCP client targets the latest server build and that the component registry is up to date with Fluent UI v9.
• Environment variables (if any) can include MCP_PORT, MCP_HOST, or authentication tokens depending on your deployment setup. Default to localhost and standard port if not required.
• For production deployments, consider running the server behind a reverse proxy and enabling TLS.
• When debugging tool responses, inspect the payloads for required fields such as componentName, query, or arguments to tailor queries precisely.
• If you modify the server or add custom tokens/components, re-run the build step to reflect changes in the deployed MCP server.