NTV Scaffolding MCP Server

# 🤖 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 ```bash # Clone or navigate to the project cd component-mcp # Install dependencies npm install # Build TypeScript npm run build # Start the server npm start ``` ## 🔧 Development ```bash # 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:** ```json { "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:** ```json { "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:** ```json { "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:** ```json { "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:** ```json { "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: ```bash npm run build ``` ### Run in production: ```bash npm start ``` ### Docker (Optional): ```dockerfile 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: ```json { "content": [ { "type": "text", "text": "response content here" } ] } ``` ## 🐛 Troubleshooting ### Server won't start: ```bash # 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: ```bash npm run build -- --noEmit ``` ## 📚 Resources - [MCP Documentation](https://modelcontextprotocol.io) - [NTV Scaffolding Docs](https://github.com/your-org/ntv-scaffolding) - [Angular Documentation](https://angular.dev) ## 📄 License MIT ## 👨‍💻 Author NTV Scaffolding Team --- **Happy coding! 🚀**