# ⚡ Quick Start - NTV Scaffolding MCP Server
Get the MCP server running in 3 minutes!
## Prerequisites
- Node.js 18+ ([Download](https://nodejs.org/))
- npm or yarn
## Installation (1 min)
```bash
# Navigate to project
cd C:\Users\Admin\Documents\repos\component-mcp
# Install dependencies
npm install
# Build TypeScript
npm run build
```
## Start Server (30 sec)
```bash
npm start
```
You should see: `NTV Scaffolding MCP Server started successfully`
## Test with Examples (1.5 min)
### Example 1: List All Components
```bash
# Ask the server to list components
# In your AI client or using the integration method
```
**Expected Output:**
```
{
"total": 10,
"components": [
{ "name": "Button", "selector": "ntv-button", "category": "ui", ... },
{ "name": "Input", "selector": "lib-input", "category": "form", ... },
...
]
}
```
### Example 2: Get Button Documentation
Call tool: `get_ntv_component_doc`
Parameters: `{"component": "Button"}`
**Expected Output:**
```
{
"name": "Button",
"selector": "ntv-button",
"category": "ui",
"props": [...],
"events": [...],
"examples": [...]
}
```
### Example 3: Generate Button Template
Call tool: `generate_ntv_template_code`
Parameters:
```json
{
"component": "Button",
"variant": "primary",
"size": "lg",
"content": "Click Me"
}
```
**Expected Output:**
```
{
"template": "<ntv-button [config]=\"{ variant: 'primary', size: 'lg' }\">Click Me</ntv-button>",
"imports": "import { Button } from '@ntv-scaffolding/component-pantry';"
}
```
## Use in AI Clients
### Cursor Editor
1. Server is running (`npm start`)
2. Open Cursor Settings
3. Add MCP server config (see `INTEGRATION.md`)
4. Ask: "List all NTV components"
### VS Code + Cody
1. Server is running
2. Install Cody extension
3. Configure MCP server
4. Use Cody chat: "Generate a Button component"
### Claude.ai or API
Use with Claude SDK to generate components programmatically.
See `INTEGRATION.md` for detailed setup.
## Available Tools Summary
| Tool | Purpose | Example |
|------|---------|---------|
| `list_ntv_components` | List all components | Filter by category |
| `get_ntv_component_doc` | Full documentation | Get props, events, examples |
| `get_ntv_component_props` | Component properties | Details on specific prop |
| `generate_ntv_template_code` | HTML template | Quick template generation |
| `generate_ntv_component_usage` | Full code example | Basic/advanced/full-form |
| `generate_ntv_component_file` | Complete files | .ts, .html, .css, .spec.ts |
| `get_ntv_component_examples` | Usage examples | Predefined snippets |
## Supported Components
✅ Button
✅ Input
✅ Card
✅ Autocomplete
✅ Accordion
✅ Stepper
✅ Popover
✅ ThumbnailGallery
✅ Modal
✅ Template
## Common Commands
```bash
# Start server
npm start
# Development mode (auto-rebuild)
npm run watch
# Rebuild after changes
npm run build
# Check TypeScript
npm run build -- --noEmit
```
## Troubleshooting
**"Command not found: npm"**
- Install Node.js from https://nodejs.org/
**"Port already in use"**
- Change port in configuration or stop other services
**"Module not found"**
```bash
rm -rf node_modules
npm install
npm run build
```
## Next Steps
1. ✅ Server running
2. 📖 Read `README.md` for full documentation
3. 🔌 Follow `INTEGRATION.md` for AI client setup
4. 🚀 Start generating components!
## Example Prompts for AI
Try these with your AI client:
- "List all form components"
- "Show me the Button component with all properties"
- "Generate a primary button that's large"
- "Create a complete Button component file with tests"
- "Show me how to use the Stepper component"
- "Generate a form with Input, Button, and Card"
- "What are the best practices for using Button?"
## Need Help?
1. Check the [README.md](./README.md) for full documentation
2. See [INTEGRATION.md](./INTEGRATION.md) for setup guides
3. Review tool descriptions in this file
4. Check [components.ts](./src/data/components.ts) for component details
---
**You're all set! Happy coding! 🚀**
