@metacells/mcellui-mcp-server 0.1.3 → 0.1.4

package/dist/index.js

@@ -121,7 +121,21 @@ var tools = [
   },
   {
     name: "nativeui_get_component",
-    description: "Get the full source code for a specific component",
+    description: "Get concise documentation for a component: description, props, examples, and installation. Use this first to understand a component.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: 'Component name (e.g., "button", "card", "input")'
+        }
+      },
+      required: ["name"]
+    }
+  },
+  {
+    name: "nativeui_get_component_source",
+    description: "Get the full source code for a component. Only use this when you need to see the complete implementation details.",
     inputSchema: {
       type: "object",
       properties: {
@@ -368,32 +382,46 @@ Available: ${registry.components.map((c) => c.name).join(", ")}`
           content: [
             {
               type: "text",
-              text: `Error: Could not load source code for "${componentName}".`
+              text: `Error: Could not load documentation for "${componentName}".`
             }
           ]
         };
       }
-      const output = `# ${component.name}
-
-${component.description}
-
-**Category:** ${component.category}
-**Status:** ${component.status}
-${component.dependencies?.length ? `**Dependencies:** ${component.dependencies.join(", ")}` : ""}
+      const docs = parseComponentDocs(code);
+      const output = formatComponentDocs(component, docs);
+      return { content: [{ type: "text", text: output }] };
+    }
+    case "nativeui_get_component_source": {
+      const componentName = args?.name;
+      const component = registry.components.find((c) => c.name === componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found.
 
-## Source Code
+Available: ${registry.components.map((c) => c.name).join(", ")}`
+            }
+          ]
+        };
+      }
+      const code = await loadComponentCode(component);
+      if (!code) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Could not load source code for "${componentName}".`
+            }
+          ]
+        };
+      }
+      const output = `# ${toPascalCase(component.name)} - Source Code
 
 \`\`\`tsx
 ${code}
 \`\`\`
-
-## Usage
-
-\`\`\`tsx
-import { ${toPascalCase(component.name)} } from '@/components/ui/${component.name}';
-
-<${toPascalCase(component.name)} />
-\`\`\`
 `;
       return { content: [{ type: "text", text: output }] };
     }
@@ -415,7 +443,7 @@ import { ${toPascalCase(component.name)} } from '@/components/ui/${component.nam
 Run this command:
 
 \`\`\`bash
-npx nativeui add ${component.name}
+npx @metacells/mcellui-cli add ${component.name}
 \`\`\`
 `;
       if (component.dependencies?.length) {
@@ -434,7 +462,7 @@ npx expo install ${component.dependencies.join(" ")}
 This component depends on: ${component.registryDependencies.join(", ")}
 
 \`\`\`bash
-npx nativeui add ${component.registryDependencies.join(" ")}
+npx @metacells/mcellui-cli add ${component.registryDependencies.join(" ")}
 \`\`\`
 `;
       }
@@ -510,7 +538,7 @@ Based on: "${description}"
 **Add all suggested components:**
 
 \`\`\`bash
-npx nativeui add ${componentNames}
+npx @metacells/mcellui-cli add ${componentNames}
 \`\`\``;
       return { content: [{ type: "text", text: output }] };
     }
@@ -527,7 +555,7 @@ npx nativeui add ${componentNames}
 The easiest way to create a new component:
 
 \`\`\`bash
-npx nativeui create ${kebabName} --template ${template}${withForwardRef ? " --forward-ref" : ""}
+npx @metacells/mcellui-cli create ${kebabName} --template ${template}${withForwardRef ? " --forward-ref" : ""}
 \`\`\`
 
 This creates \`components/ui/${kebabName}.tsx\` with the ${template} template.
@@ -779,7 +807,7 @@ Checking project at: \`${projectPath}\`
 Run the CLI doctor command for a full diagnostic:
 
 \`\`\`bash
-npx nativeui doctor
+npx @metacells/mcellui-cli doctor
 \`\`\`
 
 ## Common Issues & Fixes
@@ -787,7 +815,7 @@ npx nativeui doctor
 ### 1. "Project not initialized"
 
 \`\`\`bash
-npx nativeui init
+npx @metacells/mcellui-cli init
 \`\`\`
 
 ### 2. Missing dependencies
@@ -900,6 +928,120 @@ Found ${results.length} component(s):
       };
   }
 }
+function parseComponentDocs(code) {
+  const result = {
+    description: "",
+    example: "",
+    props: [],
+    exports: []
+  };
+  const docblockMatch = code.match(/\/\*\*\s*\n([\s\S]*?)\*\//);
+  if (docblockMatch) {
+    const docblock = docblockMatch[1];
+    const descLines = [];
+    const lines = docblock.split("\n");
+    for (const line of lines) {
+      const cleaned = line.replace(/^\s*\*\s?/, "").trim();
+      if (cleaned.startsWith("@example")) break;
+      if (cleaned) descLines.push(cleaned);
+    }
+    result.description = descLines.join(" ").trim();
+    const exampleMatch = docblock.match(/@example\s*\n\s*\*\s*```tsx?\s*\n([\s\S]*?)```/);
+    if (exampleMatch) {
+      result.example = exampleMatch[1].split("\n").map((line) => line.replace(/^\s*\*\s?/, "")).join("\n").trim();
+    }
+  }
+  const propsInterfaces = code.matchAll(/export\s+(?:interface|type)\s+(\w+Props)\s*(?:=\s*)?{([^}]+)}/g);
+  for (const match of propsInterfaces) {
+    const interfaceName = match[1];
+    const propsBody = match[2];
+    const propPattern = /(?:\/\*\*\s*(.*?)\s*\*\/\s*)?([\w]+)(\?)?:\s*([^;]+);/g;
+    let propMatch;
+    while ((propMatch = propPattern.exec(propsBody)) !== null) {
+      const [, docComment, propName, optional, propType] = propMatch;
+      result.props.push({
+        name: propName,
+        type: propType.trim(),
+        required: !optional,
+        description: docComment?.replace(/\s+/g, " ").trim() || ""
+      });
+    }
+  }
+  const exportMatches = code.matchAll(/export\s+(?:function|const)\s+(\w+)/g);
+  for (const match of exportMatches) {
+    result.exports.push(match[1]);
+  }
+  const typeExports = code.matchAll(/export\s+(?:type|interface)\s+(\w+)/g);
+  for (const match of typeExports) {
+    result.exports.push(match[1]);
+  }
+  return result;
+}
+function formatComponentDocs(component, docs) {
+  const pascalName = toPascalCase(component.name);
+  let output = `# ${pascalName}
+
+`;
+  output += `${docs.description || component.description}
+
+`;
+  output += `**Category:** ${component.category} \xB7 **Status:** ${component.status}
+
+`;
+  output += `## Installation
+
+`;
+  output += `\`\`\`bash
+npx @metacells/mcellui-cli add ${component.name}
+\`\`\`
+
+`;
+  if (component.dependencies?.length) {
+    output += `**Peer Dependencies:** ${component.dependencies.join(", ")}
+
+`;
+  }
+  if (component.registryDependencies?.length) {
+    output += `**Required Components:** ${component.registryDependencies.join(", ")}
+
+`;
+  }
+  if (docs.example) {
+    output += `## Example
+
+`;
+    output += `\`\`\`tsx
+${docs.example}
+\`\`\`
+
+`;
+  }
+  if (docs.props.length > 0) {
+    output += `## Props
+
+`;
+    output += `| Prop | Type | Required | Description |
+`;
+    output += `|------|------|----------|-------------|
+`;
+    for (const prop of docs.props) {
+      const typeStr = prop.type.length > 40 ? prop.type.slice(0, 37) + "..." : prop.type;
+      output += `| \`${prop.name}\` | \`${typeStr}\` | ${prop.required ? "\u2713" : ""} | ${prop.description} |
+`;
+    }
+    output += "\n";
+  }
+  if (docs.exports.length > 0) {
+    output += `## Exports
+
+`;
+    output += `\`\`\`tsx
+import { ${docs.exports.join(", ")} } from '@/components/ui/${component.name}';
+\`\`\`
+`;
+  }
+  return output;
+}
 function toPascalCase(str) {
   return str.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^(.)/, (c) => c.toUpperCase());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metacells/mcellui-mcp-server",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "MCP server for mcellui - AI assistant integration for React Native development",
   "author": "metacells",
   "license": "MIT",

package/registry/ui/avatar.tsx

@@ -42,7 +42,7 @@ export function Avatar({
   size = 'md',
   style,
 }: AvatarProps) {
-  const { colors, components, platformShadow } = useTheme();
+  const { colors, components, componentRadius, platformShadow } = useTheme();
   const tokens = components.avatar[size];
   const [imageError, setImageError] = useState(false);
   const showFallback = !source || imageError;
@@ -54,7 +54,7 @@ export function Avatar({
         {
           width: tokens.size,
           height: tokens.size,
-          borderRadius: tokens.borderRadius,
+          borderRadius: componentRadius.avatar,
           backgroundColor: colors.backgroundMuted,
         },
         platformShadow('sm'),
@@ -68,7 +68,7 @@ export function Avatar({
           style={[
             styles.fallback,
             {
-              borderRadius: tokens.borderRadius,
+              borderRadius: componentRadius.avatar,
               backgroundColor: colors.primary,
             },
           ]}
@@ -89,7 +89,7 @@ export function Avatar({
       ) : (
         <Image
           source={source}
-          style={[styles.image, { borderRadius: tokens.borderRadius }]}
+          style={[styles.image, { borderRadius: componentRadius.avatar }]}
           onError={() => setImageError(true)}
         />
       )}

package/registry/ui/badge.tsx

@@ -40,7 +40,7 @@ export function Badge({
   style,
   textStyle,
 }: BadgeProps) {
-  const { colors, components, platformShadow } = useTheme();
+  const { colors, components, componentRadius, platformShadow } = useTheme();
   const tokens = components.badge[size];
   const variantStyles = getVariantStyles(variant, colors);
 
@@ -54,7 +54,7 @@ export function Badge({
         {
           paddingHorizontal: tokens.paddingHorizontal,
           paddingVertical: tokens.paddingVertical,
-          borderRadius: tokens.borderRadius,
+          borderRadius: componentRadius.badge,
         },
         variantStyles.container,
         shadowStyle,

package/registry/ui/button.tsx

@@ -77,11 +77,16 @@ export const Button = forwardRef(function Button(
   }: ButtonProps,
   ref: React.ForwardedRef<View>
 ) {
-  const { colors, components, platformShadow, springs } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs } = useTheme();
   const tokens = components.button[size];
   const isDisabled = disabled || loading;
   const scale = useSharedValue(1);
 
+  // Get size-specific border radius from dynamic componentRadius
+  const borderRadius = size === 'sm' ? componentRadius.buttonSm
+    : size === 'lg' ? componentRadius.buttonLg
+    : componentRadius.button;
+
   const handlePressIn = useCallback(
     (e: any) => {
       scale.value = withSpring(BUTTON_CONSTANTS.pressScale, springs.snappy);
@@ -128,7 +133,7 @@ export const Button = forwardRef(function Button(
           minHeight: tokens.height,
           paddingHorizontal: tokens.paddingHorizontal,
           paddingVertical: tokens.paddingVertical,
-          borderRadius: tokens.borderRadius,
+          borderRadius,
           gap: tokens.gap,
         },
         variantStyles.container,

package/registry/ui/card.tsx

@@ -63,7 +63,7 @@ export interface CardProps {
 }
 
 export function Card({ children, onPress, disabled, style }: CardProps) {
-  const { colors, components, platformShadow, springs } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs } = useTheme();
   const tokens = components.card;
   const scale = useSharedValue(1);
   const isInteractive = !!onPress && !disabled;
@@ -97,7 +97,7 @@ export function Card({ children, onPress, disabled, style }: CardProps) {
   const cardStyle = [
     styles.card,
     {
-      borderRadius: tokens.borderRadius,
+      borderRadius: componentRadius.card,
       borderWidth: tokens.borderWidth,
       backgroundColor: colors.card,
       borderColor: colors.border,
@@ -151,10 +151,10 @@ export function CardImage({
   overlay = false,
   style,
 }: CardImageProps) {
-  const { colors, components } = useTheme();
+  const { colors, components, componentRadius } = useTheme();
   const tokens = components.card;
   // Calculate inner border radius (outer - border width)
-  const innerRadius = tokens.borderRadius - tokens.borderWidth;
+  const innerRadius = componentRadius.card - tokens.borderWidth;
 
   return (
     <View style={[styles.imageContainer, { borderTopLeftRadius: innerRadius, borderTopRightRadius: innerRadius }]}>
@@ -341,7 +341,7 @@ export function ImageCard({
   textPosition = 'bottom',
   style,
 }: ImageCardProps) {
-  const { colors, components, platformShadow, springs, spacing } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs, spacing } = useTheme();
   const tokens = components.card;
   const scale = useSharedValue(1);
   const isInteractive = !!onPress;
@@ -415,7 +415,7 @@ export function ImageCard({
 
   const cardStyle = [
     styles.imageCard,
-    { borderRadius: tokens.borderRadius + 4 },
+    { borderRadius: componentRadius.card + 4 },
     platformShadow('md'),
     style,
   ];
@@ -471,7 +471,7 @@ export function MediaCard({
   onPress,
   style,
 }: MediaCardProps) {
-  const { colors, components, platformShadow, springs, spacing } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs, spacing } = useTheme();
   const tokens = components.card;
   const scale = useSharedValue(1);
   const isInteractive = !!onPress;
@@ -505,7 +505,7 @@ export function MediaCard({
   const content = (
     <>
       {/* Image container */}
-      <View style={[styles.mediaCardImageContainer, { borderRadius: tokens.borderRadius }, platformShadow('sm')]}>
+      <View style={[styles.mediaCardImageContainer, { borderRadius: componentRadius.card }, platformShadow('sm')]}>
         <Image
           source={source}
           style={[

package/registry/ui/checkbox.tsx

@@ -70,7 +70,7 @@ export function Checkbox({
   size = 'md',
   style,
 }: CheckboxProps) {
-  const { colors, components, platformShadow, springs } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs } = useTheme();
   const tokens = components.checkbox[size];
   const progress = useSharedValue(checked || indeterminate ? 1 : 0);
   const scale = useSharedValue(1);
@@ -170,7 +170,7 @@ export function Checkbox({
           {
             width: tokens.size,
             height: tokens.size,
-            borderRadius: tokens.borderRadius,
+            borderRadius: componentRadius.checkbox,
             borderWidth: tokens.borderWidth,
           },
           boxAnimatedStyle,

package/registry/ui/input.tsx

@@ -75,7 +75,7 @@ export const Input = forwardRef<TextInput, InputProps>(
     },
     ref
   ) => {
-    const { colors, components, timing, spacing } = useTheme();
+    const { colors, components, componentRadius, timing, spacing } = useTheme();
     const tokens = components.input[size];
     const focusProgress = useSharedValue(0);
 
@@ -157,7 +157,7 @@ export const Input = forwardRef<TextInput, InputProps>(
                 minHeight: tokens.height,
                 paddingHorizontal: tokens.paddingHorizontal,
                 paddingVertical: tokens.paddingVertical,
-                borderRadius: tokens.borderRadius,
+                borderRadius: componentRadius.input,
                 fontSize: tokens.fontSize,
                 backgroundColor: isDisabled ? colors.backgroundMuted : colors.background,
                 color: isDisabled ? colors.foregroundMuted : colors.foreground,

package/registry/ui/switch.tsx

@@ -65,7 +65,7 @@ export function Switch({
   size = 'md',
   style,
 }: SwitchProps) {
-  const { colors, components, platformShadow, springs } = useTheme();
+  const { colors, components, componentRadius, platformShadow, springs } = useTheme();
   const tokens = components.switch[size];
   const progress = useSharedValue(checked ? 1 : 0);
   const scale = useSharedValue(1);
@@ -193,7 +193,7 @@ export function Switch({
           {
             width: tokens.trackWidth,
             height: tokens.trackHeight,
-            borderRadius: tokens.borderRadius,
+            borderRadius: componentRadius.switch,
             paddingHorizontal: tokens.thumbOffset,
           },
           trackAnimatedStyle,
@@ -206,7 +206,7 @@ export function Switch({
             {
               width: tokens.thumbSize,
               height: tokens.thumbSize,
-              borderRadius: tokens.borderRadius,
+              borderRadius: componentRadius.switch,
               backgroundColor: colors.background,
             },
             platformShadow('sm'),