@urbint/cl 1.0.1

package/mcp-server/src/index.ts

@@ -0,0 +1,1136 @@
+#!/usr/bin/env node
+/**
+ * Urbint Component Library - MCP Server
+ * 
+ * This MCP (Model Context Protocol) server enables AI assistants to:
+ * - Discover and explore all components in the design system
+ * - Get detailed component documentation, props, and examples
+ * - Access design tokens (colors, spacing, typography, etc.)
+ * - Generate code snippets for common patterns
+ * - Search components by functionality or category
+ */
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  CallToolRequestSchema,
+  ListResourcesRequestSchema,
+  ListToolsRequestSchema,
+  ReadResourceRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+
+import {
+  componentRegistry,
+  getComponentByName,
+  getComponentsByCategory,
+  searchComponents,
+  getAllCategories,
+  type ComponentMetadata,
+} from './registry/components.js';
+
+import {
+  colorTokens,
+  spacingTokens,
+  typographyTokens,
+  borderRadiusTokens,
+  elevationTokens,
+  formatTokensAsMarkdown,
+  searchTokens,
+} from './registry/tokens.js';
+
+// Create the MCP server
+const server = new Server(
+  {
+    name: 'urbint-cl',
+    version: '1.0.0',
+  },
+  {
+    capabilities: {
+      tools: {},
+      resources: {},
+    },
+  }
+);
+
+// ============================================================================
+// TOOLS
+// ============================================================================
+
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: 'list_components',
+        description: 'List all available components in the Urbint Component Library. Can filter by category.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            category: {
+              type: 'string',
+              description: 'Filter by category: layout, typography, form, feedback, data-display, overlay, action, utility',
+              enum: ['layout', 'typography', 'form', 'feedback', 'data-display', 'overlay', 'action', 'utility'],
+            },
+          },
+        },
+      },
+      {
+        name: 'get_component',
+        description: 'Get detailed documentation for a specific component including props, examples, and related components.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              description: 'Component name (e.g., Button, Input, Card, Modal)',
+            },
+          },
+          required: ['name'],
+        },
+      },
+      {
+        name: 'search_components',
+        description: 'Search for components by name, description, or functionality tags.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            query: {
+              type: 'string',
+              description: 'Search query (e.g., "button", "form", "modal", "loading")',
+            },
+          },
+          required: ['query'],
+        },
+      },
+      {
+        name: 'get_design_tokens',
+        description: 'Get design tokens (colors, spacing, typography, border radius, elevation) for the design system.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            category: {
+              type: 'string',
+              description: 'Token category to retrieve',
+              enum: ['colors', 'spacing', 'typography', 'borderRadius', 'elevation', 'all'],
+            },
+          },
+        },
+      },
+      {
+        name: 'search_tokens',
+        description: 'Search for specific design tokens by name or description.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            query: {
+              type: 'string',
+              description: 'Search query (e.g., "blue", "padding", "heading")',
+            },
+          },
+          required: ['query'],
+        },
+      },
+      {
+        name: 'generate_component_code',
+        description: 'Generate code snippet for a component with specific configuration.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            component: {
+              type: 'string',
+              description: 'Component name',
+            },
+            variant: {
+              type: 'string',
+              description: 'Component variant (if applicable)',
+            },
+            withState: {
+              type: 'boolean',
+              description: 'Include useState hook for controlled components',
+            },
+            props: {
+              type: 'object',
+              description: 'Additional props to include',
+            },
+          },
+          required: ['component'],
+        },
+      },
+      {
+        name: 'get_form_pattern',
+        description: 'Get a complete form pattern code snippet with validation and styling.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            fields: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  name: { type: 'string' },
+                  type: { type: 'string', enum: ['text', 'email', 'password', 'select', 'checkbox', 'textarea', 'date'] },
+                  label: { type: 'string' },
+                  required: { type: 'boolean' },
+                },
+              },
+              description: 'Form fields configuration',
+            },
+            includeValidation: {
+              type: 'boolean',
+              description: 'Include validation logic',
+            },
+          },
+          required: ['fields'],
+        },
+      },
+      {
+        name: 'get_layout_pattern',
+        description: 'Get a layout pattern code snippet (card grid, sidebar, header, etc.)',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            pattern: {
+              type: 'string',
+              description: 'Layout pattern type',
+              enum: ['card-grid', 'sidebar-layout', 'header-content', 'list-detail', 'dashboard', 'form-layout'],
+            },
+          },
+          required: ['pattern'],
+        },
+      },
+    ],
+  };
+});
+
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  switch (name) {
+    case 'list_components': {
+      const category = args?.category as ComponentMetadata['category'] | undefined;
+      const components = category
+        ? getComponentsByCategory(category)
+        : componentRegistry;
+
+      const result = components.map((c) => ({
+        name: c.name,
+        displayName: c.displayName,
+        description: c.description,
+        category: c.category,
+        tags: c.tags,
+      }));
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                total: result.length,
+                category: category || 'all',
+                components: result,
+              },
+              null,
+              2
+            ),
+          },
+        ],
+      };
+    }
+
+    case 'get_component': {
+      const componentName = args?.name as string;
+      const component = getComponentByName(componentName);
+
+      if (!component) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Component "${componentName}" not found. Use list_components to see available components.`,
+            },
+          ],
+        };
+      }
+
+      // Format component documentation
+      let markdown = `# ${component.displayName}\n\n`;
+      markdown += `${component.description}\n\n`;
+      markdown += `**Category:** ${component.category}\n`;
+      markdown += `**Tags:** ${component.tags.join(', ')}\n\n`;
+      markdown += `## Import\n\n\`\`\`tsx\n${component.importPath}\n\`\`\`\n\n`;
+
+      if (component.props.length > 0) {
+        markdown += `## Props\n\n`;
+        markdown += `| Prop | Type | Default | Description |\n`;
+        markdown += `|------|------|---------|-------------|\n`;
+        component.props.forEach((prop) => {
+          markdown += `| ${prop.name} | \`${prop.type}\` | ${prop.default || '-'} | ${prop.description} |\n`;
+        });
+        markdown += '\n';
+      }
+
+      if (component.examples.length > 0) {
+        markdown += `## Examples\n\n`;
+        component.examples.forEach((example) => {
+          markdown += `### ${example.title}\n\n`;
+          if (example.description) {
+            markdown += `${example.description}\n\n`;
+          }
+          markdown += `\`\`\`tsx\n${example.code}\n\`\`\`\n\n`;
+        });
+      }
+
+      if (component.relatedComponents && component.relatedComponents.length > 0) {
+        markdown += `## Related Components\n\n`;
+        markdown += component.relatedComponents.join(', ') + '\n';
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: markdown,
+          },
+        ],
+      };
+    }
+
+    case 'search_components': {
+      const query = args?.query as string;
+      const results = searchComponents(query);
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                query,
+                total: results.length,
+                components: results.map((c) => ({
+                  name: c.name,
+                  displayName: c.displayName,
+                  description: c.description,
+                  category: c.category,
+                  import: c.importPath,
+                })),
+              },
+              null,
+              2
+            ),
+          },
+        ],
+      };
+    }
+
+    case 'get_design_tokens': {
+      const category = (args?.category as string) || 'all';
+
+      if (category === 'all') {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: formatTokensAsMarkdown(),
+            },
+          ],
+        };
+      }
+
+      let markdown = '';
+      switch (category) {
+        case 'colors':
+          markdown = '# Color Tokens\n\n';
+          colorTokens.forEach((cat) => {
+            markdown += `## ${cat.name}\n${cat.description}\n\n`;
+            markdown += '| Token | Value | Description |\n|-------|-------|-------------|\n';
+            cat.tokens.forEach((t) => {
+              markdown += `| \`${t.name}\` | ${t.value} | ${t.description || ''} |\n`;
+            });
+            markdown += '\n';
+          });
+          break;
+        case 'spacing':
+          markdown = `# ${spacingTokens.name}\n\n${spacingTokens.description}\n\n`;
+          markdown += '| Token | Value | Description |\n|-------|-------|-------------|\n';
+          spacingTokens.tokens.forEach((t) => {
+            markdown += `| \`'${t.name}'\` | ${t.value} | ${t.description || ''} |\n`;
+          });
+          break;
+        case 'typography':
+          markdown = `# ${typographyTokens.name}\n\n${typographyTokens.description}\n\n`;
+          markdown += '| Token | Value | Description |\n|-------|-------|-------------|\n';
+          typographyTokens.tokens.forEach((t) => {
+            markdown += `| \`${t.name}\` | ${t.value} | ${t.description || ''} |\n`;
+          });
+          break;
+        case 'borderRadius':
+          markdown = `# ${borderRadiusTokens.name}\n\n${borderRadiusTokens.description}\n\n`;
+          markdown += '| Token | Value | Description |\n|-------|-------|-------------|\n';
+          borderRadiusTokens.tokens.forEach((t) => {
+            markdown += `| \`'${t.name}'\` | ${t.value} | ${t.description || ''} |\n`;
+          });
+          break;
+        case 'elevation':
+          markdown = `# ${elevationTokens.name}\n\n${elevationTokens.description}\n\n`;
+          markdown += '| Token | Value | Description |\n|-------|-------|-------------|\n';
+          elevationTokens.tokens.forEach((t) => {
+            markdown += `| \`'${t.name}'\` | ${t.value} | ${t.description || ''} |\n`;
+          });
+          break;
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: markdown,
+          },
+        ],
+      };
+    }
+
+    case 'search_tokens': {
+      const query = args?.query as string;
+      const results = searchTokens(query);
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(
+              {
+                query,
+                total: results.length,
+                tokens: results,
+              },
+              null,
+              2
+            ),
+          },
+        ],
+      };
+    }
+
+    case 'generate_component_code': {
+      const componentName = args?.component as string;
+      const variant = args?.variant as string | undefined;
+      const withState = args?.withState as boolean | undefined;
+      const customProps = args?.props as Record<string, unknown> | undefined;
+
+      const component = getComponentByName(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Component "${componentName}" not found.`,
+            },
+          ],
+        };
+      }
+
+      let code = '';
+      
+      // Add imports
+      code += `${component.importPath}\n`;
+      if (withState) {
+        code += `import { useState } from 'react';\n`;
+      }
+      code += '\n';
+
+      // Generate component usage
+      if (withState && component.examples[0]) {
+        code += `function Example() {\n`;
+        code += `  const [value, setValue] = useState('');\n\n`;
+        code += `  return (\n`;
+        code += `    <${component.name}`;
+        if (variant) code += `\n      variant="${variant}"`;
+        if (customProps) {
+          Object.entries(customProps).forEach(([key, val]) => {
+            code += `\n      ${key}={${JSON.stringify(val)}}`;
+          });
+        }
+        code += `\n      value={value}\n      onChange={setValue}\n    />\n`;
+        code += `  );\n`;
+        code += `}\n`;
+      } else if (component.examples[0]) {
+        code += component.examples[0].code;
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `## ${component.displayName} Code\n\n\`\`\`tsx\n${code}\n\`\`\``,
+          },
+        ],
+      };
+    }
+
+    case 'get_form_pattern': {
+      const fields = args?.fields as Array<{
+        name: string;
+        type: string;
+        label: string;
+        required?: boolean;
+      }>;
+      const includeValidation = args?.includeValidation as boolean;
+
+      let code = `import { VStack, Input, Select, Checkbox, Textarea, DatePicker, Button, FormControl } from '@urbint/cl';\n`;
+      code += `import { useState } from 'react';\n\n`;
+      code += `function Form() {\n`;
+
+      // Generate state
+      fields.forEach((field) => {
+        const defaultValue = field.type === 'checkbox' ? 'false' : "''";
+        code += `  const [${field.name}, set${capitalize(field.name)}] = useState(${defaultValue});\n`;
+      });
+
+      if (includeValidation) {
+        code += `  const [errors, setErrors] = useState({});\n`;
+      }
+      code += '\n';
+
+      if (includeValidation) {
+        code += `  const validate = () => {\n`;
+        code += `    const newErrors = {};\n`;
+        fields.forEach((field) => {
+          if (field.required) {
+            code += `    if (!${field.name}) newErrors.${field.name} = '${field.label} is required';\n`;
+          }
+        });
+        code += `    setErrors(newErrors);\n`;
+        code += `    return Object.keys(newErrors).length === 0;\n`;
+        code += `  };\n\n`;
+      }
+
+      code += `  const handleSubmit = () => {\n`;
+      if (includeValidation) {
+        code += `    if (!validate()) return;\n`;
+      }
+      code += `    // Submit form data\n`;
+      code += `    console.log({ ${fields.map((f) => f.name).join(', ')} });\n`;
+      code += `  };\n\n`;
+
+      code += `  return (\n`;
+      code += `    <VStack space="lg">\n`;
+
+      fields.forEach((field) => {
+        const errorProp = includeValidation
+          ? `\n          isInvalid={!!errors.${field.name}}\n          errorMessage={errors.${field.name}}`
+          : '';
+
+        switch (field.type) {
+          case 'text':
+          case 'email':
+          case 'password':
+            code += `      <Input\n`;
+            code += `        label="${field.label}"${field.required ? '\n        isRequired' : ''}\n`;
+            code += `        value={${field.name}}\n`;
+            code += `        onChange={set${capitalize(field.name)}}${errorProp}${field.type === 'password' ? '\n        isPassword' : ''}\n`;
+            code += `      />\n`;
+            break;
+          case 'select':
+            code += `      <Select\n`;
+            code += `        label="${field.label}"${field.required ? '\n        isRequired' : ''}\n`;
+            code += `        value={${field.name}}\n`;
+            code += `        onChange={set${capitalize(field.name)}}\n`;
+            code += `        options={[/* Add your options */]}${errorProp}\n`;
+            code += `      />\n`;
+            break;
+          case 'checkbox':
+            code += `      <Checkbox\n`;
+            code += `        label="${field.label}"\n`;
+            code += `        isChecked={${field.name}}\n`;
+            code += `        onChange={set${capitalize(field.name)}}\n`;
+            code += `      />\n`;
+            break;
+          case 'textarea':
+            code += `      <Textarea\n`;
+            code += `        label="${field.label}"${field.required ? '\n        isRequired' : ''}\n`;
+            code += `        value={${field.name}}\n`;
+            code += `        onChange={set${capitalize(field.name)}}${errorProp}\n`;
+            code += `      />\n`;
+            break;
+          case 'date':
+            code += `      <DatePicker\n`;
+            code += `        label="${field.label}"${field.required ? '\n        isRequired' : ''}\n`;
+            code += `        value={${field.name}}\n`;
+            code += `        onChange={set${capitalize(field.name)}}${errorProp}\n`;
+            code += `      />\n`;
+            break;
+        }
+      });
+
+      code += `      <Button onPress={handleSubmit}>Submit</Button>\n`;
+      code += `    </VStack>\n`;
+      code += `  );\n`;
+      code += `}\n`;
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `## Generated Form\n\n\`\`\`tsx\n${code}\n\`\`\``,
+          },
+        ],
+      };
+    }
+
+    case 'get_layout_pattern': {
+      const pattern = args?.pattern as string;
+      let code = '';
+
+      switch (pattern) {
+        case 'card-grid':
+          code = `import { Grid, GridItem, Card, CardBody, Heading, Text } from '@urbint/cl';
+
+function CardGrid({ items }) {
+  return (
+    <Grid columns={3} gap="lg">
+      {items.map((item) => (
+        <GridItem key={item.id}>
+          <Card variant="elevated">
+            <CardBody>
+              <Heading as="h3">{item.title}</Heading>
+              <Text variant="caption" color="text.secondary">
+                {item.description}
+              </Text>
+            </CardBody>
+          </Card>
+        </GridItem>
+      ))}
+    </Grid>
+  );
+}`;
+          break;
+
+        case 'sidebar-layout':
+          code = `import { HStack, VStack, Box, Text, Link, Divider } from '@urbint/cl';
+
+function SidebarLayout({ children }) {
+  return (
+    <HStack style={{ minHeight: '100vh' }}>
+      {/* Sidebar */}
+      <Box w={240} bg="background.secondary" py="lg">
+        <VStack space="xs" px="md">
+          <Text weight="semiBold" variant="label">Navigation</Text>
+          <Divider />
+          <Link href="/dashboard">Dashboard</Link>
+          <Link href="/settings">Settings</Link>
+          <Link href="/profile">Profile</Link>
+        </VStack>
+      </Box>
+      
+      {/* Main Content */}
+      <Box flex={1} p="xl">
+        {children}
+      </Box>
+    </HStack>
+  );
+}`;
+          break;
+
+        case 'header-content':
+          code = `import { VStack, HStack, Box, Heading, Text, Button, Avatar } from '@urbint/cl';
+
+function PageLayout({ title, subtitle, children }) {
+  return (
+    <VStack space="none" style={{ minHeight: '100vh' }}>
+      {/* Header */}
+      <Box bg="brand.navy" px="xl" py="md">
+        <HStack justifyContent="space-between">
+          <Heading as="h1" color="text.inverse">{title}</Heading>
+          <HStack space="md">
+            <Button variant="ghost">Help</Button>
+            <Avatar name="User" size="sm" />
+          </HStack>
+        </HStack>
+      </Box>
+      
+      {/* Content */}
+      <Box flex={1} p="xl" bg="background.secondary">
+        {subtitle && (
+          <Text variant="caption" color="text.secondary" style={{ marginBottom: 16 }}>
+            {subtitle}
+          </Text>
+        )}
+        {children}
+      </Box>
+    </VStack>
+  );
+}`;
+          break;
+
+        case 'list-detail':
+          code = `import { HStack, VStack, Box, Card, CardBody, Text, Pressable, Heading } from '@urbint/cl';
+import { useState } from 'react';
+
+function ListDetailLayout({ items }) {
+  const [selected, setSelected] = useState(items[0]);
+
+  return (
+    <HStack space="lg" alignItems="flex-start">
+      {/* List */}
+      <VStack space="sm" w={300}>
+        {items.map((item) => (
+          <Pressable key={item.id} onPress={() => setSelected(item)}>
+            <Card variant={selected?.id === item.id ? 'elevated' : 'outline'}>
+              <CardBody>
+                <Text weight="semiBold">{item.title}</Text>
+                <Text variant="caption" numberOfLines={2}>
+                  {item.preview}
+                </Text>
+              </CardBody>
+            </Card>
+          </Pressable>
+        ))}
+      </VStack>
+      
+      {/* Detail */}
+      <Card flex={1} variant="elevated">
+        <CardBody>
+          <Heading as="h2">{selected?.title}</Heading>
+          <Text>{selected?.content}</Text>
+        </CardBody>
+      </Card>
+    </HStack>
+  );
+}`;
+          break;
+
+        case 'dashboard':
+          code = `import { VStack, HStack, Grid, GridItem, Card, CardHeader, CardBody, Heading, Text, Progress, Badge } from '@urbint/cl';
+
+function Dashboard() {
+  return (
+    <VStack space="xl" p="xl">
+      {/* Stats Row */}
+      <Grid columns={4} gap="lg">
+        <GridItem>
+          <Card variant="elevated">
+            <CardBody>
+              <Text variant="caption" color="text.secondary">Total Users</Text>
+              <Heading as="h2">1,234</Heading>
+              <Badge variant="green">+12%</Badge>
+            </CardBody>
+          </Card>
+        </GridItem>
+        <GridItem>
+          <Card variant="elevated">
+            <CardBody>
+              <Text variant="caption" color="text.secondary">Revenue</Text>
+              <Heading as="h2">$45,678</Heading>
+              <Badge variant="green">+8%</Badge>
+            </CardBody>
+          </Card>
+        </GridItem>
+        <GridItem>
+          <Card variant="elevated">
+            <CardBody>
+              <Text variant="caption" color="text.secondary">Active Projects</Text>
+              <Heading as="h2">23</Heading>
+            </CardBody>
+          </Card>
+        </GridItem>
+        <GridItem>
+          <Card variant="elevated">
+            <CardBody>
+              <Text variant="caption" color="text.secondary">Completion</Text>
+              <Heading as="h2">78%</Heading>
+              <Progress value={78} size="sm" />
+            </CardBody>
+          </Card>
+        </GridItem>
+      </Grid>
+      
+      {/* Main Content */}
+      <HStack space="lg" alignItems="flex-start">
+        <Card flex={2} variant="elevated">
+          <CardHeader>
+            <Heading as="h3">Recent Activity</Heading>
+          </CardHeader>
+          <CardBody>
+            {/* Activity content */}
+          </CardBody>
+        </Card>
+        <Card flex={1} variant="elevated">
+          <CardHeader>
+            <Heading as="h3">Quick Actions</Heading>
+          </CardHeader>
+          <CardBody>
+            {/* Actions content */}
+          </CardBody>
+        </Card>
+      </HStack>
+    </VStack>
+  );
+}`;
+          break;
+
+        case 'form-layout':
+          code = `import { VStack, HStack, Card, CardHeader, CardBody, CardFooter, Heading, Input, Select, Button, Divider } from '@urbint/cl';
+
+function FormLayout({ title, onSubmit, onCancel }) {
+  return (
+    <Card variant="elevated" maxW={600}>
+      <CardHeader>
+        <Heading as="h2">{title}</Heading>
+      </CardHeader>
+      <CardBody>
+        <VStack space="lg">
+          <HStack space="md">
+            <Input label="First Name" flex={1} />
+            <Input label="Last Name" flex={1} />
+          </HStack>
+          <Input label="Email" placeholder="email@example.com" />
+          <Select
+            label="Role"
+            options={[
+              { value: 'admin', label: 'Administrator' },
+              { value: 'user', label: 'User' },
+              { value: 'viewer', label: 'Viewer' },
+            ]}
+          />
+          <Divider />
+          <Input label="Notes" placeholder="Additional notes..." />
+        </VStack>
+      </CardBody>
+      <CardFooter>
+        <HStack space="md" justifyContent="flex-end">
+          <Button variant="ghost" onPress={onCancel}>Cancel</Button>
+          <Button variant="primary" onPress={onSubmit}>Save</Button>
+        </HStack>
+      </CardFooter>
+    </Card>
+  );
+}`;
+          break;
+
+        default:
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `Unknown pattern: ${pattern}. Available patterns: card-grid, sidebar-layout, header-content, list-detail, dashboard, form-layout`,
+              },
+            ],
+          };
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `## ${pattern} Pattern\n\n\`\`\`tsx\n${code}\n\`\`\``,
+          },
+        ],
+      };
+    }
+
+    default:
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `Unknown tool: ${name}`,
+          },
+        ],
+      };
+  }
+});
+
+// ============================================================================
+// RESOURCES
+// ============================================================================
+
+server.setRequestHandler(ListResourcesRequestSchema, async () => {
+  return {
+    resources: [
+      {
+        uri: 'urbint://docs/overview',
+        name: 'Overview',
+        description: 'Urbint Component Library overview and getting started guide',
+        mimeType: 'text/markdown',
+      },
+      {
+        uri: 'urbint://docs/components',
+        name: 'Components',
+        description: 'Complete list of all available components',
+        mimeType: 'text/markdown',
+      },
+      {
+        uri: 'urbint://docs/tokens',
+        name: 'Design Tokens',
+        description: 'All design tokens (colors, spacing, typography, etc.)',
+        mimeType: 'text/markdown',
+      },
+      {
+        uri: 'urbint://docs/installation',
+        name: 'Installation',
+        description: 'Installation and setup instructions',
+        mimeType: 'text/markdown',
+      },
+      ...componentRegistry.map((c) => ({
+        uri: `urbint://component/${c.name.toLowerCase()}`,
+        name: c.displayName,
+        description: c.description,
+        mimeType: 'text/markdown',
+      })),
+    ],
+  };
+});
+
+server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+  const { uri } = request.params;
+
+  if (uri === 'urbint://docs/overview') {
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: 'text/markdown',
+          text: `# Urbint Component Library
+
+> Enterprise-ready React Native component library built with Unistyles 3.0
+
+## Overview
+
+Urbint Component Library (\`@urbint/cl\`) provides 40+ production-ready components for B2B SAAS applications across iOS, Android, and Web platforms.
+
+## Key Features
+
+- **Cross-platform**: iOS, Android, Web
+- **Full TypeScript support**
+- **Light and Dark themes**
+- **Accessible** (WCAG 2.1 compliant)
+- **Built with Unistyles 3.0**
+
+## Tech Stack
+
+- React Native 0.81+
+- Unistyles 3.0+
+- TypeScript 5.0+
+- Expo SDK 54+
+
+## Quick Start
+
+\`\`\`bash
+npm install @urbint/cl react-native-unistyles
+\`\`\`
+
+\`\`\`tsx
+import '@urbint/cl/styles';
+import { Box, Text, Button } from '@urbint/cl';
+
+export default function App() {
+  return (
+    <Box p="lg">
+      <Text>Hello World</Text>
+      <Button variant="primary">Click Me</Button>
+    </Box>
+  );
+}
+\`\`\`
+
+## Component Categories
+
+- **Layout**: Box, HStack, VStack, Center, Grid, Divider
+- **Typography**: Text, Heading, Link
+- **Form**: Button, Input, Select, DatePicker, Checkbox, Radio, Switch, Textarea, Slider, FormControl
+- **Feedback**: Alert, Toast, Progress, Spinner, Skeleton
+- **Data Display**: Avatar, Badge, Card, Table, Icon
+- **Overlay**: Modal, Drawer, AlertDialog, Popover, Tooltip, Menu, ActionSheet
+- **Action**: Pressable, Fab, Accordion
+- **Utility**: Portal
+`,
+        },
+      ],
+    };
+  }
+
+  if (uri === 'urbint://docs/components') {
+    let markdown = '# All Components\n\n';
+    
+    const categories = getAllCategories();
+    categories.forEach((category) => {
+      const components = getComponentsByCategory(category);
+      markdown += `## ${capitalize(category)}\n\n`;
+      components.forEach((c) => {
+        markdown += `### ${c.displayName}\n`;
+        markdown += `${c.description}\n\n`;
+        markdown += `\`\`\`tsx\n${c.importPath}\n\`\`\`\n\n`;
+      });
+    });
+
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: 'text/markdown',
+          text: markdown,
+        },
+      ],
+    };
+  }
+
+  if (uri === 'urbint://docs/tokens') {
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: 'text/markdown',
+          text: formatTokensAsMarkdown(),
+        },
+      ],
+    };
+  }
+
+  if (uri === 'urbint://docs/installation') {
+    return {
+      contents: [
+        {
+          uri,
+          mimeType: 'text/markdown',
+          text: `# Installation
+
+## Package Installation
+
+\`\`\`bash
+# npm
+npm install @urbint/cl react-native-unistyles
+
+# yarn
+yarn add @urbint/cl react-native-unistyles
+
+# Local development
+npm link ../path-to-urbint-cl
+\`\`\`
+
+## Babel Configuration
+
+Add the Unistyles Babel plugin to \`babel.config.js\`:
+
+\`\`\`javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      ['react-native-unistyles/plugin', { root: 'src' }],
+    ],
+  };
+};
+\`\`\`
+
+## App Setup
+
+Import styles in your app entry point before any components:
+
+\`\`\`tsx
+// App.tsx
+import '@urbint/cl/styles';
+import { Box, Text, Button } from '@urbint/cl';
+
+export default function App() {
+  return (
+    <Box p="lg">
+      <Text>Hello World</Text>
+      <Button variant="primary">Click Me</Button>
+    </Box>
+  );
+}
+\`\`\`
+
+## Troubleshooting
+
+### Metro bundler issues
+\`\`\`bash
+npx expo start --clear
+\`\`\`
+
+### Unistyles not working
+1. Ensure Babel plugin is configured
+2. Restart Metro bundler
+3. Check import order (styles before components)
+`,
+        },
+      ],
+    };
+  }
+
+  // Handle component-specific resources
+  const componentMatch = uri.match(/^urbint:\/\/component\/(.+)$/);
+  if (componentMatch) {
+    const componentName = componentMatch[1];
+    const component = getComponentByName(componentName);
+
+    if (component) {
+      let markdown = `# ${component.displayName}\n\n`;
+      markdown += `${component.description}\n\n`;
+      markdown += `**Category:** ${component.category}\n`;
+      markdown += `**Tags:** ${component.tags.join(', ')}\n\n`;
+      markdown += `## Import\n\n\`\`\`tsx\n${component.importPath}\n\`\`\`\n\n`;
+
+      if (component.props.length > 0) {
+        markdown += `## Props\n\n`;
+        markdown += `| Prop | Type | Default | Description |\n`;
+        markdown += `|------|------|---------|-------------|\n`;
+        component.props.forEach((prop) => {
+          markdown += `| ${prop.name} | \`${prop.type}\` | ${prop.default || '-'} | ${prop.description} |\n`;
+        });
+        markdown += '\n';
+      }
+
+      if (component.examples.length > 0) {
+        markdown += `## Examples\n\n`;
+        component.examples.forEach((example) => {
+          markdown += `### ${example.title}\n\n`;
+          markdown += `\`\`\`tsx\n${example.code}\n\`\`\`\n\n`;
+        });
+      }
+
+      return {
+        contents: [
+          {
+            uri,
+            mimeType: 'text/markdown',
+            text: markdown,
+          },
+        ],
+      };
+    }
+  }
+
+  return {
+    contents: [
+      {
+        uri,
+        mimeType: 'text/plain',
+        text: `Resource not found: ${uri}`,
+      },
+    ],
+  };
+});
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+// ============================================================================
+// START SERVER
+// ============================================================================
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error('Urbint CL MCP Server running on stdio');
+}
+
+main().catch(console.error);
+