@dreamtree-org/twreact-ui 1.1.49 → 1.1.51

package/mcp/server-core.mjs

@@ -0,0 +1,234 @@
+// dreamtree-ui MCP server — transport-agnostic core
+// ------------------------------------------------------------------------
+// `createServer({ version, catalog })` builds the configured MCP Server with
+// every tool / resource / prompt handler wired up. It is data-source-agnostic:
+// `catalog` is any object exposing
+//   buildCatalog, findComponent, searchCatalog, listDocNames, readDoc, readSkill
+// — which both the live catalog (mcp/catalog.mjs, reads src/ + doc/ live) and
+// the shipped snapshot catalog (mcp/catalog-snapshot.mjs, reads a frozen JSON)
+// provide. The transport (stdio) and boot live in the thin entry points
+// (mcp/server.mjs for the repo, the `mcp` subcommand of bin/cli.mjs for
+// consumers) so the SAME handler logic serves both — no copying.
+//
+//   TOOLS
+//     list_components()        → grouped catalog (core/feedback/nav/utility + hooks/utils)
+//     get_component(name)      → props, variants, sizes, examples, a11y notes, family exports
+//     search_components(query) → ranked matches across names/props/examples
+//   RESOURCES
+//     dreamtree://skill        → the consumer AI-usage guide
+//     dreamtree://docs/<Name>  → the per-component manual
+//   PROMPT
+//     compose_ui               → primes an agent to build UI with dreamtree-ui
+
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import {
+  ListToolsRequestSchema,
+  CallToolRequestSchema,
+  ListResourcesRequestSchema,
+  ReadResourceRequestSchema,
+  ListPromptsRequestSchema,
+  GetPromptRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+
+export const PKG = "@dreamtree-org/twreact-ui";
+
+// ---- formatting helpers ----------------------------------------------------
+
+function asText(obj) {
+  return { content: [{ type: "text", text: typeof obj === "string" ? obj : JSON.stringify(obj, null, 2) }] };
+}
+
+function componentSummary(c) {
+  return {
+    name: c.name,
+    group: c.group,
+    familyExports: c.familyExports,
+    hasDoc: c.hasDoc,
+    description: c.description,
+  };
+}
+
+function fullComponent(c) {
+  return {
+    name: c.name,
+    group: c.group,
+    familyExports: c.familyExports,
+    import: `import { ${[c.name, ...c.familyExports].join(", ")} } from "${PKG}";`,
+    description: c.description,
+    props: c.props,
+    examples: c.examples,
+    accessibility:
+      "Interactive components are keyboard-operable, expose ARIA roles/labels, " +
+      "show a focus-visible ring, and support dark mode via the `dark:` variant. " +
+      "See docs/agents/03-coding-standards.md §7.",
+    conventions:
+      "forwardRef + className(merged via cn) + ...rest are forwarded to the root " +
+      "primitive. Variants: primary|secondary|outline|ghost|destructive|success|warning. " +
+      "Sizes: xs|sm|md|lg|xl. Theme via tailwind.config.js tokens, never a color prop.",
+  };
+}
+
+const TOOLS = [
+  {
+    name: "list_components",
+    description:
+      "List every exported component, hook, and util in @dreamtree-org/twreact-ui, " +
+      "grouped (core/feedback/navigation/utility + hooks + utils). Use this first to " +
+      "discover what the library offers before composing UI.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+  },
+  {
+    name: "get_component",
+    description:
+      "Get the full spec for one component/hook/util: import statement, props table " +
+      "(name/type/default/description), variants & sizes, usage examples, family exports, " +
+      "and accessibility/convention notes. Accepts the component name or a family-export " +
+      "name (e.g. 'useToast' resolves to 'Toast').",
+    inputSchema: {
+      type: "object",
+      properties: { name: { type: "string", description: "Component/hook/util name, e.g. 'Button', 'useTheme', 'useToast'." } },
+      required: ["name"],
+      additionalProperties: false,
+    },
+  },
+  {
+    name: "search_components",
+    description:
+      "Search the library by keyword across component names, family exports, descriptions, " +
+      "prop names, and examples. Returns ranked matches. Use when you know the capability " +
+      "you need ('date', 'upload', 'modal') but not the component name.",
+    inputSchema: {
+      type: "object",
+      properties: { query: { type: "string", description: "Keyword(s), e.g. 'date', 'toast', 'multi select'." } },
+      required: ["query"],
+      additionalProperties: false,
+    },
+  },
+];
+
+const SKILL_URI = "dreamtree://skill";
+const docName = (name) => `dreamtree://docs/${name}`;
+
+// Build the configured (but not yet connected) MCP Server. `catalog` supplies
+// the data; `version` is reported in the server handshake.
+export function createServer({ version, catalog }) {
+  const server = new Server(
+    { name: "dreamtree-ui", version },
+    { capabilities: { tools: {}, resources: {}, prompts: {} } }
+  );
+
+  // --- tools ---
+
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS }));
+
+  server.setRequestHandler(CallToolRequestSchema, async (req) => {
+    const { name, arguments: args = {} } = req.params;
+
+    if (name === "list_components") {
+      const c = catalog.buildCatalog();
+      return asText({
+        package: PKG,
+        counts: c.counts,
+        components: c.components.map(componentSummary),
+        hooks: c.hooks.map(componentSummary),
+        utils: c.utils.map(componentSummary),
+        store: c.store.map(componentSummary),
+      });
+    }
+
+    if (name === "get_component") {
+      const target = catalog.findComponent(args.name);
+      if (!target) {
+        const c = catalog.buildCatalog();
+        const names = [...c.components, ...c.hooks, ...c.utils, ...c.store].map((x) => x.name);
+        return {
+          isError: true,
+          content: [{ type: "text", text: `No component named "${args.name}". Available: ${names.join(", ")}` }],
+        };
+      }
+      return asText(fullComponent(target));
+    }
+
+    if (name === "search_components") {
+      const hits = catalog.searchCatalog(args.query);
+      return asText({
+        query: args.query,
+        matches: hits.map((h) => ({ name: h.name, group: h.group, score: h._score, description: h.description })),
+      });
+    }
+
+    return { isError: true, content: [{ type: "text", text: `Unknown tool: ${name}` }] };
+  });
+
+  // --- resources ---
+
+  server.setRequestHandler(ListResourcesRequestSchema, async () => {
+    const resources = [
+      {
+        uri: SKILL_URI,
+        name: "dreamtree-ui AI usage guide",
+        description: "How to install, wire, and use the library — the consumer-facing AI reference.",
+        mimeType: "text/markdown",
+      },
+      ...catalog.listDocNames().map((n) => ({
+        uri: docName(n),
+        name: `${n} — component manual`,
+        description: `Props, examples, and notes for <${n}>.`,
+        mimeType: "text/markdown",
+      })),
+    ];
+    return { resources };
+  });
+
+  server.setRequestHandler(ReadResourceRequestSchema, async (req) => {
+    const { uri } = req.params;
+    if (uri === SKILL_URI) {
+      const text = catalog.readSkill();
+      if (text == null) throw new Error("ai-skills/dreamtree-ui.md not found");
+      return { contents: [{ uri, mimeType: "text/markdown", text }] };
+    }
+    const m = uri.match(/^dreamtree:\/\/docs\/(.+)$/);
+    if (m) {
+      const text = catalog.readDoc(m[1]);
+      if (text == null) throw new Error(`No doc for "${m[1]}"`);
+      return { contents: [{ uri, mimeType: "text/markdown", text }] };
+    }
+    throw new Error(`Unknown resource: ${uri}`);
+  });
+
+  // --- prompt ---
+
+  server.setRequestHandler(ListPromptsRequestSchema, async () => ({
+    prompts: [
+      {
+        name: "compose_ui",
+        description: "Prime yourself to build a UI using @dreamtree-org/twreact-ui components correctly.",
+        arguments: [
+          { name: "task", description: "What you want to build (e.g. 'a settings form with a save button').", required: false },
+        ],
+      },
+    ],
+  }));
+
+  server.setRequestHandler(GetPromptRequestSchema, async (req) => {
+    const task = req.params.arguments?.task?.trim();
+    const c = catalog.buildCatalog();
+    const roster = c.components.map((x) => x.name).join(", ");
+    const text =
+      `You are composing a UI with **${PKG}** (a React 18 + Tailwind component library).\n\n` +
+      `Rules:\n` +
+      `- Reach for a library component before hand-rolling a <div> + Tailwind. Available components: ${roster}. ` +
+      `Hooks: ${c.hooks.map((h) => h.name).join(", ")}. Utils: ${c.utils.map((u) => u.name).join(", ")}.\n` +
+      `- Before using a component, call the get_component tool to confirm its exact props (names, variants, sizes, defaults).\n` +
+      `- Use the shared vocabulary: variant = primary|secondary|outline|ghost|destructive|success|warning; size = xs|sm|md|lg|xl. Never pass a raw color prop.\n` +
+      `- Wrap the tree in <ThemeProvider> when using dark mode or useTheme; <StoreProvider> only if using useMixins.\n` +
+      `- The consumer's tailwind.config.js content[] must include ./node_modules/${PKG}/dist/**/*.{js,mjs}.\n` +
+      `- Read the dreamtree://skill resource for full wiring + examples.\n` +
+      (task ? `\nTask: ${task}\n` : "");
+    return {
+      messages: [{ role: "user", content: { type: "text", text } }],
+    };
+  });
+
+  return server;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.1.49",
+  "version": "1.1.51",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",
@@ -17,6 +17,10 @@
   "files": [
     "dist",
     "bin/cli.mjs",
+    "mcp/server-core.mjs",
+    "mcp/catalog-core.mjs",
+    "mcp/catalog-snapshot.mjs",
+    "mcp/catalog.snapshot.json",
     "ai-skills",
     "package.json",
     "README.md"
@@ -41,8 +45,7 @@
     "mcp:smoke": "node mcp/smoke.mjs",
     "mcp:snapshot": "node scripts/gen-mcp-snapshot.mjs",
     "mcp:snapshot:check": "node scripts/check-mcp-snapshot.mjs",
-    "mcp:pkg:smoke": "node packages/mcp/smoke.mjs",
-    "mcp:version:align": "node scripts/align-mcp-version.mjs",
+    "mcp:dist:smoke": "node scripts/mcp-dist-smoke.mjs",
     "prepublishOnly": "npm run mcp:snapshot && npm run mcp:snapshot:check",
     "skill:check": "node mcp/skill-check.mjs",
     "init:smoke": "node bin/smoke.mjs",
@@ -58,8 +61,7 @@
     "release:patch": "npm run release && npm run version:patch",
     "release:minor": "npm run release && npm run version:minor",
     "release:major": "npm run release && npm run version:major",
-    "release:prerelease": "npm run release && npm run version:prerelease",
-    "release:mcp": "npm run mcp:snapshot && npm run mcp:snapshot:check && npm run mcp:pkg:smoke && npm run mcp:version:align && npm publish packages/mcp --access public"
+    "release:prerelease": "npm run release && npm run version:prerelease"
   },
   "keywords": [
     "react",
@@ -88,6 +90,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@reduxjs/toolkit": "^2.11.2",
     "axios": "^1.13.4",
     "clsx": "^1.2.1",
@@ -105,7 +108,6 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.0",
     "@babel/runtime": "^7.28.6",
-    "@modelcontextprotocol/sdk": "^1.29.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-node-resolve": "^15.3.1",