Design Capture

🤖 MCP Server

De MCP (Model Context Protocol) server exposeert 6 tools voor programmatische toegang tot design data. Compatibel met Hermes Agent, Claude Desktop, Cursor, Continue en elke MCP-client.

Connectie methoden

🔹 SSE (HTTP) — aanbevolen

Voor Claude Desktop, Cursor en andere MCP-clients die HTTP ondersteunen:

{
  "mcpServers": {
    "design-capture": {
      "type": "sse",
      "url": "http://192.168.10.12:31009/mcp/sse"
    }
  }
}

{
  "mcpServers": {
    "design-capture": {
      "url": "http://192.168.10.12:31009/mcp/sse"
    }
  }
}

{
  "experimental": {
    "mcpServers": {
      "design-capture": {
        "transport": "sse",
        "url": "http://192.168.10.12:31009/mcp/sse"
      }
    }
  }
}

🔸 stdio — voor Hermes Agent

Direct Python proces, geen netwerk overhead:

mcp_servers:
  design-capture:
    transport: stdio
    command: python /app/app/mcp/server.py

python /app/app/mcp/server.py

MCP Tools (6 stuks)

Voorbeeld: capture een website via MCP

design_capture_website(
  company_name="Example Corp",
  url="https://example.com"
)
# Response: ✅ Capture complete for Example Corp!
# Company ID: 1  |  Colors: 12  |  Fonts: 8

Voorbeeld: theme exporteren

design_export_theme(company_id=1)
# Response: JSON met theme.colors, theme.typography, theme.spacing
#           theme.borderRadius, theme.shadows, theme.breakpoints

🧠 ChatGPT / AI Assistants

OpenAPI spec (GPT Actions)

FastAPI genereert automatisch een volledige OpenAPI 3.1 spec. Deze kun je direct gebruiken als GPT Action in ChatGPT, of in elke andere AI-tool die OpenAPI ondersteunt.

http://192.168.10.12:31009/openapi.json

Zo voeg je toe aan ChatGPT

1. Open ChatGPT → Explore GPTs → Configure
2. Scroll naar Actions → Add action
3. Plak de OpenAPI URL of upload openapi.json:

http://192.168.10.12:31009/openapi.json

Gepubliceerde GPT Actions

MCP via SSE (Claude)

Voor Claude Desktop en andere MCP-clients gebruik je de SSE-transport op:

http://192.168.10.12:31009/mcp/sse

Hermes Agent

Voeg de MCP server toe aan je Hermes config om design data direct uit Hermes te kunnen opvragen:

# Via SSH tunnel of direct als Hermes op dezelfde VM draait
mcp_servers:
  design-capture:
    transport: sse
    url: http://192.168.10.12:31009/mcp/sse

🎨 Design Tokens — Structuur

Wat wordt er precies geëxtraheerd en hoe gebruik je het in je eigen apps?

Wat er wordt opgeslagen

In je eigen app gebruiken

Optie 1: Directe API-call (eenmalig)

# Haal design tokens op voor company X
curl http://localhost:31009/api/v1/companies/1/design \
  | jq '.colors[] | {hex: .hex, role: .role}'

Optie 2: CSS import (continu bijgewerkt)

/* In je app's stylesheet */
@import url("http://localhost:31009/api/v1/companies/1/design/css");

/* Nu beschikbaar: */
body {
  background: var(--color-background, #fff);
  font-family: var(--font-body-family, sans-serif);
}

Optie 3: Theme JSON via MCP

// Gebruik de MCP tool design_export_theme(company_id=1)
// Dit returned een schoon, gestructureerd theme-object:
{
  "theme": {
    "colors": {
      "primary": { "--color-primary": "#1a1a2e" },
      "accent": { "--color-accent": "#e94560" }
    },
    "typography": {
      "body": { "fontFamily": "Inter", "fontSize": "16px" },
      "heading": { "fontFamily": "Poppins", "fontWeight": "700" }
    }
  }
}

Optie 4: Tailwind CSS config

// tailwind.config.js — haal design tokens via API
const designTokens = await fetch(
  'http://localhost:31009/api/v1/companies/1/design'
).then(r => r.json());

module.exports = {
  theme: {
    extend: {
      colors: Object.fromEntries(
        designTokens.colors.map(c => [c.role || 'custom', c.hex])
      ),
      fontFamily: {
        body: [designTokens.typography.find(t => t.usage_tag === 'body')?.fontFamily],
      },
    },
  },
};

Optie 5: ChatGPT / AI Assistant

Gebruik de OpenAPI spec om een GPT Action te maken. Zie tab ChatGPT / AI.

🏢 Companies overzicht

Beheer captured companies, start nieuwe captures, bekijk design data.