MCP Server: AI-Assisted Development for Fabrk

$cd mcp-servers/fabrk
$npm install
$npm run build

// ~/.claude/config.json
{
  "mcpServers": {
    "fabrk": {
      "command": "node",
      "args": ["/path/to/project/mcp-servers/fabrk/dist/index.js"],
      "cwd": "/path/to/project"
    }
  }
}

// .cursor/mcp.json
{
  "mcpServers": {
    "fabrk": {
      "command": "node",
      "args": ["./mcp-servers/fabrk/dist/index.js"]
    }
  }
}

// Tool definition
{
  name: 'list_components',
  description: 'List all available UI components in the Fabrk design system',
  inputSchema: {
    type: 'object',
    properties: {
      category: {
        type: 'string',
        enum: ['form', 'layout', 'feedback', 'navigation', 'overlay', 'data', 'chart'],
        description: 'Filter by component category',
      },
    },
  },
}

// Example output
{
  components: [
    { name: 'Button', category: 'form', path: '@/components/ui/button' },
    { name: 'Input', category: 'form', path: '@/components/ui/input' },
    { name: 'Card', category: 'layout', path: '@/components/ui/card' },
    // ... 62+ components
  ],
  totalCount: 62,
}

// Tool definition
{
  name: 'get_component',
  description: 'Get detailed information about a specific component',
  inputSchema: {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        description: 'Component name (e.g., "Button", "Card")',
      },
    },
    required: ['name'],
  },
}

// Example output for Button
{
  name: 'Button',
  path: '@/components/ui/button',
  description: 'Interactive button component with multiple variants',
  props: {
    variant: {
      type: "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
      default: "'default'",
      description: 'Visual style variant',
    },
    size: {
      type: "'default' | 'sm' | 'lg' | 'icon'",
      default: "'default'",
      description: 'Button size',
    },
    asChild: {
      type: 'boolean',
      default: 'false',
      description: 'Merge props onto child element',
    },
  },
  examples: [
    {
      title: 'Primary button',
      code: '<Button className={cn(mode.radius)}>> SUBMIT</Button>',
    },
    {
      title: 'Destructive button',
      code: '<Button variant="destructive" className={cn(mode.radius)}>> DELETE</Button>',
    },
  ],
}

// Example output
{
  themes: [
    {
      name: 'default',
      description: 'Clean terminal theme',
      radius: 'rounded',
      primaryHue: 145,
    },
    {
      name: 'matrix',
      description: 'Green on black terminal',
      radius: 'sharp',
      primaryHue: 140,
    },
    {
      name: 'dracula',
      description: 'Purple accents',
      radius: 'rounded',
      primaryHue: 300,
    },
    // ... 18 themes total
  ],
}

// Example output
{
  rules: [
    {
      category: 'colors',
      rule: 'Never use hardcoded colors',
      examples: {
        correct: 'bg-primary text-primary-foreground',
        incorrect: 'bg-purple-500 text-white',
      },
    },
    {
      category: 'radius',
      rule: 'Use mode.radius for elements with full borders',
      examples: {
        correct: '<Card className={cn("border border-border", mode.radius)}>',
        incorrect: '<Card className="border border-border rounded-lg">',
      },
    },
    {
      category: 'typography',
      rule: 'Use UPPERCASE for labels and buttons',
      examples: {
        correct: '[ STATUS ] and > SUBMIT',
        incorrect: '[ status ] and > Submit',
      },
    },
  ],
}

// Tool definition
{
  name: 'generate_page',
  description: 'Generate a new page following Fabrk conventions',
  inputSchema: {
    type: 'object',
    properties: {
      path: {
        type: 'string',
        description: 'Page path (e.g., "/dashboard/analytics")',
      },
      title: {
        type: 'string',
        description: 'Page title',
      },
      description: {
        type: 'string',
        description: 'Page description for metadata',
      },
      authenticated: {
        type: 'boolean',
        description: 'Whether page requires authentication',
        default: true,
      },
    },
    required: ['path', 'title'],
  },
}

// Example output
{
  files: [
    {
      path: 'src/app/(platform)/dashboard/analytics/page.tsx',
      content: `import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';

export const metadata = {
  title: 'Analytics | Your App',
  description: 'View your analytics dashboard',
};

export default async function AnalyticsPage() {
  const session = await auth();
  if (!session?.user) redirect('/login');

  return (
    <div className="container mx-auto py-8">
      <header className="mb-8">
        <span className="text-xs text-muted-foreground">[ DASHBOARD ]</span>
        <h1 className="text-2xl font-semibold">ANALYTICS</h1>
      </header>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {/* Stats cards here */}
      </div>
    </div>
  );
}`,
    },
  ],
}

// Example output
{
  patterns: {
    authenticated: `import { auth } from '@/lib/auth';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  try {
    // Your logic here
    return NextResponse.json({ data });
  } catch (error) {
    console.error('Error:', error);
    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
  }
}`,
    webhook: `import { headers } from 'next/headers';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const headersList = headers();
  const signature = headersList.get('x-signature');

  // Verify webhook signature
  if (!verifySignature(signature)) {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
  }

  const payload = await request.json();

  // Handle webhook event
  switch (payload.type) {
    case 'event.type':
      // Handle event
      break;
  }

  return NextResponse.json({ received: true });
}`,
  },
}

// Query 1: What components exist?
await mcp.call('list_components', { category: 'layout' });
// Returns: Card, Tabs, Accordion, etc.

// Query 2: Get Card component details
await mcp.call('get_component', { name: 'Card' });
// Returns: Props, examples, usage patterns

// Query 3: What are the design rules?
await mcp.call('get_design_rules');
// Returns: Color tokens, mode.radius, typography rules

// Query 4: Get Badge component for trend indicator
await mcp.call('get_component', { name: 'Badge' });
// Returns: Badge props and styling

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';

interface RevenueCardProps {
  revenue: number;
  previousRevenue: number;
}

export function RevenueCard({ revenue, previousRevenue }: RevenueCardProps) {
  const trend = ((revenue - previousRevenue) / previousRevenue) * 100;
  const isPositive = trend > 0;

  return (
    <Card className={cn('border border-border', mode.radius)}>
      <CardHeader className="pb-2">
        <span className="text-xs text-muted-foreground">[ REVENUE ]</span>
        <CardTitle className="text-sm font-medium">MONTHLY REVENUE</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-3xl font-bold text-primary">
          ${revenue.toLocaleString()}
        </div>
        <div className="flex items-center gap-2 mt-2">
          <Badge
            className={cn(
              isPositive
                ? 'bg-success/10 text-success border-success/50'
                : 'bg-destructive/10 text-destructive border-destructive/50'
            )}
          >
            {isPositive ? (
              <TrendingUp className="mr-1 h-3 w-3" />
            ) : (
              <TrendingDown className="mr-1 h-3 w-3" />
            )}
            {Math.abs(trend).toFixed(1)}%
          </Badge>
          <span className="text-xs text-muted-foreground">vs last month</span>
        </div>
      </CardContent>
    </Card>
  );
}

// knowledge/components.ts
export const components = {
  Button: {
    path: '@/components/ui/button',
    category: 'form',
    description: 'Interactive button with variants',
    props: { /* ... */ },
    examples: [ /* ... */ ],
  },
  Card: {
    path: '@/components/ui/card',
    category: 'layout',
    description: 'Container component with header, content, footer',
    subcomponents: ['CardHeader', 'CardTitle', 'CardDescription', 'CardContent', 'CardFooter'],
    props: { /* ... */ },
    examples: [ /* ... */ ],
  },
  // ... 60+ more components
};

// knowledge/design.ts
export const designRules = {
  colors: {
    rule: 'Use design tokens, never hardcoded colors',
    allowed: [
      'bg-background', 'bg-card', 'bg-muted', 'bg-primary',
      'text-foreground', 'text-muted-foreground', 'text-primary',
      'border-border', 'border-primary',
    ],
    banned: [
      'bg-white', 'bg-black', 'bg-gray-*', 'text-gray-*',
      '#hexvalues', 'rgb(*)', 'hsl(*)',
    ],
  },
  radius: {
    rule: 'Use mode.radius for full-border elements',
    apply: ['Card', 'Button', 'Input', 'Dialog', 'Alert'],
    skip: ['Table cells', 'Partial borders', 'Switch (always rounded-full)'],
  },
  typography: {
    rule: 'Monospace font globally, UPPERCASE for labels',
    patterns: {
      labels: '[ LABEL ] with brackets',
      buttons: '> SUBMIT with chevron prefix',
      headings: 'UPPERCASE',
      body: 'Sentence case',
    },
  },
  spacing: {
    rule: '8-point grid system',
    scale: {
      xs: 'p-1 (4px)',
      sm: 'p-2 (8px)',
      md: 'p-4 (16px)',
      lg: 'p-6 (24px)',
      xl: 'p-8 (32px)',
    },
  },
};

// knowledge/patterns.ts
export const patterns = {
  authentication: {
    serverComponent: `const session = await auth();
if (!session?.user) redirect('/login');`,
    apiRoute: `const session = await auth();
if (!session?.user) {
  return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}`,
    clientCheck: `const { data: session } = useSession();
if (!session) return <LoginPrompt />;`,
  },
  errorHandling: {
    apiRoute: `try {
  // Logic
  return NextResponse.json({ data }, { status: 200 });
} catch (error) {
  console.error('Description:', error);
  return NextResponse.json({ error: 'Message' }, { status: 500 });
}`,
  },
  database: {
    query: `const data = await prisma.model.findMany({
  where: { userId: session.user.id },
  orderBy: { createdAt: 'desc' },
});`,
    create: `const item = await prisma.model.create({
  data: { ...input, userId: session.user.id },
});`,
  },
};

// knowledge/architecture.ts
export const architecture = {
  directories: {
    'src/app/(public)': 'Public pages (landing, pricing)',
    'src/app/(platform)': 'Authenticated app pages',
    'src/app/(auth)': 'Auth pages (login, register)',
    'src/app/api': 'API routes',
    'src/components/ui': 'UI primitives (62 components)',
    'src/components/charts': 'Chart components (8)',
    'src/lib': 'Business logic, utilities',
    'src/hooks': 'Custom React hooks',
  },
  conventions: {
    pages: 'Use route groups for organization',
    components: 'Feature components in src/components/{feature}/',
    api: 'RESTful routes with proper error handling',
  },
};

// mcp-servers/fabrk/src/tools.ts

export const customTools = [
  {
    name: 'generate_api_route',
    description: 'Generate a new API route with authentication and error handling',
    inputSchema: {
      type: 'object',
      properties: {
        path: { type: 'string', description: 'Route path (e.g., "/api/users")' },
        methods: {
          type: 'array',
          items: { enum: ['GET', 'POST', 'PATCH', 'DELETE'] },
          description: 'HTTP methods to implement',
        },
        authenticated: { type: 'boolean', default: true },
        rateLimit: { type: 'string', enum: ['auth', 'api', 'strict'] },
      },
      required: ['path', 'methods'],
    },
    handler: async ({ path, methods, authenticated, rateLimit }) => {
      // Generate route code based on parameters
      return { code: generatedCode };
    },
  },

  {
    name: 'generate_form',
    description: 'Generate a form component with validation',
    inputSchema: {
      type: 'object',
      properties: {
        name: { type: 'string', description: 'Form component name' },
        fields: {
          type: 'array',
          items: {
            type: 'object',
            properties: {
              name: { type: 'string' },
              type: { enum: ['text', 'email', 'password', 'number', 'select', 'textarea'] },
              required: { type: 'boolean' },
              validation: { type: 'string' },
            },
          },
        },
        onSubmit: { type: 'string', description: 'API endpoint or action' },
      },
      required: ['name', 'fields'],
    },
    handler: async ({ name, fields, onSubmit }) => {
      // Generate form with react-hook-form and zod validation
      return { code: generatedFormCode };
    },
  },
];

// mcp-servers/fabrk/src/config.ts
export const config = {
  // Include component documentation
  includeComponents: true,

  // Include design system rules
  includeDesignSystem: true,

  // Include code patterns
  includePatterns: true,

  // Include example code
  includeExamples: true,

  // Include theme information
  includeThemes: true,

  // Custom knowledge directories
  knowledgePaths: [
    './knowledge',
    '../../docs', // Include project docs
  ],

  // Component scanning
  componentPaths: [
    '../../src/components/ui',
    '../../src/components/charts',
  ],
};

$# Verify the server builds
$cd mcp-servers/fabrk
$npm run build

$# Test manually
$node dist/index.js

$# Check Claude Code logs
$cat ~/.claude/logs/mcp.log

{
  "mcpServers": {
    "fabrk": {
      "command": "node",
      "args": ["/absolute/path/to/dist/index.js"]
    }
  }
}

$cd mcp-servers/fabrk
$npm run build