uiplug-mcp 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# uiplug-mcp
+
+MCP server for [UIPlug](https://uiplug.com) — gives Claude and other AI agents instant access to the UIPlug UI component marketplace.
+
+## What it does
+
+Exposes three tools to any MCP-compatible agent:
+
+| Tool | Description |
+|------|-------------|
+| `list_components` | Browse published components, filter by framework / category |
+| `search_components` | Search by name, description, or tag |
+| `get_component` | Get full source code + installation instructions |
+
+## Usage with Claude Desktop
+
+Add this to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "uiplug": {
+      "command": "npx",
+      "args": ["-y", "uiplug-mcp"]
+    }
+  }
+}
+```
+
+Restart Claude Desktop. No API key needed — works out of the box.
+
+## Example prompts
+
+> "Build me a React dashboard. Use UIPlug to find a skeleton loader and a card component."
+
+> "Search UIPlug for navigation components for Jetpack Compose."
+
+> "Get the Gradient Button component from UIPlug and adapt it to my design system."
+
+## Supported frameworks
+
+React · Vue · Svelte · Angular · HTML/CSS · Jetpack Compose · Compose Multiplatform · Flutter · SwiftUI · React Native
+
+## Self-hosting
+
+To point the server at your own Supabase instance:
+
+```json
+{
+  "mcpServers": {
+    "uiplug": {
+      "command": "npx",
+      "args": ["-y", "uiplug-mcp"],
+      "env": {
+        "SUPABASE_URL": "https://your-project.supabase.co",
+        "SUPABASE_ANON_KEY": "your-anon-key"
+      }
+    }
+  }
+}
+```

package/dist/index.js

@@ -0,0 +1,265 @@
+#!/usr/bin/env node
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { createClient } from "@supabase/supabase-js";
+// ── Supabase client ───────────────────────────────────────────────────────────
+// Public anon key — safe to hardcode (read-only, RLS-protected).
+// Override with env vars to point at your own Supabase instance.
+const SUPABASE_URL = process.env.SUPABASE_URL ?? "https://uuoexpurygmgfouiawuc.supabase.co";
+const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY ??
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV1b2V4cHVyeWdtZ2ZvdWlhd3VjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzE2NzI5MTMsImV4cCI6MjA4NzI0ODkxM30.4gogFo90o8lfZ9_iKZfhXQ9QHtx2VKhMu9Hgy_2lI_g";
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+// ── MCP Server ────────────────────────────────────────────────────────────────
+const server = new Server({ name: "uiplug", version: "1.0.0" }, { capabilities: { tools: {} } });
+// ── Tool definitions ──────────────────────────────────────────────────────────
+server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: [
+        {
+            name: "list_components",
+            description: "List published UI components from the UIPlug marketplace. " +
+                "Optionally filter by framework (e.g. React, Vue, Jetpack Compose, Flutter, SwiftUI) " +
+                "and/or category (e.g. Layout, Navigation, Input, Data Display, Feedback, Sensors).",
+            inputSchema: {
+                type: "object",
+                properties: {
+                    framework: {
+                        type: "string",
+                        description: "Filter by framework: React | Vue | Svelte | Angular | HTML / CSS | " +
+                            "Jetpack Compose | Compose Multiplatform | Flutter | SwiftUI | React Native",
+                    },
+                    category: {
+                        type: "string",
+                        description: "Filter by category: Layout | Navigation | Input | Data Display | Feedback | Sensors | AR Glasses",
+                    },
+                    limit: {
+                        type: "number",
+                        description: "Maximum number of results to return (default 20, max 50).",
+                    },
+                },
+            },
+        },
+        {
+            name: "search_components",
+            description: "Search UIPlug components by name, description, or tag. " +
+                "Returns matching components with a summary of their metadata.",
+            inputSchema: {
+                type: "object",
+                required: ["query"],
+                properties: {
+                    query: {
+                        type: "string",
+                        description: "Search term — matched against name, description, and tags.",
+                    },
+                    framework: {
+                        type: "string",
+                        description: "Narrow results to a specific framework.",
+                    },
+                },
+            },
+        },
+        {
+            name: "get_component",
+            description: "Get the full source code and metadata for a specific UIPlug component by its ID. " +
+                "Use this after list_components or search_components to retrieve the actual code " +
+                "you want to use in your project.",
+            inputSchema: {
+                type: "object",
+                required: ["id"],
+                properties: {
+                    id: {
+                        type: "string",
+                        description: "The component UUID returned by list_components or search_components.",
+                    },
+                },
+            },
+        },
+    ],
+}));
+// ── Tool handlers ─────────────────────────────────────────────────────────────
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    // ── list_components ─────────────────────────────────────────────────────────
+    if (name === "list_components") {
+        const { framework, category, limit = 20 } = (args ?? {});
+        let query = supabase
+            .from("components")
+            .select("id, name, description, category, framework, downloads, likes, model, " +
+            "profiles!components_author_id_fkey(username)")
+            .eq("status", "published")
+            .order("downloads", { ascending: false })
+            .limit(Math.min(limit, 50));
+        if (framework)
+            query = query.eq("framework", framework);
+        if (category)
+            query = query.eq("category", category);
+        const { data, error } = await query;
+        if (error) {
+            return { content: [{ type: "text", text: `Error: ${error.message}` }], isError: true };
+        }
+        const rows = (data ?? []).map((c) => ({
+            id: c.id,
+            name: c.name,
+            description: c.description,
+            category: c.category,
+            framework: c.framework,
+            author: c.profiles?.username ?? "Unknown",
+            downloads: c.downloads ?? 0,
+            likes: c.likes ?? 0,
+            model: c.model ?? null,
+        }));
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Found ${rows.length} component(s).\n\n` +
+                        rows
+                            .map((c) => `**${c.name}** (${c.framework} · ${c.category})\n` +
+                            `  ID: ${c.id}\n` +
+                            `  ${c.description}\n` +
+                            `  Author: ${c.author} · ↓${c.downloads} ♥${c.likes}` +
+                            (c.model ? ` · Built with ${c.model}` : ""))
+                            .join("\n\n"),
+                },
+            ],
+        };
+    }
+    // ── search_components ───────────────────────────────────────────────────────
+    if (name === "search_components") {
+        const { query: q, framework } = (args ?? {});
+        // Search name + description via ilike, then also fetch tag matches
+        let nameQuery = supabase
+            .from("components")
+            .select("id, name, description, category, framework, downloads, likes, " +
+            "profiles!components_author_id_fkey(username)")
+            .eq("status", "published")
+            .or(`name.ilike.%${q}%,description.ilike.%${q}%`)
+            .order("downloads", { ascending: false })
+            .limit(20);
+        if (framework)
+            nameQuery = nameQuery.eq("framework", framework);
+        // Also search by tag name
+        const { data: tagData } = await supabase
+            .from("tags")
+            .select("id")
+            .ilike("name", `%${q}%`);
+        const tagIds = (tagData ?? []).map((t) => t.id);
+        let tagComponentIds = [];
+        if (tagIds.length > 0) {
+            const { data: ctData } = await supabase
+                .from("component_tags")
+                .select("component_id")
+                .in("tag_id", tagIds);
+            tagComponentIds = (ctData ?? []).map((ct) => ct.component_id);
+        }
+        const { data: nameResults, error } = await nameQuery;
+        if (error) {
+            return { content: [{ type: "text", text: `Error: ${error.message}` }], isError: true };
+        }
+        // Fetch tag-matched components not already in name results
+        let tagResults = [];
+        const existingIds = new Set((nameResults ?? []).map((c) => c.id));
+        const newTagIds = tagComponentIds.filter((id) => !existingIds.has(id));
+        if (newTagIds.length > 0) {
+            let tq = supabase
+                .from("components")
+                .select("id, name, description, category, framework, downloads, likes, " +
+                "profiles!components_author_id_fkey(username)")
+                .eq("status", "published")
+                .in("id", newTagIds)
+                .limit(10);
+            if (framework)
+                tq = tq.eq("framework", framework);
+            const { data } = await tq;
+            tagResults = data ?? [];
+        }
+        const all = [...(nameResults ?? []), ...tagResults];
+        if (all.length === 0) {
+            return {
+                content: [{ type: "text", text: `No components found matching "${q}".` }],
+            };
+        }
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Found ${all.length} result(s) for "${q}":\n\n` +
+                        all
+                            .map((c) => `**${c.name}** (${c.framework} · ${c.category})\n` +
+                            `  ID: ${c.id}\n` +
+                            `  ${c.description}\n` +
+                            `  Author: ${c.profiles?.username ?? "Unknown"} · ↓${c.downloads ?? 0}`)
+                            .join("\n\n"),
+                },
+            ],
+        };
+    }
+    // ── get_component ───────────────────────────────────────────────────────────
+    if (name === "get_component") {
+        const { id } = (args ?? {});
+        const [compRes, tagRes] = await Promise.all([
+            supabase
+                .from("components")
+                .select("id, name, description, category, framework, downloads, likes, model, " +
+                "installation, code_component, preview_key, " +
+                "hardware_version, hardware_brand, hardware_compatibility, " +
+                "profiles!components_author_id_fkey(username)")
+                .eq("id", id)
+                .eq("status", "published")
+                .single(),
+            supabase
+                .from("component_tags")
+                .select("tags(name)")
+                .eq("component_id", id),
+        ]);
+        if (compRes.error || !compRes.data) {
+            return {
+                content: [{ type: "text", text: `Component not found: ${compRes.error?.message ?? id}` }],
+                isError: true,
+            };
+        }
+        const c = compRes.data;
+        const tags = (tagRes.data ?? []).map((t) => t.tags?.name).filter(Boolean);
+        // Increment download count
+        await supabase.rpc("increment_downloads", { component_id: id }).maybeSingle();
+        const hwSection = c.hardware_version
+            ? `\n## Hardware Requirements\n- Brand: ${c.hardware_brand}\n- Version: ${c.hardware_version}\n- Compatibility: ${c.hardware_compatibility}`
+            : "";
+        const installSection = c.installation
+            ? `\n## Installation\n\`\`\`\n${c.installation}\n\`\`\``
+            : "";
+        const ext = c.framework === "Flutter" ? "dart"
+            : c.framework === "SwiftUI" ? "swift"
+                : c.framework === "React" ? "tsx"
+                    : c.framework === "Vue" ? "vue"
+                        : c.framework === "Svelte" ? "svelte"
+                            : c.framework === "HTML / CSS" ? "html"
+                                : "kt";
+        const output = `# ${c.name}
+
+**Framework:** ${c.framework}
+**Category:** ${c.category}
+**Author:** ${c.profiles?.username ?? "Unknown"}
+**Tags:** ${tags.length ? tags.join(", ") : "none"}
+**Downloads:** ${c.downloads ?? 0} · **Likes:** ${c.likes ?? 0}${c.model ? `\n**Built with:** ${c.model}` : ""}
+
+## Description
+${c.description}
+${installSection}
+${hwSection}
+
+## Code
+\`\`\`${ext}
+${c.code_component}
+\`\`\`
+`;
+        return { content: [{ type: "text", text: output }] };
+    }
+    return {
+        content: [{ type: "text", text: `Unknown tool: ${name}` }],
+        isError: true,
+    };
+});
+// ── Start ─────────────────────────────────────────────────────────────────────
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "uiplug-mcp",
+  "version": "1.0.0",
+  "description": "MCP server for UIPlug — gives AI agents access to the UIPlug UI component marketplace",
+  "type": "module",
+  "bin": {
+    "uiplug-mcp": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && node -e \"const fs=require('fs');const f='dist/index.js';fs.writeFileSync(f,'#!/usr/bin/env node\\n'+fs.readFileSync(f,'utf8'));fs.chmodSync(f,'755')\"",
+    "prepublishOnly": "npm run build",
+    "dev": "tsx index.ts"
+  },
+  "keywords": [
+    "mcp",
+    "claude",
+    "ui-components",
+    "uiplug",
+    "model-context-protocol",
+    "react",
+    "jetpack-compose",
+    "flutter"
+  ],
+  "author": "UIPlug",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "@supabase/supabase-js": "^2.97.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.7.0"
+  }
+}