@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms.txt

@@ -0,0 +1,65 @@
+# Compose UI
+
+> A React component library built on Base UI primitives with Tailwind CSS styling. Install via npm for type-safe, accessible components with modern theming.
+
+Compose UI provides pre-styled, accessible React components built on Base UI. It uses Tailwind CSS for styling and class-variance-authority (CVA) for type-safe variants.
+
+Key features:
+- Built on @base-ui/react primitives (accessibility handled automatically)
+- Styled with Tailwind CSS using design tokens
+- Type-safe variants with CVA
+- CSS variable-based theming (compatible with Tailwind v4)
+- Tree-shakable ESM exports
+
+## Getting Started
+
+- [Quick Start](https://compose-ui.dev/overview/quick-start): Installation and basic usage
+
+## Components
+
+- [Tooltip](https://compose-ui.dev/components/tooltip.md): A popup that appears when an element is hovered or focused, showing a hint for sighted users.
+- [Toolbar](https://compose-ui.dev/components/toolbar.md): A container for grouping a set of buttons and controls.
+- [Toggle Group](https://compose-ui.dev/components/toggle-group.md): Provides a shared state to a series of toggle buttons.
+- [Toggle](https://compose-ui.dev/components/toggle.md): A two-state button that can be on or off.
+- [Toast](https://compose-ui.dev/components/toast.md): A notification message that appears temporarily to provide feedback.
+- [Textarea](https://compose-ui.dev/components/textarea.md): A multi-line text input element.
+- [Tabs](https://compose-ui.dev/components/tabs.md): A component for toggling between related panels on the same page with an animated indicator.
+- [Table](https://compose-ui.dev/components/table.md): A responsive table component with support for variants, alignment, and a useTable hook for declarative column configuration.
+- [Switch](https://compose-ui.dev/components/switch.md): A control that indicates whether a setting is on or off.
+- [Slider](https://compose-ui.dev/components/slider.md): A control for selecting a value or range from a continuous or discrete set of values.
+- [Skeleton](https://compose-ui.dev/components/skeleton.md): A placeholder component for content that is loading. Use className to define custom shapes and sizes.
+- [Separator](https://compose-ui.dev/components/separator.md): A separator element accessible to screen readers.
+- [Select](https://compose-ui.dev/components/select.md): A common form component for choosing a predefined value in a dropdown menu.
+- [Scroll Area](https://compose-ui.dev/components/scroll-area.md): A native scroll container with custom scrollbars for consistent styling across browsers.
+- [Radio Group](https://compose-ui.dev/components/radio-group.md): Provides shared state to a series of radio buttons.
+- [Progress](https://compose-ui.dev/components/progress.md): The progressbar range widget indicates that a request has been received and the application is making progress toward completing the requested action.
+- [Preview Card](https://compose-ui.dev/components/preview-card.md): A card that displays contextual content when hovering a link.
+- [Popover](https://compose-ui.dev/components/popover.md): An accessible popup anchored to a button.
+- [Pagination](https://compose-ui.dev/components/pagination.md): A composable pagination component for navigating through paginated content. Use with tables, search results, or any paginated data.
+- [Number Field](https://compose-ui.dev/components/number-field.md): A numeric input element with increment and decrement buttons, and a scrub area.
+- [Navigation Menu](https://compose-ui.dev/components/navigation-menu.md): A navigation component with support for dropdowns and submenus.
+- [Meter](https://compose-ui.dev/components/meter.md): A graphical display of a numeric value within a defined range.
+- [Menubar](https://compose-ui.dev/components/menubar.md): A horizontal menu bar with dropdown menus for application commands and options.
+- [Menu](https://compose-ui.dev/components/menu.md): A component that displays a list of options on a temporary surface.
+- [Input](https://compose-ui.dev/components/input.md): A single-line text input element.
+- [Form](https://compose-ui.dev/components/form.md): A native form element with consolidated error handling. Examples include useActionState, Zod schema validation, React Hook Form, and TanStack Form integrations.
+- [Field](https://compose-ui.dev/components/field.md): Provides accessible labeling and validation for form controls.
+- [Drawer](https://compose-ui.dev/components/drawer.md): A panel that slides in from the edge of the screen, commonly used for navigation, filters, or supplementary content.
+- [Dialog](https://compose-ui.dev/components/dialog.md): A popup that opens on top of the entire page with a backdrop, commonly used for confirmations, forms, and important messages.
+- [Context Menu](https://compose-ui.dev/components/context-menu.md): A menu triggered by right-click or long press, rendering at the pointer position.
+- [Combobox](https://compose-ui.dev/components/combobox.md): An input combined with a list of predefined items to select, with filtering support.
+- [Collapsible](https://compose-ui.dev/components/collapsible.md): A component that allows content to be expanded or collapsed.
+- [Checkbox Group](https://compose-ui.dev/components/checkbox-group.md): Provides shared state to a series of checkboxes.
+- [Checkbox](https://compose-ui.dev/components/checkbox.md): A control that allows the user to toggle between checked and unchecked states.
+- [Card](https://compose-ui.dev/components/card.md): A flexible card component with support for media, headers, content sections, and footers. Supports both vertical and horizontal layouts with multiple variants.
+- [Button](https://compose-ui.dev/components/button.md): A versatile button component with multiple variants, sizes, and states including loading indicators.
+- [Badge](https://compose-ui.dev/components/badge.md): A versatile badge component for displaying labels, status indicators, and tags with multiple variants, sizes, and shapes.
+- [Avatar](https://compose-ui.dev/components/avatar.md): An easily stylable avatar component for displaying user profile pictures, initials, or fallback content.
+- [Autocomplete](https://compose-ui.dev/components/autocomplete.md): An input field with a filterable dropdown list of suggestions.
+- [Alert Dialog](https://compose-ui.dev/components/alert-dialog.md): A dialog that requires a user response to proceed.
+- [Accordion](https://compose-ui.dev/components/accordion.md): A set of collapsible panels with headings.
+
+## Optional
+
+- [Base UI Documentation](https://base-ui.com/react/components): Underlying component APIs
+- [GitHub Repository](https://github.com/LGLabGreg/compose-ui): Source code

package/dist/index.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/index.mjs

@@ -0,0 +1,161 @@
+#!/usr/bin/env node
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { readFile, readdir } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region src/resources/components.ts
+const LLMS_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "assets/llms");
+function slugToName(slug) {
+	return slug.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function parseMarkdownFile(content, slug) {
+	const lines = content.split("\n");
+	let name = slugToName(slug);
+	for (const line of lines) if (line.startsWith("# ")) {
+		name = line.slice(2).trim();
+		break;
+	}
+	let description = "";
+	let foundHeading = false;
+	for (const line of lines) {
+		if (line.startsWith("# ")) {
+			foundHeading = true;
+			continue;
+		}
+		if (foundHeading && line.trim() !== "") {
+			description = line.trim();
+			break;
+		}
+	}
+	return {
+		name,
+		slug,
+		description,
+		documentationUri: `compose-ui://components/${slug}`
+	};
+}
+async function getComponentContent(slug) {
+	try {
+		return await readFile(resolve(LLMS_DIR, `${slug}.md`), "utf-8");
+	} catch {
+		return null;
+	}
+}
+async function getComponentsList() {
+	try {
+		const mdFiles = (await readdir(LLMS_DIR)).filter((f) => f.endsWith(".md")).sort();
+		const components = [];
+		for (const file of mdFiles) {
+			const slug = file.replace(".md", "");
+			const content = await readFile(resolve(LLMS_DIR, file), "utf-8");
+			components.push(parseMarkdownFile(content, slug));
+		}
+		return components;
+	} catch {
+		return [];
+	}
+}
+function registerComponentsResource(server) {
+	server.registerResource("components", "compose-ui://components", {
+		title: "Compose UI Components",
+		description: "List of all Compose UI components with metadata",
+		mimeType: "application/json"
+	}, async () => ({ contents: [{
+		uri: "compose-ui://components",
+		mimeType: "application/json",
+		text: JSON.stringify(await getComponentsList(), null, 2)
+	}] }));
+}
+function registerComponentDocResource(server) {
+	server.registerResource("component-doc", new ResourceTemplate("compose-ui://components/{slug}", { list: void 0 }), {
+		title: "Component Documentation",
+		description: "Full markdown documentation for a Compose UI component",
+		mimeType: "text/markdown"
+	}, async (uri, variables) => {
+		const slug = variables.slug;
+		const content = await getComponentContent(slug);
+		if (!content) throw new Error(`Component not found: ${slug}`);
+		return { contents: [{
+			uri: uri.href,
+			mimeType: "text/markdown",
+			text: content
+		}] };
+	});
+}
+
+//#endregion
+//#region src/resources/overview.ts
+const text = `# Compose UI
+
+A React component library built on Base UI primitives with Tailwind CSS v4 styling.
+
+## Key Principles
+- Composition over configuration
+- Base UI handles accessibility and behavior
+- Tailwind CSS for styling
+- TypeScript-first
+
+## Using This MCP Server
+
+To work with Compose UI components, use the available tools:
+
+- \`compose-ui://components\`: List of available components
+- \`compose-ui://components/{slug}\`: Documentation for a specific component
+`;
+function registerOverviewResource(server) {
+	server.registerResource("overview", "compose-ui://overview", {
+		title: "Compose UI Overview",
+		description: "Compose UI overview documentation",
+		mimeType: "text/plain"
+	}, async () => ({ contents: [{
+		uri: "compose-ui://overview",
+		mimeType: "text/markdown",
+		text
+	}] }));
+}
+
+//#endregion
+//#region src/resources/index.ts
+function registerResources(server) {
+	registerOverviewResource(server);
+	registerComponentsResource(server);
+	registerComponentDocResource(server);
+}
+
+//#endregion
+//#region src/tools/index.ts
+function registerTools(server) {}
+
+//#endregion
+//#region src/server.ts
+function createServer() {
+	const server = new McpServer({
+		name: "compose-ui-mcp",
+		version: "0.1.0"
+	});
+	registerResources(server);
+	/* @__PURE__ */ registerTools(server);
+	return server;
+}
+
+//#endregion
+//#region src/index.ts
+async function main() {
+	const server = createServer();
+	const transport = new StdioServerTransport();
+	await server.connect(transport);
+	process.on("SIGINT", async () => {
+		await server.close();
+		process.exit(0);
+	});
+}
+main().catch((error) => {
+	console.error("Server error:", error);
+	process.exit(1);
+});
+
+//#endregion
+export {  };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/resources/components.ts","../src/resources/overview.ts","../src/resources/index.ts","../src/tools/index.ts","../src/server.ts","../src/index.ts"],"sourcesContent":["import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'\nimport { ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js'\nimport { readFile, readdir } from 'node:fs/promises'\nimport { dirname, resolve } from 'node:path'\nimport { fileURLToPath } from 'node:url'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\nconst LLMS_DIR = resolve(__dirname, 'assets/llms')\n\ninterface ComponentInfo {\n  name: string\n  slug: string\n  description: string\n  documentationUri: string\n}\n\nfunction slugToName(slug: string): string {\n  return slug\n    .split('-')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(' ')\n}\n\nfunction parseMarkdownFile(content: string, slug: string): ComponentInfo {\n  const lines = content.split('\\n')\n\n  // Extract title from first # heading\n  let name = slugToName(slug)\n  for (const line of lines) {\n    if (line.startsWith('# ')) {\n      name = line.slice(2).trim()\n      break\n    }\n  }\n\n  // Extract description (first non-empty line after the heading)\n  let description = ''\n  let foundHeading = false\n  for (const line of lines) {\n    if (line.startsWith('# ')) {\n      foundHeading = true\n      continue\n    }\n    if (foundHeading && line.trim() !== '') {\n      description = line.trim()\n      break\n    }\n  }\n\n  return {\n    name,\n    slug,\n    description,\n    documentationUri: `compose-ui://components/${slug}`,\n  }\n}\n\nasync function getComponentContent(slug: string): Promise<string | null> {\n  try {\n    const filePath = resolve(LLMS_DIR, `${slug}.md`)\n    return await readFile(filePath, 'utf-8')\n  } catch {\n    return null\n  }\n}\n\nasync function getComponentsList(): Promise<ComponentInfo[]> {\n  try {\n    const files = await readdir(LLMS_DIR)\n    const mdFiles = files.filter((f) => f.endsWith('.md')).sort()\n\n    const components: ComponentInfo[] = []\n\n    for (const file of mdFiles) {\n      const slug = file.replace('.md', '')\n      const content = await readFile(resolve(LLMS_DIR, file), 'utf-8')\n      components.push(parseMarkdownFile(content, slug))\n    }\n\n    return components\n  } catch {\n    return []\n  }\n}\n\nexport function registerComponentsResource(server: McpServer): void {\n  server.registerResource(\n    'components',\n    'compose-ui://components',\n    {\n      title: 'Compose UI Components',\n      description: 'List of all Compose UI components with metadata',\n      mimeType: 'application/json',\n    },\n    async () => ({\n      contents: [\n        {\n          uri: 'compose-ui://components',\n          mimeType: 'application/json',\n          text: JSON.stringify(await getComponentsList(), null, 2),\n        },\n      ],\n    }),\n  )\n}\n\nexport function registerComponentDocResource(server: McpServer): void {\n  server.registerResource(\n    'component-doc',\n    new ResourceTemplate('compose-ui://components/{slug}', { list: undefined }),\n    {\n      title: 'Component Documentation',\n      description: 'Full markdown documentation for a Compose UI component',\n      mimeType: 'text/markdown',\n    },\n    async (uri, variables) => {\n      const slug = variables.slug as string\n      const content = await getComponentContent(slug)\n      if (!content) {\n        throw new Error(`Component not found: ${slug}`)\n      }\n      return {\n        contents: [\n          {\n            uri: uri.href,\n            mimeType: 'text/markdown',\n            text: content,\n          },\n        ],\n      }\n    },\n  )\n}\n","import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'\n\nconst text = `# Compose UI\n\nA React component library built on Base UI primitives with Tailwind CSS v4 styling.\n\n## Key Principles\n- Composition over configuration\n- Base UI handles accessibility and behavior\n- Tailwind CSS for styling\n- TypeScript-first\n\n## Using This MCP Server\n\nTo work with Compose UI components, use the available tools:\n\n- \\`compose-ui://components\\`: List of available components\n- \\`compose-ui://components/{slug}\\`: Documentation for a specific component\n`\n\nexport function registerOverviewResource(server: McpServer): void {\n  server.registerResource(\n    'overview',\n    'compose-ui://overview',\n    {\n      title: 'Compose UI Overview',\n      description: 'Compose UI overview documentation',\n      mimeType: 'text/plain',\n    },\n    async () => ({\n      contents: [\n        {\n          uri: 'compose-ui://overview',\n          mimeType: 'text/markdown',\n          text,\n        },\n      ],\n    }),\n  )\n}\n","import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'\n\nimport { registerComponentDocResource, registerComponentsResource } from './components.js'\nimport { registerOverviewResource } from './overview.js'\n\nexport function registerResources(server: McpServer): void {\n  registerOverviewResource(server)\n  registerComponentsResource(server)\n  registerComponentDocResource(server)\n}\n","import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function registerTools(server: McpServer): void {\n  // Tools will be registered here\n  // Example: registerSearchTool(server)\n}\n","import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'\n\nimport { registerResources } from './resources/index.js'\nimport { registerTools } from './tools/index.js'\n\nexport function createServer(): McpServer {\n  const server = new McpServer({\n    name: 'compose-ui-mcp',\n    version: '0.1.0',\n  })\n\n  registerResources(server)\n  registerTools(server)\n\n  return server\n}\n","#!/usr/bin/env node\n\nimport { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'\n\nimport { createServer } from './server.js'\n\nasync function main() {\n  const server = createServer()\n  const transport = new StdioServerTransport()\n\n  await server.connect(transport)\n\n  process.on('SIGINT', async () => {\n    await server.close()\n    process.exit(0)\n  })\n}\n\nmain().catch((error) => {\n  console.error('Server error:', error) // eslint-disable-line no-console\n  process.exit(1)\n})\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@lglab/compose-ui-mcp",
+  "version": "0.0.1",
+  "description": "MCP server exposing compose-ui library documentation to AI tools",
+  "author": "LGLab",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LGLabGreg/compose-ui.git",
+    "directory": "packages/compose-ui-mcp"
+  },
+  "homepage": "https://compose-ui.dev",
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "compose-ui",
+    "ai",
+    "claude",
+    "cursor"
+  ],
+  "type": "module",
+  "bin": {
+    "compose-ui-mcp": "./dist/index.mjs"
+  },
+  "scripts": {
+    "copy:llms": "tsx scripts/copy-llms.ts",
+    "prebuild": "pnpm copy:llms",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "start": "node dist/index.mjs",
+    "inspect": "npx @modelcontextprotocol/inspector node dist/index.mjs"
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.25.3",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "tsdown": "^0.12.9",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3"
+  }
+}