@hanzo/ui 4.9.0 → 5.0.1

package/src/mcp/index.ts

@@ -0,0 +1,518 @@
+import { registrySchema, Registry, RegistryItem } from "../registry"
+import { fetchRegistry, getRegistryItem, getRegistryItemUrl } from "../registry/api"
+import { Server } from "@modelcontextprotocol/sdk/server/index.js"
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js"
+import { z } from "zod"
+import { zodToJsonSchema } from "zod-to-json-schema"
+
+// Get package version
+let packageVersion = "4.5.0"
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const packageJson = require("../../package.json")
+  packageVersion = packageJson.version || packageVersion
+} catch (error) {
+  console.error("Could not load package.json for version", error)
+}
+
+/**
+ * MCP Server implementation for @hanzo/ui registry
+ * Provides tools for interacting with the registry
+ */
+export const server = new Server(
+  {
+    name: "hanzo-ui",
+    version: packageVersion,
+  },
+  {
+    capabilities: {
+      resources: {},
+      tools: {},
+    },
+  }
+)
+
+// Register the available tools
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: "init",
+        description:
+          "Initialize a new project using @hanzo/ui components and styles.",
+        inputSchema: zodToJsonSchema(z.object({
+          style: z.string().optional().describe("The style to use for the project (e.g., 'default' or 'new-york')"),
+        })),
+      },
+      {
+        name: "list_components",
+        description: "List all available components in the registry",
+        inputSchema: zodToJsonSchema(z.object({
+          type: z.string().optional().describe("Filter components by type (e.g., 'ui', 'block')"),
+          category: z.string().optional().describe("Filter components by category"),
+        })),
+      },
+      {
+        name: "get_component",
+        description: "Get detailed information about a specific component",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            name: z
+              .string()
+              .describe("The name of the component to get from the registry"),
+          })
+        ),
+      },
+      {
+        name: "add_component",
+        description: "Get instructions for adding a component to a project",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            name: z
+              .string()
+              .describe("The name of the component to add"),
+            style: z
+              .string()
+              .optional()
+              .describe("The style to use (default, new-york, etc.)"),
+          })
+        ),
+      },
+      {
+        name: "list_styles",
+        description: "List all available styles in the registry",
+        inputSchema: zodToJsonSchema(z.object({})),
+      },
+      {
+        name: "search_registry",
+        description: "Search the registry for components matching criteria",
+        inputSchema: zodToJsonSchema(
+          z.object({
+            query: z
+              .string()
+              .describe("Search term to look for in component names and descriptions"),
+          })
+        ),
+      },
+    ],
+  }
+})
+
+// Handle tool calls
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  try {
+    // Ensure we have arguments
+    const args = request.params.arguments || {}
+
+    // Get registry URL from environment variable or use default
+    const REGISTRY_URL = process.env.REGISTRY_URL || "https://ui.hanzo.ai/registry/registry.json"
+    const registry = await getRegistry(REGISTRY_URL)
+
+    switch (request.params.name) {
+      case "init": {
+        const style = args.style || "default"
+        
+        let text = `# Initialize a new project with @hanzo/ui
+
+To create a new project with @hanzo/ui components, follow these steps:
+
+1. Create a new project first:
+\`\`\`bash
+# Using npm
+npm create next-app@latest my-app
+
+# Or using yarn
+yarn create next-app my-app
+
+# Or using pnpm
+pnpm create next-app my-app
+\`\`\`
+
+2. Navigate to your project directory:
+\`\`\`bash
+cd my-app
+\`\`\`
+
+3. Install @hanzo/ui and initialize it:
+\`\`\`bash
+npx @hanzo/ui@latest init${style ? ` --style=${style}` : ""}
+\`\`\`
+
+This will:
+- Install all necessary dependencies
+- Set up the project structure for @hanzo/ui
+- Configure tailwind.css with the appropriate theme
+- Add component configuration
+`
+
+        // Check if the registry has any additional setup instructions
+        const setupConfig = registry.items.find(
+          (item) => item.type === "registry:config" && item.name === "setup"
+        )
+
+        if (setupConfig) {
+          text += `
+## Additional Setup
+
+${setupConfig.description || "Follow any additional setup instructions provided during initialization."}
+`
+        }
+
+        return {
+          content: [
+            { type: "text", text }
+          ],
+        }
+      }
+      
+      case "list_components": {
+        // Filter components based on type and category if provided
+        const typeFilter = args.type ? `ui:${args.type}` : null
+        const categoryFilter = args.category || null
+        
+        let components = registry.items.filter(item => {
+          // Filter by type if specified
+          if (typeFilter && !item.type.includes(typeFilter)) {
+            return false
+          }
+          
+          // Filter by category if specified
+          if (categoryFilter && item.category !== categoryFilter) {
+            return false
+          }
+          
+          return true
+        })
+
+        // Group components by category if they have categories
+        const hasCategories = components.some(item => item.category)
+        let responseText = "# Available Components\n\n"
+        
+        if (hasCategories) {
+          // Group by category
+          const categorized = components.reduce((acc, item) => {
+            const category = item.category || "Uncategorized"
+            if (!acc[category]) {
+              acc[category] = []
+            }
+            acc[category].push(item)
+            return acc
+          }, {} as Record<string, RegistryItem[]>)
+          
+          // Build response
+          for (const [category, items] of Object.entries(categorized)) {
+            responseText += `## ${category}\n\n`
+            
+            items.forEach(item => {
+              responseText += `- **${item.name}** - ${item.description || 'No description available'}\n`
+            })
+            
+            responseText += "\n"
+          }
+        } else {
+          // Simple list
+          components.forEach(item => {
+            responseText += `- **${item.name}** (${item.type}) - ${item.description || 'No description available'}\n`
+          })
+        }
+        
+        responseText += "\nTo get detailed information about a specific component, use the `get_component` tool.\n"
+        responseText += "To add a component to your project, use the `add_component` tool.\n"
+        
+        return {
+          content: [{ type: "text", text: responseText }],
+        }
+      }
+
+      case "get_component": {
+        const name = z.string().parse(args.name)
+
+        if (!name) {
+          throw new Error("Component name is required")
+        }
+
+        const itemUrl = getRegistryItemUrl(name, REGISTRY_URL)
+        const component = await getRegistryItem(itemUrl, "")
+
+        if (!component) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Component '${name}' not found in the registry.`,
+              },
+            ],
+          }
+        }
+
+        // Build a markdown description of the component
+        let componentDetails = `# ${component.name}\n\n`
+        
+        if (component.description) {
+          componentDetails += `${component.description}\n\n`
+        }
+        
+        componentDetails += `**Type:** ${component.type}\n`
+        
+        if (component.category) {
+          componentDetails += `**Category:** ${component.category}\n`
+        }
+        
+        // Dependencies
+        if (component.dependencies && component.dependencies.length > 0) {
+          componentDetails += `\n## Dependencies\n\n`
+          component.dependencies.forEach(dep => {
+            componentDetails += `- ${dep}\n`
+          })
+        }
+        
+        // Registry Dependencies
+        if (component.registryDependencies && component.registryDependencies.length > 0) {
+          componentDetails += `\n## Required Components\n\n`
+          componentDetails += `This component requires the following components that will be installed automatically:\n\n`
+          component.registryDependencies.forEach(dep => {
+            componentDetails += `- ${dep}\n`
+          })
+        }
+        
+        // Files
+        if (component.files && component.files.length > 0) {
+          componentDetails += `\n## Files\n\n`
+          component.files.forEach(file => {
+            componentDetails += `- ${file.path} (${file.type})\n`
+          })
+        }
+        
+        // Show example usage if available
+        const exampleFile = component.files?.find(file => file.type === "registry:example")
+        if (exampleFile && exampleFile.content) {
+          componentDetails += `\n## Example Usage\n\n\`\`\`tsx\n${exampleFile.content}\n\`\`\`\n`
+        }
+        
+        // Add installation instructions
+        componentDetails += `\n## Installation\n\n`
+        componentDetails += `Run the following command to add this component to your project:\n\n`
+        componentDetails += `\`\`\`bash\n`
+        componentDetails += `npx @hanzo/ui@latest add ${name}\n`
+        componentDetails += `\`\`\`\n`
+
+        return {
+          content: [{ type: "text", text: componentDetails }],
+        }
+      }
+
+      case "add_component": {
+        const name = z.string().parse(args.name)
+        const style = args.style || "default"
+
+        if (!name) {
+          throw new Error("Component name is required")
+        }
+
+        const itemUrl = getRegistryItemUrl(name, REGISTRY_URL)
+        const component = await getRegistryItem(itemUrl, "")
+
+        if (!component) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Component '${name}' not found in the registry.`,
+              },
+            ],
+          }
+        }
+        
+        // Check if the component has dependencies
+        const hasDeps = component.registryDependencies && component.registryDependencies.length > 0
+        
+        let instructions = `# Adding the ${name} Component\n\n`
+        
+        // Main installation command
+        instructions += `Run the following command to add the \`${name}\` component to your project:\n\n`
+        instructions += `\`\`\`bash\n`
+        instructions += `npx @hanzo/ui@latest add ${name} --style=${style}\n`
+        instructions += `\`\`\`\n\n`
+        
+        // Explain what this will do
+        instructions += `This will:\n`
+        instructions += `- Add the component file(s) to your project\n`
+        instructions += `- Install any required npm dependencies\n`
+        
+        if (hasDeps) {
+          instructions += `- Install required component dependencies: ${component.registryDependencies!.join(", ")}\n`
+        }
+        
+        // Usage example
+        instructions += `\n## Usage\n\nAfter adding the component, you can import it in your project:\n\n`
+        instructions += `\`\`\`tsx\n`
+        instructions += `import { ${name.charAt(0).toUpperCase() + name.slice(1)} } from "@/components/ui/${name}"\n\n`
+        
+        // Add a simple example if possible
+        if (component.type.includes("ui:")) {
+          instructions += `export default function Example() {\n`
+          instructions += `  return <${name.charAt(0).toUpperCase() + name.slice(1)} />\n`
+          instructions += `}\n`
+        }
+        
+        instructions += `\`\`\`\n`
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: instructions,
+            },
+          ],
+        }
+      }
+      
+      case "list_styles": {
+        // Find all style-related items in the registry
+        const styles = registry.items.filter(item => 
+          item.type === "registry:style" || item.type.includes("style")
+        )
+        
+        let styleInfo = "# Available Styles\n\n"
+        
+        if (styles.length === 0) {
+          styleInfo += "The registry does not define any specific styles.\n\n"
+          styleInfo += "The default style will be used when installing components.\n"
+        } else {
+          styles.forEach(style => {
+            styleInfo += `## ${style.name}\n\n`
+            styleInfo += `${style.description || 'No description available'}\n\n`
+            
+            // Add usage info
+            styleInfo += `**Usage:**\n\n`
+            styleInfo += `\`\`\`bash\n`
+            styleInfo += `# Initialize with this style\n`
+            styleInfo += `npx @hanzo/ui@latest init --style=${style.name}\n\n`
+            styleInfo += `# Install components with this style\n`
+            styleInfo += `npx @hanzo/ui@latest add [component] --style=${style.name}\n`
+            styleInfo += `\`\`\`\n\n`
+          })
+        }
+        
+        return {
+          content: [{ type: "text", text: styleInfo }],
+        }
+      }
+      
+      case "search_registry": {
+        const query = z.string().parse(args.query).toLowerCase()
+        
+        if (!query || query.length < 2) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: "Please provide a search term with at least 2 characters.",
+              },
+            ],
+          }
+        }
+        
+        // Search through all items in the registry
+        const results = registry.items.filter(item => {
+          // Search in name
+          if (item.name.toLowerCase().includes(query)) {
+            return true
+          }
+          
+          // Search in description
+          if (item.description?.toLowerCase().includes(query)) {
+            return true
+          }
+          
+          // Search in category
+          if (item.category?.toLowerCase().includes(query)) {
+            return true
+          }
+          
+          return false
+        })
+        
+        if (results.length === 0) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `No components found matching '${query}'. Try a different search term.`,
+              },
+            ],
+          }
+        }
+        
+        // Format the results
+        let searchResults = `# Search Results for '${query}'\n\n`
+        searchResults += `Found ${results.length} matching components\n\n`
+        
+        results.forEach(item => {
+          searchResults += `## ${item.name}\n\n`
+          searchResults += `**Type:** ${item.type}\n`
+          
+          if (item.category) {
+            searchResults += `**Category:** ${item.category}\n`
+          }
+          
+          if (item.description) {
+            searchResults += `\n${item.description}\n`
+          }
+          
+          searchResults += `\n**Installation:**\n\n`
+          searchResults += `\`\`\`bash\nnpx @hanzo/ui@latest add ${item.name}\n\`\`\`\n\n`
+        })
+        
+        return {
+          content: [{ type: "text", text: searchResults }],
+        }
+      }
+      
+      default:
+        throw new Error(`Tool ${request.params.name} not found`)
+    }
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Invalid input: ${JSON.stringify(error.errors)}`,
+          },
+        ],
+      }
+    }
+
+    throw error
+  }
+})
+
+/**
+ * Fetches and parses the registry from the given URL
+ * @param registryUrl - URL to the registry.json file
+ * @returns The parsed registry object
+ */
+async function getRegistry(registryUrl: string): Promise<Registry> {
+  try {
+    const [registryJson] = await fetchRegistry([registryUrl], {
+      useCache: false,
+    })
+    return registrySchema.parse(registryJson)
+  } catch (error) {
+    console.error(`Failed to fetch registry from ${registryUrl}:`, error)
+    // Return a minimal valid registry if we can't fetch the real one
+    return {
+      name: "hanzo-ui",
+      items: [],
+    }
+  }
+}
+
+// Support CommonJS
+if (typeof module !== 'undefined') {
+  module.exports = { server }
+}

package/src/mcp/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@hanzo/ui-mcp",
+  "private": true,
+  "type": "module",
+  "main": "../dist/mcp/index.js",
+  "types": "../dist/mcp/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  }
+}

package/src/registry/api.ts

@@ -0,0 +1,164 @@
+import { registryItemSchema, RegistryItem, Registry } from "./index"
+import { z } from "zod"
+
+const registryCache = new Map<string, Promise<any>>()
+
+/**
+ * Gets the full registry URL based on the registry name or URL provided
+ * @param registry - Registry name, URL, or file path
+ * @returns The complete registry URL
+ */
+export function getRegistryUrl(registry: string): string {
+  // Check if registry is a full URL
+  if (registry.startsWith("http")) {
+    return registry
+  }
+
+  // Default to Hanzo registry if REGISTRY_BASE_URL is defined, otherwise use hanzo
+  const baseUrl = process.env.REGISTRY_BASE_URL || "https://ui.hanzo.com/registry"
+  
+  // Check if registry is a path to a JSON file
+  if (registry.endsWith(".json")) {
+    return `${baseUrl}/${registry}`
+  }
+
+  // Assume registry is a registry style
+  return `${baseUrl}/${registry}/registry.json`
+}
+
+/**
+ * Fetches a specific registry item by URL
+ * @param itemUrl - The URL of the item to fetch
+ * @param basePath - Base path for resolving imports
+ * @returns The registry item or null if not found
+ */
+export async function getRegistryItem(
+  itemUrl: string,
+  basePath: string
+): Promise<RegistryItem | null> {
+  try {
+    const response = await fetch(itemUrl)
+
+    if (!response.ok) {
+      console.error(`Failed to fetch registry item from ${itemUrl}: ${response.status} ${response.statusText}`)
+      return null
+    }
+
+    const item = await response.json()
+    const validatedItem = registryItemSchema.safeParse(item)
+    
+    if (!validatedItem.success) {
+      console.error(`Invalid registry item format: ${JSON.stringify(validatedItem.error)}`)
+      return null
+    }
+
+    // Process and resolve file paths
+    if (validatedItem.data.files) {
+      for (const file of validatedItem.data.files) {
+        if (!file.content) {
+          continue
+        }
+
+        // If the file has a target, we resolve it from the target
+        if (file.target) {
+          file.target = resolveImport(file.target, basePath)
+        }
+      }
+    }
+
+    return validatedItem.data
+  } catch (error) {
+    console.error(`Error fetching registry item: ${error}`)
+    return null
+  }
+}
+
+/**
+ * Resolves an import path relative to a base path
+ * @param importPath - The import path to resolve
+ * @param basePath - The base path to resolve against
+ * @returns The resolved import path
+ */
+export function resolveImport(importPath: string, basePath: string): string {
+  const importParts = importPath?.split("/")
+
+  // Check if it's a relative import
+  if (importPath.startsWith(".")) {
+    return [basePath.replace(/^@/, ""), ...importParts].filter(Boolean).join("/")
+  }
+
+  // Check if it's a scope package
+  if (importParts?.[0]?.startsWith("@")) {
+    return importPath
+  }
+
+  return importPath
+}
+
+/**
+ * Fetches registry data from one or more paths
+ * @param paths - Array of registry paths to fetch
+ * @param options - Options for fetching the registry
+ * @returns Array of registry data
+ */
+export async function fetchRegistry(
+  paths: string[],
+  options: { useCache?: boolean } = {}
+): Promise<Registry[]> {
+  options = {
+    useCache: true,
+    ...options,
+  }
+
+  try {
+    const results = await Promise.all(
+      paths.map(async (path) => {
+        const url = getRegistryUrl(path)
+
+        // Check cache first if caching is enabled
+        if (options.useCache && registryCache.has(url)) {
+          return registryCache.get(url)
+        }
+
+        // Store the promise in the cache before awaiting if caching is enabled
+        const fetchPromise = (async () => {
+          const response = await fetch(url)
+
+          if (!response.ok) {
+            throw new Error(
+              `Failed to fetch registry from ${url}. ${response.status} ${response.statusText}`
+            )
+          }
+
+          return response.json()
+        })()
+
+        if (options.useCache) {
+          registryCache.set(url, fetchPromise)
+        }
+        return fetchPromise
+      })
+    )
+
+    return results
+  } catch (error) {
+    console.error(`Error fetching registry: ${error}`)
+    throw error
+  }
+}
+
+/**
+ * Gets the URL for a specific registry item
+ * @param itemName - The name of the registry item
+ * @param registryUrl - The base registry URL
+ * @returns The URL for the specific registry item
+ */
+export function getRegistryItemUrl(itemName: string, registryUrl: string): string {
+  const registryBaseUrl = registryUrl.replace(/\/registry\.json$/, "")
+  return `${registryBaseUrl}/r/${itemName}.json`
+}
+
+// Support CommonJS
+if (typeof module !== 'undefined') {
+  module.exports = { getRegistryUrl, getRegistryItem, resolveImport, fetchRegistry, getRegistryItemUrl }
+}