Slidev Builder MCP

# Component Library System Design

## 🚀 New MCP Tools

### 1. `create_component` - Component Scaffolding
```typescript
interface CreateComponentArgs {
  name: string;                    // 'interactive-arrows'
  category: 'charts' | 'shapes' | 'layouts' | 'interactions';
  author: string;                  // 'Adolfo Salas'
  description: string;
  parameters: ComponentParameter[];
  scope: 'hatch' | 'community';   // Internal vs public
}
```

### 2. `add_component` - Add Component to Slide
```typescript
interface AddComponentArgs {
  deckPath: string;
  slideNumber: number;
  componentName: string;           // 'hatch/interactive-arrows'
  parameters: {
    from: string;                  // 'Market Analysis'
    to: string;                    // 'Strategic Recommendations'
    confidence: number;            // 0.85
    style: 'corporate' | 'minimal';
    data?: any;                    // Dynamic data binding
  };
  position: { x: number, y: number };
}
```

### 3. `list_components` - Browse Component Library
```typescript
interface ListComponentsArgs {
  category?: string;               // Filter by category
  scope?: 'hatch' | 'community' | 'all';
  search?: string;                 // Search by keyword
  author?: string;                 // Filter by creator
}
```

### 4. `install_component` - Install from Registry
```typescript
interface InstallComponentArgs {
  componentName: string;           // 'hatch/financial-charts'
  version?: string;                // '1.2.0' or 'latest'
  scope: 'global' | 'project';    // Install globally or per-project
}
```

### 5. `publish_component` - Share with Team
```typescript
interface PublishComponentArgs {
  componentPath: string;
  scope: 'hatch' | 'community';
  version: string;
  releaseNotes?: string;
}
```

## 📋 Component Registry Structure

```json
{
  "components": {
    "hatch/interactive-arrows": {
      "version": "1.2.0",
      "author": "Adolfo Salas",
      "description": "Interactive consulting arrows with confidence indicators",
      "category": "interactions",
      "tags": ["consulting", "flow", "decision"],
      "parameters": {
        "from": { "type": "string", "required": true },
        "to": { "type": "string", "required": true },
        "confidence": { "type": "number", "min": 0, "max": 1, "default": 0.8 },
        "style": { "type": "enum", "options": ["corporate", "minimal", "technical"] }
      },
      "dependencies": ["vue-3", "d3"],
      "examples": ["basic-arrow.md", "multi-step-flow.md"],
      "downloads": 156,
      "rating": 4.8
    },
    "hatch/financial-charts": {
      "version": "2.1.0",
      "author": "Hatch Analytics Team",
      "description": "Professional financial charts with Hatch branding",
      "category": "charts",
      "tags": ["finance", "data", "visualization"],
      "parameters": {
        "data": { "type": "array", "required": true },
        "chartType": { "type": "enum", "options": ["waterfall", "variance", "trend"] },
        "currency": { "type": "string", "default": "USD" },
        "showProjections": { "type": "boolean", "default": false }
      }
    }
  }
}
```

## 🏢 Hatch Internal Component Categories

### 📊 **Data & Analytics**
- `hatch/financial-charts` - Revenue, EBITDA, cash flow
- `hatch/kpi-dashboard` - Key metrics displays
- `hatch/variance-analysis` - Budget vs actual
- `hatch/scenario-modeling` - Multiple scenario views

### 🎯 **Strategic Frameworks**
- `hatch/2x2-matrix` - BCG-style matrices
- `hatch/value-chain` - Porter's value chain
- `hatch/pestle-analysis` - PESTLE framework
- `hatch/swot-analysis` - SWOT analysis grid

### 🔄 **Process & Flow**
- `hatch/interactive-arrows` - Decision flows
- `hatch/process-steps` - Step-by-step processes
- `hatch/timeline` - Project timelines
- `hatch/org-chart` - Organizational structures

### 💼 **Consulting Layouts**
- `hatch/executive-summary` - Standard exec summary
- `hatch/recommendation-slide` - Recommendation format
- `hatch/appendix-layout` - Supporting data layout
- `hatch/contact-closer` - Professional closing slide

## 🔄 Component Development Workflow

### For Component Creators:
1. **Scaffold**: `create_component --name=my-component`
2. **Develop**: Build Vue component with parameters
3. **Test**: `test_component --component=my-component`
4. **Publish**: `publish_component --scope=hatch`

### For Component Users:
1. **Discover**: `list_components --category=charts`
2. **Install**: `install_component hatch/financial-charts`
3. **Use**: `add_component --name=financial-charts --data=revenue.json`
4. **Update**: `update_components` (gets latest versions)

## 🌐 Sharing Mechanisms

### Internal Hatch Registry
- Private npm registry for Hatch-specific components
- Version control and approval workflow
- Usage analytics and popularity metrics
- Team collaboration features

### Community Registry
- Public components for open source community
- Contribution guidelines and review process
- Component marketplace with ratings/reviews
- Integration with GitHub for source code

## 💡 Advanced Features

### Component Composition
```typescript
// Combine multiple components
await mcp.callTool('create_composite_slide', {
  components: [
    { name: 'hatch/kpi-dashboard', position: 'top' },
    { name: 'hatch/interactive-arrows', position: 'middle' },
    { name: 'hatch/financial-charts', position: 'bottom' }
  ]
});
```

### Dynamic Data Binding
```typescript
// Components that update with live data
await mcp.callTool('add_component', {
  componentName: 'hatch/revenue-tracker',
  dataSource: 'supabase://quarterly_results',
  refreshInterval: '1h'
});
```

### Real-time Collaboration
- Multiple team members can contribute components
- Version history and rollback capabilities
- Component usage tracking across teams
- Automated testing and quality assurance

## 🎯 Implementation Phases

### Phase 1: Infrastructure (Week 1)
- Component registry system
- Basic component loading
- `create_component` and `add_component` tools

### Phase 2: Core Components (Week 2)
- Extract your interactive arrows
- Create financial chart library
- Build strategic framework components

### Phase 3: Sharing System (Week 3)
- Hatch internal registry
- Component installation/publishing
- Team collaboration features

### Phase 4: Advanced Features (Week 4)
- Component marketplace
- Dynamic data binding
- Real-time collaboration
- Analytics and insights

## 🏗️ Integration with Existing MCP

### Updated Slidev Builder MCP Structure
```
slidev-builder-mcp/
├── src/
│   ├── index.ts                    # Main MCP server (EXISTING)
│   ├── tools/
│   │   ├── createDeck.ts          # ✅ Auto-starter slides
│   │   ├── createSlide.ts         # ✅ Individual slides  
│   │   ├── exportDeck.ts          # ✅ Multi-format export
│   │   ├── applyTheme.ts          # ✅ Theme customization
│   │   ├── generateChart.ts       # ✅ Python charts
│   │   ├── createComponent.ts     # 🆕 Component scaffolding
│   │   ├── addComponent.ts        # 🆕 Add to slides
│   │   ├── listComponents.ts      # 🆕 Browse library
│   │   ├── installComponent.ts    # 🆕 Install shared
│   │   └── publishComponent.ts    # 🆕 Team sharing
│   ├── components/                # 🆕 Component Registry
│   │   ├── registry.json          # Component catalog
│   │   ├── hatch/                 # Internal components
│   │   │   ├── interactive-arrows/
│   │   │   ├── financial-charts/
│   │   │   ├── strategic-frameworks/
│   │   │   └── consulting-layouts/
│   │   └── community/             # Public components
│   └── schemas/                   # Component validation
├── templates/                     # ✅ Slide templates
├── themes/                        # ✅ Theme system
└── examples/                      # ✅ Usage examples
```

### Enhanced MCP Server Registration
```typescript
// src/index.ts - Updated tool registration
const server = new Server(
  {
    name: 'slidev-builder-mcp',
    version: '2.0.0'  // Version 2.0 with components!
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// Existing tools (already implemented)
server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [
    // ✅ Phase 1 Tools (Already Built)
    { name: 'create_deck', description: 'Create presentation with auto-starter slides' },
    { name: 'create_slide', description: 'Add individual slides to presentation' },
    { name: 'export_deck', description: 'Export to PDF, PPTX, HTML formats' },
    { name: 'apply_theme', description: 'Apply and customize presentation themes' },
    { name: 'generate_chart', description: 'Generate charts with Python integration' },
    
    // 🆕 Phase 2 Tools (Component System)
    { name: 'create_component', description: 'Scaffold new reusable component' },
    { name: 'add_component', description: 'Add component to slide' },
    { name: 'list_components', description: 'Browse available components' },
    { name: 'install_component', description: 'Install component from registry' },
    { name: 'publish_component', description: 'Share component with team' },
  ],
}));
```

### Unified User Experience
Users get **both** basic slide creation AND advanced component features in one MCP:

```bash
# Install the enhanced MCP (includes everything)
npm install -g @hatch/slidev-builder-mcp

# Use basic features
mcp-call create_deck --title="My Presentation"

# Use component features  
mcp-call list_components --scope=hatch
mcp-call add_component --name=hatch/interactive-arrows
```

This creates a **unified, powerful presentation platform** that grows with user needs - from basic slides to sophisticated component-based presentations!

**Benefits of Integration:**
- 🎯 **Single Tool** - Everything in one MCP
- 🔄 **Seamless Workflow** - Components work with existing slides
- 📈 **Progressive Enhancement** - Start simple, add complexity
- 🏢 **Team Adoption** - One tool for all presentation needs
- 🚀 **Competitive Advantage** - Unique component ecosystem

This would create a **competitive advantage** for Hatch - a proprietary library of consulting components that improves productivity and maintains consistency across all presentations!