# 🤖 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! 🚀**