🤖 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:

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

For Developers:

1. Quick reference for component APIs
2. Auto-generation of boilerplate code
3. Examples and best practices
4. Type-safe configuration objects

🔌 Integration with Claude/Other AIs

Using with Cursor/Claude:

1. Start the MCP server: npm start
2. Configure your AI client to connect to the server
3. Ask the AI to use the NTV component tools
4. 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:

1. Edit src/data/components.ts
2. Add component metadata to COMPONENTS_DB array
3. Rebuild: npm run build
4. 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:

1. Create a new file in src/tools/
2. Implement the MCPTool interface
3. Export it from src/tools/index.ts
4. 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

• MCP Documentation
• NTV Scaffolding Docs
• Angular Documentation

📄 License

MIT

👨‍💻 Author

NTV Scaffolding Team

---

Happy coding! 🚀