@frontmcp/react 0.0.1

package/components/index.d.ts

@@ -0,0 +1,21 @@
+export { ComponentRegistry } from './ComponentRegistry';
+export type { ComponentRegistryEntry } from './ComponentRegistry';
+export { DynamicRenderer } from './DynamicRenderer';
+export type { DynamicRendererProps } from './DynamicRenderer';
+export { readDomById, readDomBySelector } from './DomResources';
+export type { DomResourceResult } from './DomResources';
+export { ToolForm } from './ToolForm';
+export type { ToolFormProps } from './ToolForm';
+export { PromptForm } from './PromptForm';
+export type { PromptFormProps } from './PromptForm';
+export { ResourceViewer } from './ResourceViewer';
+export type { ResourceViewerProps, ResourceContent } from './ResourceViewer';
+export { OutputDisplay } from './OutputDisplay';
+export type { OutputDisplayProps } from './OutputDisplay';
+export { AgentContent } from './AgentContent';
+export type { AgentContentProps } from './AgentContent';
+export { AgentSearch } from './AgentSearch';
+export type { AgentSearchProps, SearchInputRenderProps } from './AgentSearch';
+export { mcpComponent, mcpLazy } from './mcpComponent';
+export type { McpComponentOptions, McpComponentInstance, LazyFactory } from './mcpComponent';
+//# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/components/mcpComponent.d.ts

@@ -0,0 +1,48 @@
+/**
+ * mcpComponent — factory that wraps a React component + zod schema into
+ * an MCP-registered component.
+ *
+ * On mount, registers an MCP tool (via useDynamicTool with zod schema).
+ * When the agent calls the tool, data is validated against the zod schema
+ * and passed as typed props to the wrapped component.
+ *
+ * Supports:
+ * - Direct component wrapping
+ * - Inline function components
+ * - Lazy loading via () => import(...)
+ * - Table mode (columns option with null component)
+ */
+import React from 'react';
+import type { ReactNode, ReactElement, ComponentType } from 'react';
+import { z } from 'zod';
+import type { McpColumnDef } from '../types';
+/** Brand applied by mcpLazy to distinguish lazy imports from zero-arg components. */
+type McpLazyBrand = {
+    readonly __mcpLazy: true;
+};
+/** A branded lazy factory returned by mcpLazy(). */
+export type LazyFactory<Props> = (() => Promise<{
+    default: ComponentType<Props>;
+}>) & McpLazyBrand;
+/**
+ * Brand a factory function as a lazy import so mcpComponent can
+ * distinguish `() => import(...)` from zero-arg function components.
+ */
+export declare function mcpLazy<Props>(factory: () => Promise<{
+    default: ComponentType<Props>;
+}>): LazyFactory<Props>;
+export interface McpComponentOptions<S extends z.ZodObject<z.ZodRawShape>> {
+    name: string;
+    description?: string;
+    schema: S;
+    fallback?: ReactNode;
+    server?: string;
+    columns?: McpColumnDef[];
+}
+export interface McpComponentInstance<Props> extends React.FC<Partial<Props>> {
+    toolName: string;
+}
+type ComponentArg<Props> = ComponentType<Props> | ((props: Props) => ReactElement) | LazyFactory<Props> | null;
+export declare function mcpComponent<S extends z.ZodObject<z.ZodRawShape>>(component: ComponentArg<z.infer<S>>, options: McpComponentOptions<S>): McpComponentInstance<z.infer<S>>;
+export {};
+//# sourceMappingURL=mcpComponent.d.ts.map

package/components/mcpComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcpComponent.d.ts","sourceRoot":"","sources":["../../src/components/mcpComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAO7C,qFAAqF;AACrF,KAAK,YAAY,GAAG;IAAE,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAA;CAAE,CAAC;AAEjD,oDAAoD;AACpD,MAAM,MAAM,WAAW,CAAC,KAAK,IAAI,CAAC,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;CAAE,CAAC,CAAC,GAAG,YAAY,CAAC;AAEnG;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;CAAE,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAE5G;AAID,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,CAAE,SAAQ,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,CAAC,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,YAAY,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AA6C/G,wBAAgB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,EAC/D,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EACnC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAC9B,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAqGlC"}

package/esm/ai/index.mjs

@@ -0,0 +1,393 @@
+// libs/react/src/ai/useAITools.ts
+import { useState, useCallback as useCallback2, useEffect } from "react";
+import { formatToolsForPlatform, formatResultForPlatform } from "@frontmcp/sdk";
+
+// libs/react/src/hooks/useResolvedServer.ts
+import { useContext } from "react";
+
+// libs/react/src/provider/FrontMcpContext.ts
+import { createContext } from "react";
+
+// libs/react/src/components/ComponentRegistry.ts
+var ComponentRegistry = class {
+  entries = /* @__PURE__ */ new Map();
+  register(uri, component, meta) {
+    const name = extractName(uri);
+    this.entries.set(uri, { uri, name, component, description: meta?.description });
+  }
+  registerAll(map) {
+    for (const [uri, component] of Object.entries(map)) {
+      this.register(uri, component);
+    }
+  }
+  get(uri) {
+    return this.entries.get(uri)?.component;
+  }
+  /**
+   * Resolve a shorthand name like `'UserCard'` by trying
+   * `component://UserCard`, `element://UserCard`, `page://UserCard`.
+   */
+  resolve(type) {
+    const exact = this.entries.get(type);
+    if (exact) return exact.component;
+    for (const protocol of ["component://", "element://", "page://"]) {
+      const entry = this.entries.get(`${protocol}${type}`);
+      if (entry) return entry.component;
+    }
+    return void 0;
+  }
+  has(uri) {
+    return this.entries.has(uri);
+  }
+  list() {
+    return Array.from(this.entries.values()).map(({ uri, name, description }) => ({
+      uri,
+      name,
+      description
+    }));
+  }
+  clear() {
+    this.entries.clear();
+  }
+};
+function extractName(uri) {
+  const idx = uri.indexOf("://");
+  return idx >= 0 ? uri.slice(idx + 3) : uri;
+}
+
+// libs/react/src/registry/DynamicRegistry.ts
+var DynamicRegistry = class {
+  tools = /* @__PURE__ */ new Map();
+  resources = /* @__PURE__ */ new Map();
+  toolRefCounts = /* @__PURE__ */ new Map();
+  resourceRefCounts = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  version = 0;
+  /**
+   * Register a dynamic tool. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same name are ref-counted:
+   * subsequent registrations update the definition but the tool
+   * is only removed when every registrant has unregistered.
+   */
+  registerTool(def) {
+    const existing = this.toolRefCounts.get(def.name) ?? 0;
+    this.toolRefCounts.set(def.name, existing + 1);
+    this.tools.set(def.name, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterTool(def.name);
+    };
+  }
+  unregisterTool(name) {
+    const count = this.toolRefCounts.get(name);
+    if (count == null) return;
+    if (count <= 1) {
+      this.toolRefCounts.delete(name);
+      this.tools.delete(name);
+      this.notify();
+    } else {
+      this.toolRefCounts.set(name, count - 1);
+    }
+  }
+  /**
+   * Register a dynamic resource. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same URI are ref-counted.
+   */
+  registerResource(def) {
+    const existing = this.resourceRefCounts.get(def.uri) ?? 0;
+    this.resourceRefCounts.set(def.uri, existing + 1);
+    this.resources.set(def.uri, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterResource(def.uri);
+    };
+  }
+  unregisterResource(uri) {
+    const count = this.resourceRefCounts.get(uri);
+    if (count == null) return;
+    if (count <= 1) {
+      this.resourceRefCounts.delete(uri);
+      this.resources.delete(uri);
+      this.notify();
+    } else {
+      this.resourceRefCounts.set(uri, count - 1);
+    }
+  }
+  /** Update the execute function for an existing tool (for stale closure prevention). */
+  updateToolExecute(name, execute) {
+    const existing = this.tools.get(name);
+    if (existing) {
+      existing.execute = execute;
+    }
+  }
+  /** Update the read function for an existing resource and notify subscribers. */
+  updateResourceRead(uri, read) {
+    const existing = this.resources.get(uri);
+    if (existing) {
+      existing.read = read;
+      this.notify();
+    }
+  }
+  getTools() {
+    return [...this.tools.values()];
+  }
+  getResources() {
+    return [...this.resources.values()];
+  }
+  findTool(name) {
+    return this.tools.get(name);
+  }
+  findResource(uri) {
+    return this.resources.get(uri);
+  }
+  hasTool(name) {
+    return this.tools.has(name);
+  }
+  hasResource(uri) {
+    return this.resources.has(uri);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getVersion() {
+    return this.version;
+  }
+  clear() {
+    if (this.tools.size === 0 && this.resources.size === 0) return;
+    this.tools.clear();
+    this.resources.clear();
+    this.toolRefCounts.clear();
+    this.resourceRefCounts.clear();
+    this.notify();
+  }
+  notify() {
+    this.version++;
+    this.listeners.forEach((l) => {
+      l();
+    });
+  }
+};
+
+// libs/react/src/provider/FrontMcpContext.ts
+var defaultDynamicRegistry = new DynamicRegistry();
+var FrontMcpContext = createContext({
+  name: "default",
+  registry: new ComponentRegistry(),
+  dynamicRegistry: defaultDynamicRegistry,
+  getDynamicRegistry: () => defaultDynamicRegistry,
+  connect: async () => {
+  }
+});
+
+// libs/react/src/hooks/useServer.ts
+import { useSyncExternalStore, useCallback } from "react";
+
+// libs/react/src/registry/ServerRegistry.ts
+var ServerRegistry = class {
+  entries = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  version = 0;
+  register(name, server) {
+    this.entries.set(name, {
+      server,
+      client: null,
+      status: "idle",
+      error: null,
+      tools: [],
+      resources: [],
+      resourceTemplates: [],
+      prompts: []
+    });
+    this.notify();
+  }
+  unregister(name) {
+    this.entries.delete(name);
+    this.notify();
+  }
+  get(name) {
+    return this.entries.get(name);
+  }
+  has(name) {
+    return this.entries.has(name);
+  }
+  list() {
+    return [...this.entries.keys()];
+  }
+  async connect(name) {
+    const entry = this.entries.get(name);
+    if (!entry) throw new Error(`Server "${name}" not registered`);
+    if (entry.client) return entry.client;
+    this.entries.set(name, { ...entry, status: "connecting", error: null });
+    this.notify();
+    try {
+      const client = await entry.server.connect();
+      const [toolsResult, resourcesResult, templatesResult, promptsResult] = await Promise.all([
+        client.listTools(),
+        client.listResources(),
+        client.listResourceTemplates(),
+        client.listPrompts()
+      ]);
+      const connected = {
+        ...entry,
+        client,
+        tools: toolsResult,
+        resources: resourcesResult.resources ?? [],
+        resourceTemplates: templatesResult.resourceTemplates ?? [],
+        prompts: promptsResult.prompts ?? [],
+        status: "connected",
+        error: null
+      };
+      this.entries.set(name, connected);
+      this.notify();
+      return client;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.entries.set(name, { ...entry, error, status: "error" });
+      this.notify();
+      throw error;
+    }
+  }
+  async connectAll() {
+    await Promise.all(this.list().map((name) => this.connect(name)));
+  }
+  update(name, partial) {
+    const entry = this.entries.get(name);
+    if (entry) {
+      this.entries.set(name, { ...entry, ...partial });
+      this.notify();
+    }
+  }
+  clear() {
+    this.entries.clear();
+    this.notify();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getVersion() {
+    return this.version;
+  }
+  notify() {
+    this.version++;
+    this.listeners.forEach((l) => l());
+  }
+};
+var serverRegistry = new ServerRegistry();
+
+// libs/react/src/hooks/useServer.ts
+function useServer(name) {
+  const subscribe = useCallback((cb) => serverRegistry.subscribe(cb), []);
+  const getSnapshot = useCallback(() => {
+    return serverRegistry.get(name ?? "default");
+  }, [name]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+// libs/react/src/hooks/useResolvedServer.ts
+function useResolvedServer(serverName) {
+  const ctx = useContext(FrontMcpContext);
+  const resolvedName = serverName ?? ctx.name;
+  const entry = useServer(resolvedName);
+  return { entry, name: resolvedName, registry: ctx.registry, connect: ctx.connect };
+}
+
+// libs/react/src/ai/useAITools.ts
+function useAITools(platform, options) {
+  const { entry } = useResolvedServer(options?.server);
+  const server = entry?.server ?? null;
+  const toolInfos = entry?.tools ?? [];
+  const status = entry?.status ?? "idle";
+  const [formattedTools, setFormattedTools] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (status !== "connected" || toolInfos.length === 0) {
+      setFormattedTools(null);
+      setLoading(status !== "connected" && status !== "error");
+      return;
+    }
+    try {
+      const mcpTools = toolInfos.filter((t) => t.inputSchema != null).map((t) => ({ name: t.name, description: t.description, inputSchema: t.inputSchema }));
+      if (mcpTools.length === 0) {
+        setFormattedTools(null);
+        setLoading(false);
+        return;
+      }
+      const formatted = formatToolsForPlatform(
+        mcpTools,
+        platform
+      );
+      setFormattedTools(formatted);
+      setLoading(false);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setLoading(false);
+    }
+  }, [toolInfos, platform, status]);
+  const callTool = useCallback2(
+    async (name, args) => {
+      if (!server) {
+        throw new Error("FrontMCP server not available");
+      }
+      try {
+        const rawResult = await server.callTool(name, args);
+        return formatResultForPlatform(rawResult, platform);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      }
+    },
+    [server, platform]
+  );
+  return { tools: formattedTools, callTool, loading, error };
+}
+
+// libs/react/src/ai/useTools.ts
+import { useCallback as useCallback3 } from "react";
+import { processPlatformToolCalls } from "@frontmcp/utils";
+function useTools(platform, options) {
+  const { tools, callTool, loading, error } = useAITools(platform, options);
+  const processToolCalls = useCallback3(
+    (calls) => processPlatformToolCalls(platform, calls, callTool),
+    [platform, callTool]
+  );
+  return { tools, processToolCalls, loading, error };
+}
+
+// libs/react/src/ai/createToolHandler.ts
+import { formatResultForPlatform as formatResultForPlatform2 } from "@frontmcp/sdk";
+function createToolCallHandler(server, platform) {
+  return {
+    callTool: async (name, args) => {
+      const rawResult = await server.callTool(name, args);
+      return formatResultForPlatform2(rawResult, platform);
+    }
+  };
+}
+export {
+  createToolCallHandler,
+  useAITools,
+  useTools
+};