[ [0xAI] Features ] MCP Server

MCP Server

> AI-powered development with Fabrk design system knowledge.

Overview

[ [0xAI] STATUS ]

The Model Context Protocol (MCP) server gives AI assistants deep knowledge of the Fabrk design system. When connected, your AI tool understands our terminal aesthetic, knows all 78+ components, and generates code that follows design rules automatically. No more manually correcting rounded corners or fixing color tokens.

Features

[ [0x01] 78+_COMPONEN ]

STATUS: READY

DESC: Full catalog with props, variants, and usage examples. AI knows every component.

[ [0x02] 18_THEMES ]

STATUS: READY

DESC: CRT phosphor, retro computer, handheld, and monochrome themes built-in.

[ [0x03] CODE_GENERAT ]

STATUS: READY

DESC: Generate components and pages that follow terminal aesthetic automatically.

[ [0x04] DESIGN_VALID ]

STATUS: READY

DESC: Check code against design system rules before committing.

[ [0x05] GUIDED_WORKF ]

STATUS: READY

DESC: Pre-configured prompts for landing pages, dashboards, and forms.

[ [0x06] PAGE_SCAFFOL ]

STATUS: READY

DESC: Generate complete pages with proper structure and components.

Setup

[ [0x01] RUN SETUP SCRIPT ]

DESC: The easiest way to configure MCP. Run this from your project root and follow the prompts.

1$npm run mcp:setup
2
3$# The script will:
4$# 1. Build the MCP server if needed
5$# 2. Ask which AI tool you're using
6$# 3. Create the config file automatically
7
8$# Supported tools:
9$# - Claude Code (.mcp.json in project)
10$# - Cursor (manual config)
11$# - Claude Desktop (global config)

[ [0x02] MANUAL SETUP - CLAUDE CODE ]

DESC: If you prefer manual setup, create .mcp.json in your project root.

1{ 
2  "mcpServers": {
3    "fabrk": {
4      "command": "node",
5      "args": ["./mcp-servers/fabrk/dist/index.js"]
6    }
7  }
8}

[ [0x03] MANUAL SETUP - CLAUDE DESKTOP ]

DESC: For Claude Desktop, add to your global config file. Use the absolute path to your project.

1// macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
2// Windows: %APPDATA%Claudeclaude_desktop_config.json
3
4{
5  "mcpServers": {
6    "fabrk": {
7      "command": "node",
8      "args": ["/path/to/your/project/mcp-servers/fabrk/dist/index.js"]
9    }
10  }
11}

[ [0x04] RESTART YOUR AI TOOL ]

DESC: After adding the config, restart Claude Code or Claude Desktop. The MCP server will start automatically when you open your project.

Usage

[ [0x93] GENERATE A COMPONENT ]

Ask your AI to generate Fabrk-styled components. The MCP provides design context automatically.

1// Example prompt:
2"Generate a pricing card component with terminal header"
3
4// The AI will create:
5import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
6import { Button } from '@/components/ui/button';
7import { cn } from '@/lib/utils';
8import { mode } from '@/design-system';
9
10export function PricingCard({ plan, price, features }: { plan: string; price: number; features: string[] }) {
11  return (
12    <Card className={cn('border border-border', mode.radius)}>
13      <CardHeader code="0x10" title={plan.toUpperCase()} />
14      <CardContent className="space-y-4">
15        <div className={cn('text-3xl font-bold', mode.font)}>
16          ${price}
17          <span className="text-muted-foreground text-sm">/mo</span>
18        </div>
19        <ul className="space-y-2">
20          {features.map((feature, i) => (
21            <li key={i} className={cn('text-muted-foreground', mode.font, 'text-xs')}>
22              [OK] {feature}
23            </li>
24          ))}
25        </ul>
26      </CardContent>
27      <CardFooter>
28        <Button className={cn(mode.radius, mode.font, 'w-full text-xs')}>
29          > GET STARTED
30        </Button>
31      </CardFooter>
32    </Card>
33  );
34}

[ [0x88] SCAFFOLD A PAGE ]

Generate complete pages with proper structure, imports, and components.

1// Example prompt:
2"Create a dashboard page with analytics cards and a data table"
3
4// The AI will generate a full page with:
5// - Proper imports from @/components/ui/
6// - Terminal-styled headers [ [0xXX] TITLE ]
7// - Design token colors (bg-background, text-foreground)
8// - Correct spacing (8-point grid)
9// - Mobile-responsive layout

[ [0xD0] VALIDATE YOUR CODE ]

Check existing code against Fabrk design rules.

1// Example prompt:
2"Validate this component: <Button className='rounded-[4px] bg-blue-500'>Submit</Button>"
3
4// The AI will identify issues:
5// ✗ Border radius should be rounded-none (terminal aesthetic)
6// ✗ bg-blue-500 should be bg-primary (use design tokens)
7// ✗ Button text should be "> SUBMIT" (uppercase with prefix)
8
9// And suggest the fix:
10<Button className="rounded-none bg-primary text-xs font-mono">
11  > SUBMIT
12</Button>

Available Tools

[ [0x6D] GENERATE_COMPONENT ]

Generate Fabrk-styled components with terminal aesthetic.

Parameters

• componentType (required): button, card, form, table
• name (required): Component name
• variant: default, destructive, outline
• withTerminalHeader: Include [ [0xXX] ] header

[ [0x19] GENERATE_PAGE ]

Scaffold complete pages using Fabrk templates.

Parameters

• pageType (required): landing, dashboard, settings
• pageName (required): Page name
• sections: hero, features, pricing, cta

[ [0xFA] QUERY_COMPONENT ]

Get detailed docs for any of the $78+ components.

Parameters

• component (required): Component name or slug
• include: props, variants, examples, a11y

[ [0x8A] VALIDATE_CODE ]

Check code against design system rules.

Parameters

• code (required): TSX/JSX to validate
• strict: Fail on warnings too

Guided Workflows

[ [0x00] INFO ]

Prompts are step-by-step guides

These prompts walk the AI through building common features. They ensure the AI follows Fabrk patterns consistently, even for complex multi-step tasks.

[ [0x28] BUILD_LANDING_PAGE ]

Guided workflow for building a terminal-styled landing page with hero, features, pricing, and CTA sections.

Arguments

• productName (required): Your product name
• sections: Comma-separated list of sections

[ [0xCD] ADD_DASHBOARD_FEATURE ]

Add a new feature card to a dashboard. Supports analytics cards, data tables, forms, and settings panels.

Arguments

• featureName (required): Name of the feature
• featureType: analytics, data-table, form, settings

[ [0x27] CREATE_FORM ]

Build a form with Zod validation, React Hook Form, and proper terminal styling.

Arguments

• formName (required): Name for the form component
• fields (required): Comma-separated field names

Design Rules Enforced

[ [0xB8] TERMINAL AESTHETIC ]

The MCP server teaches AI these core design principles:

1. Sharp Edges

Always use rounded-none. Never use other border radius values like sm, md, or lg.

2. Monospace Font

All text uses font-mono. Body tag has JetBrains Mono applied globally.

3. Color Tokens

Use bg-background, text-foreground, border-border. Never hex values or Tailwind colors.

4. Terminal Formatting

Buttons: '> UPPERCASE'. Labels: '[LABEL]:'. Headers: '[ [0xXX] TITLE ]'.

5. 8-Point Grid

Spacing uses 4px, 8px, 16px, 24px, 32px. Classes: p-1, p-2, p-4, p-6, p-8.

Troubleshooting

MCP server not responding

Check the server is built: ls mcp-servers/fabrk/dist/index.js
If missing, rebuild: npm run mcp:build
Restart your AI tool completely (not just the chat)
Check the .mcp.json path is correct for your project location

AI generating wrong code style

The AI might not have loaded the MCP context. Try explicitly referencing it:"Using the Fabrk MCP server, show me the design system rules"This forces the AI to query the MCP resources before generating code.

Config file not found

Run npm run mcp:setup to auto-generate the config. For Claude Desktop, make sure you're using the absolute path to your project.

Cursor MCP setup

Cursor requires manual configuration:

Open Cursor Settings (Cmd/Ctrl + ,)
Search for "MCP"
Add server: name=fabrk, command=node, args=./mcp-servers/fabrk/dist/index.js

Next Steps

[ [0xA5] THEME GUIDE ]

Learn about Fabrk's 12 terminal themes and how to customize them.

[ [0x16] COMPONENTS ]

Browse all 78+ components with examples and usage documentation.

[ [0xAI] Features ] MCP Server

MCP Server

> AI-powered development with Fabrk design system knowledge.

Overview

[ [0xAI] STATUS ]

Features

[ [0x01] 78+_COMPONEN ]

STATUS: READY

DESC: Full catalog with props, variants, and usage examples. AI knows every component.

[ [0x02] 18_THEMES ]

STATUS: READY

DESC: CRT phosphor, retro computer, handheld, and monochrome themes built-in.

[ [0x03] CODE_GENERAT ]

STATUS: READY

DESC: Generate components and pages that follow terminal aesthetic automatically.

[ [0x04] DESIGN_VALID ]

STATUS: READY

DESC: Check code against design system rules before committing.

[ [0x05] GUIDED_WORKF ]

STATUS: READY

DESC: Pre-configured prompts for landing pages, dashboards, and forms.

[ [0x06] PAGE_SCAFFOL ]

STATUS: READY

DESC: Generate complete pages with proper structure and components.

Setup

[ [0x01] RUN SETUP SCRIPT ]

DESC: The easiest way to configure MCP. Run this from your project root and follow the prompts.

1$npm run mcp:setup
2
3$# The script will:
4$# 1. Build the MCP server if needed
5$# 2. Ask which AI tool you're using
6$# 3. Create the config file automatically
7
8$# Supported tools:
9$# - Claude Code (.mcp.json in project)
10$# - Cursor (manual config)
11$# - Claude Desktop (global config)

[ [0x02] MANUAL SETUP - CLAUDE CODE ]

DESC: If you prefer manual setup, create .mcp.json in your project root.

1{ 
2  "mcpServers": {
3    "fabrk": {
4      "command": "node",
5      "args": ["./mcp-servers/fabrk/dist/index.js"]
6    }
7  }
8}

[ [0x03] MANUAL SETUP - CLAUDE DESKTOP ]

DESC: For Claude Desktop, add to your global config file. Use the absolute path to your project.

1// macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
2// Windows: %APPDATA%Claudeclaude_desktop_config.json
3
4{
5  "mcpServers": {
6    "fabrk": {
7      "command": "node",
8      "args": ["/path/to/your/project/mcp-servers/fabrk/dist/index.js"]
9    }
10  }
11}

[ [0x04] RESTART YOUR AI TOOL ]

DESC: After adding the config, restart Claude Code or Claude Desktop. The MCP server will start automatically when you open your project.

Usage

[ [0x93] GENERATE A COMPONENT ]

Ask your AI to generate Fabrk-styled components. The MCP provides design context automatically.

1// Example prompt:
2"Generate a pricing card component with terminal header"
3
4// The AI will create:
5import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
6import { Button } from '@/components/ui/button';
7import { cn } from '@/lib/utils';
8import { mode } from '@/design-system';
9
10export function PricingCard({ plan, price, features }: { plan: string; price: number; features: string[] }) {
11  return (
12    <Card className={cn('border border-border', mode.radius)}>
13      <CardHeader code="0x10" title={plan.toUpperCase()} />
14      <CardContent className="space-y-4">
15        <div className={cn('text-3xl font-bold', mode.font)}>
16          ${price}
17          <span className="text-muted-foreground text-sm">/mo</span>
18        </div>
19        <ul className="space-y-2">
20          {features.map((feature, i) => (
21            <li key={i} className={cn('text-muted-foreground', mode.font, 'text-xs')}>
22              [OK] {feature}
23            </li>
24          ))}
25        </ul>
26      </CardContent>
27      <CardFooter>
28        <Button className={cn(mode.radius, mode.font, 'w-full text-xs')}>
29          > GET STARTED
30        </Button>
31      </CardFooter>
32    </Card>
33  );
34}

[ [0x88] SCAFFOLD A PAGE ]

Generate complete pages with proper structure, imports, and components.

1// Example prompt:
2"Create a dashboard page with analytics cards and a data table"
3
4// The AI will generate a full page with:
5// - Proper imports from @/components/ui/
6// - Terminal-styled headers [ [0xXX] TITLE ]
7// - Design token colors (bg-background, text-foreground)
8// - Correct spacing (8-point grid)
9// - Mobile-responsive layout

[ [0xD0] VALIDATE YOUR CODE ]

Check existing code against Fabrk design rules.

1// Example prompt:
2"Validate this component: <Button className='rounded-[4px] bg-blue-500'>Submit</Button>"
3
4// The AI will identify issues:
5// ✗ Border radius should be rounded-none (terminal aesthetic)
6// ✗ bg-blue-500 should be bg-primary (use design tokens)
7// ✗ Button text should be "> SUBMIT" (uppercase with prefix)
8
9// And suggest the fix:
10<Button className="rounded-none bg-primary text-xs font-mono">
11  > SUBMIT
12</Button>

Available Tools

[ [0x6D] GENERATE_COMPONENT ]

Generate Fabrk-styled components with terminal aesthetic.

Parameters

• componentType (required): button, card, form, table
• name (required): Component name
• variant: default, destructive, outline
• withTerminalHeader: Include [ [0xXX] ] header

[ [0x19] GENERATE_PAGE ]

Scaffold complete pages using Fabrk templates.

Parameters

• pageType (required): landing, dashboard, settings
• pageName (required): Page name
• sections: hero, features, pricing, cta

[ [0xFA] QUERY_COMPONENT ]

Get detailed docs for any of the $78+ components.

Parameters

• component (required): Component name or slug
• include: props, variants, examples, a11y

[ [0x8A] VALIDATE_CODE ]

Check code against design system rules.

Parameters

• code (required): TSX/JSX to validate
• strict: Fail on warnings too

Guided Workflows

[ [0x00] INFO ]

Prompts are step-by-step guides

These prompts walk the AI through building common features. They ensure the AI follows Fabrk patterns consistently, even for complex multi-step tasks.

[ [0x28] BUILD_LANDING_PAGE ]

Guided workflow for building a terminal-styled landing page with hero, features, pricing, and CTA sections.

Arguments

• productName (required): Your product name
• sections: Comma-separated list of sections

[ [0xCD] ADD_DASHBOARD_FEATURE ]

Add a new feature card to a dashboard. Supports analytics cards, data tables, forms, and settings panels.

Arguments

• featureName (required): Name of the feature
• featureType: analytics, data-table, form, settings

[ [0x27] CREATE_FORM ]

Build a form with Zod validation, React Hook Form, and proper terminal styling.

Arguments

• formName (required): Name for the form component
• fields (required): Comma-separated field names

Design Rules Enforced

[ [0xB8] TERMINAL AESTHETIC ]

The MCP server teaches AI these core design principles:

1. Sharp Edges

Always use rounded-none. Never use other border radius values like sm, md, or lg.

2. Monospace Font

All text uses font-mono. Body tag has JetBrains Mono applied globally.

3. Color Tokens

Use bg-background, text-foreground, border-border. Never hex values or Tailwind colors.

4. Terminal Formatting

Buttons: '> UPPERCASE'. Labels: '[LABEL]:'. Headers: '[ [0xXX] TITLE ]'.

5. 8-Point Grid

Spacing uses 4px, 8px, 16px, 24px, 32px. Classes: p-1, p-2, p-4, p-6, p-8.

Troubleshooting

MCP server not responding

Check the server is built: ls mcp-servers/fabrk/dist/index.js
If missing, rebuild: npm run mcp:build
Restart your AI tool completely (not just the chat)
Check the .mcp.json path is correct for your project location

AI generating wrong code style

Config file not found

Run npm run mcp:setup to auto-generate the config. For Claude Desktop, make sure you're using the absolute path to your project.

Cursor MCP setup

Cursor requires manual configuration:

Open Cursor Settings (Cmd/Ctrl + ,)
Search for "MCP"
Add server: name=fabrk, command=node, args=./mcp-servers/fabrk/dist/index.js

Next Steps

[ [0xA5] THEME GUIDE ]

Learn about Fabrk's 12 terminal themes and how to customize them.

[ [0x16] COMPONENTS ]

Browse all 78+ components with examples and usage documentation.