🤖 NTV Scaffolding MCP Server

MCP (Model Context Protocol) Server for NTV Scaffolding Components - Enables AI assistants to easily discover, understand, and generate code for NTV Scaffolding Angular components.

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn

Installation

# Clone or navigate to the project cd component-mcp # Install dependencies npm install # Build TypeScript npm run build # Start the server npm start

🔧 Development

# Watch mode (rebuild on changes) npm run watch # Run in development mode npm run dev

📚 Available Tools

The MCP Server provides 7 powerful tools for working with NTV components:

1. list_ntv_components

Lists all available NTV Scaffolding components with filtering options.

Parameters:

category (optional): Filter by category (ui, form, navigation, data, layout, utility)

Example:

{ "category": "form" }

2. get_ntv_component_doc

Gets comprehensive documentation for a specific component.

Parameters:

component (required): Component name (e.g., 'Button', 'Input')

Returns:

Component name, selector, category, description
All props with types and defaults
Events, slots, examples
Best practices

3. get_ntv_component_props

Get detailed information about component properties.

Parameters:

component (required): Component name
propName (optional): Specific property to details

Example:

{ "component": "Button", "propName": "variant" }

4. generate_ntv_template_code

Generates HTML template code for a component with custom configuration.

Parameters:

component (required): Component name
variant (optional): Visual variant
size (optional): Component size
content (optional): Content/text inside
additionalProps (optional): Additional properties
useConfigPattern (optional): Use config pattern. Default: true

Example:

{ "component": "Button", "variant": "primary", "size": "lg", "content": "Click Me", "useConfigPattern": true }

5. generate_ntv_component_usage

Generates complete component usage examples with TypeScript class and template.

Parameters:

component (required): Component name
usageType (optional): Type of example (basic, advanced, full-form). Default: basic
componentName (optional): Custom component name for example

Example:

{ "component": "Button", "usageType": "advanced", "componentName": "CustomButton" }

6. generate_ntv_component_file

Generates complete component files (TypeScript, template, styles, tests).

Parameters:

component (required): Component name
filename (optional): Output filename in kebab-case
selector (optional): Angular component selector
includeStyles (optional): Include CSS file. Default: true
includeTests (optional): Include test file. Default: true

Example:

{ "component": "Button", "filename": "my-button", "selector": "app-my-button", "includeStyles": true, "includeTests": true }

7. get_ntv_component_examples

Gets predefined usage examples and code snippets.

Parameters:

component (required): Component name
includeCode (optional): Include code snippets. Default: true

🏗️ Project Structure

component-mcp/ ├── src/ │ ├── index.ts # Main MCP server entry point │ ├── tools/ │ │ ├── index.ts # Tools registry │ │ ├── listComponents.ts # List components tool │ │ ├── getComponentDoc.ts # Get documentation tool │ │ ├── getComponentProps.ts # Get properties tool │ │ ├── generateTemplateCode.ts # Generate template tool │ │ ├── generateComponentUsage.ts # Generate usage examples │ │ ├── generateComponent.ts # Generate component files │ │ └── getComponentExamples.ts # Get examples tool │ ├── data/ │ │ └── components.ts # Component database │ └── resources/ │ └── index.ts # Resource handlers ├── dist/ # Compiled output ├── package.json ├── tsconfig.json └── README.md

🧩 Supported Components

The MCP server currently supports:

Button - Versatile button with multiple variants
Input - Form input with validation
Card - Container component
Autocomplete - Input with suggestions
Accordion - Collapsible panels
Stepper - Multi-step workflow
Popover - Contextual tooltip
ThumbnailGallery - Image gallery
Modal - Dialog overlay
Template - Page template layout

💡 Use Cases

For AI Assistants:

Discover Components: Use list_ntv_components to see what's available
Get Documentation: Use get_ntv_component_doc for detailed info
Generate Code: Use generate_ntv_template_code for quick snippets
Create Examples: Use generate_ntv_component_usage for complete examples
Generate Files: Use generate_ntv_component_file for full component files

For Developers:

Quick reference for component APIs
Auto-generation of boilerplate code
Examples and best practices
Type-safe configuration objects

🔌 Integration with Claude/Other AIs

Using with Cursor/Claude:

Start the MCP server: npm start
Configure your AI client to connect to the server
Ask the AI to use the NTV component tools
The AI can generate components, templates, and code

Example Prompts:

"Show me all available form components"
"Generate a Button component with primary variant and large size"
"Create a complete Button component file with tests"
"Show me advanced usage of the Stepper component"
"Generate a form with Button, Input, and Card components"

📖 Component Database

The MCP server includes a comprehensive component database (components.ts) with:

Component metadata (name, selector, category)
All properties with types and defaults
Events and slots
Usage examples
Best practices
Configuration interfaces

To add new components:

Edit src/data/components.ts
Add component metadata to COMPONENTS_DB array
Rebuild: npm run build
Restart server: npm start

🚀 Deployment

Build for production:

npm run build

Run in production:

npm start

Docker (Optional):

FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm install --production COPY dist ./dist CMD ["npm", "start"]

🤝 Contributing

To add new tools:

Create a new file in src/tools/
Implement the MCPTool interface
Export it from src/tools/index.ts
The tool will automatically be registered

📝 API Response Format

All tools return responses in this format:

{ "content": [ { "type": "text", "text": "response content here" } ] }

🐛 Troubleshooting

Server won't start:

# Check Node version node --version # Should be 18+ # Clear cache and reinstall rm -rf node_modules package-lock.json npm install npm run build

Tool not found:

Ensure all imports are correct
Verify tool is exported from tools/index.ts
Check that tool names match exactly

TypeScript errors:

npm run build -- --noEmit

📚 Resources

📄 License

MIT

👨‍💻 Author

NTV Scaffolding Team

Happy coding! 🚀

NTV Scaffolding MCP Server

🤖 NTV Scaffolding MCP Server

🚀 Quick Start

Prerequisites

Installation

🔧 Development

📚 Available Tools

1. list_ntv_components

2. get_ntv_component_doc

3. get_ntv_component_props

4. generate_ntv_template_code

5. generate_ntv_component_usage

6. generate_ntv_component_file

7. get_ntv_component_examples

🏗️ Project Structure

🧩 Supported Components

💡 Use Cases

For AI Assistants:

For Developers:

🔌 Integration with Claude/Other AIs

Using with Cursor/Claude:

Example Prompts:

📖 Component Database

🚀 Deployment

Build for production:

Run in production:

Docker (Optional):

🤝 Contributing

📝 API Response Format

🐛 Troubleshooting

Server won't start:

Tool not found:

TypeScript errors:

📚 Resources

📄 License

👨‍💻 Author

Related Resources

Tools

New MCP Servers

MCP directory API