@deay/mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@@deay/mcpshow me the props for the button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Deay Monorepo
A modern monorepo containing an Angular UI component library (@deay/ui) and an MCP (Model Context Protocol) server (@deay/mcp) that provides AI assistants with comprehensive documentation about the components.
Overview
This monorepo is designed to streamline the development and distribution of reusable Angular components while enabling AI-powered development workflows through MCP server integration.
Related MCP server: daisyui-mcp-server
Packages
@deay/ui
An Angular component library built with Angular 19, featuring:
Reusable UI components (Button, Input, and more)
TypeScript with strict mode enabled
Tree-shakeable library distribution via ng-packagr
Figma design specifications integration
@deay/mcp
Model Context Protocol server that enables AI coding tools (Claude Desktop, Cursor, Windsurf) to:
List all available
@deay/uicomponentsGet detailed component documentation (props, examples, best practices)
Access Figma design specifications
Generate accurate code examples
Prerequisites
Bun >= 1.0.0 (package manager and runtime)
Node.js >= 18.0.0 (for Angular CLI compatibility)
Getting Started
Installation
# Install dependencies
bun installDevelopment
# Run MCP server in watch mode
bun run dev:mcp
# Build UI library
bun run build:ui
# Build MCP server
bun run build:mcp
# Build all packages
bun run build:allMCP Server Configuration
Local Development
Add to your Claude Desktop config (or other MCP-compatible tool):
{
"mcpServers": {
"@deay/mcp": {
"command": "bun",
"args": ["run", "dev:mcp"],
"cwd": "/absolute/path/to/deay-monorepo"
}
}
}Production Usage
After publishing to npm:
{
"mcpServers": {
"@deay/mcp": {
"command": "npx",
"args": ["-y", "@deay/mcp"]
}
}
}Publishing
Publish All Packages
bun run publish:allPublish Individual Packages
# Publish only @deay/ui
bun run publish:ui
# Publish only @deay/mcp
bun run publish:mcpProject Structure
deay-monorepo/
├── packages/
│ ├── ui/ # Angular component library
│ │ ├── src/
│ │ │ ├── lib/
│ │ │ │ ├── button/
│ │ │ │ ├── input/
│ │ │ │ └── ...
│ │ │ └── public-api.ts
│ │ ├── ng-package.json
│ │ └── package.json
│ │
│ └── mcp-server/ # MCP server
│ ├── src/
│ │ ├── index.ts
│ │ └── registry.ts
│ ├── package.json
│ └── README.md
│
├── package.json # Root package.json (workspaces)
├── tsconfig.base.json # Base TypeScript configuration
├── tsconfig.json # Root TypeScript configuration
└── bun.lock # Bun lockfileTechnology Stack
Technology | Version | Purpose |
Angular | 19.2.17 | UI framework |
TypeScript | 5.6.3 | Programming language |
Bun | Latest | Package manager & runtime |
ng-packagr | 19.2.2 | Angular library packaging |
@modelcontextprotocol/sdk | 0.6.0 | MCP server implementation |
Development Workflow
Make changes to components in
packages/ui/src/lib/Build the UI library:
bun run build:uiUpdate MCP registry in
packages/mcp-server/src/registry.tsBuild MCP server:
bun run build:mcpTest the MCP server:
bun run dev:mcpPublish when ready:
bun run publish:all
Available Components
Currently available in @deay/ui:
dai-button- Button component with multiple variantsdai-input- Input component with various sizes
See packages/ui/README.md for detailed component documentation.
MCP Tools
The MCP server provides the following tools:
list_components
Lists all components available in the @deay/ui library.
get_component_info
Get detailed information about a specific component including:
Props with types and defaults
Usage examples
Best practices
Figma design specifications
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (
git checkout -b feature/amazing-feature)Commit your changes (
git commit -m 'Add some amazing feature')Push to the branch (
git push origin feature/amazing-feature)Open a Pull Request
This server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
MCP server for building and testing AI agents with multi-model experimentation and insights.
Driflyte MCP server which lets AI assistants query topic-specific knowledge from web and GitHub.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
Related MCP Servers
- FlicenseAqualityDmaintenanceAn MCP server that enables AI to interact with the private 'my-design' React component library and design tokens for UI generation and technical support. It provides tools for component searching, API documentation retrieval, and migration guidance based on specific internal design specifications.6-
- AlicenseAqualityAmaintenanceMCP server for daisyUI React components that enables AI coding assistants to search documentation, look up props, and retrieve code examples.55 npm2MIT
- AlicenseAqualityDmaintenanceMCP server that provides UI5 Web Components documentation and integration guides for AI assistants.4192 npm19Apache 2.0
- FlicenseAqualityNot gradedmaintenanceMCP server enabling AI agents to search, retrieve details, and compare UI components from 13 popular UI libraries.3-