@webmcp-auto-ui/agent 2.5.11 → 2.5.14

package/README.md

@@ -4,12 +4,14 @@ LLM agent loop that connects MCP and WebMCP servers to a UI. Given a user messag
 
 ## Providers
 
-**AnthropicProvider** — proxies to a `+server.ts` endpoint that holds the API key. Supports `claude-haiku-4-5` and `claude-sonnet-4-6`. Prompt caching enabled by default. Retry on 503 with exponential backoff. Returns stats in `LLMResponse`: tok/s, totalTokens, latencyMs.
+**RemoteLLMProvider** — proxies to a `+server.ts` endpoint that holds the API key. Compatible with any OpenAI-compatible API backend (Anthropic, OpenAI, Google, Mistral, etc.). Prompt caching enabled by default. Retry on 503 with exponential backoff. Returns stats in `LLMResponse`: tok/s, totalTokens, latencyMs.
 
 **GemmaProvider (LiteRT)** — runs Gemma 4 models via `@mediapipe/tasks-genai` (LiteRT, formerly known as MediaPipe) directly on the **main thread**. Uses WebGPU when available. No API key required. Models are cached in **OPFS** (Origin Private File System) for instant reload after first download.
 
 > **v0.5.0 migration**: GemmaProvider was migrated from ONNX (`@huggingface/transformers`) to LiteRT (`@mediapipe/tasks-genai`). LiteRT is 2-4x faster on WebGPU and provides native Gemma 4 support. The provider now runs on the main thread because MediaPipe is incompatible with ES module workers.
 
+**LocalLLMProvider** — runs against a local Ollama instance (or any OpenAI-compatible local server: vLLM, LM Studio, llamafile). No API key required. Converts messages and tools to the OpenAI chat completions format automatically.
+
 **Gemma 4 prompt format** — uses `<|turn>...<turn|>` delimiters (instead of the Gemma 2/3 `<start_of_turn>...<end_of_turn>`).
 
 **Native tool calling** — Gemma 4 tool calls are parsed from `<|tool_call>call:name{args}<tool_call|>` format. No regex heuristics needed.
@@ -46,10 +48,10 @@ npm install @webmcp-auto-ui/agent
 ## Usage
 
 ```ts
-import { autoui, runAgentLoop, AnthropicProvider } from '@webmcp-auto-ui/agent';
+import { autoui, runAgentLoop, RemoteLLMProvider } from '@webmcp-auto-ui/agent';
 
 const result = await runAgentLoop('Show me sales data', {
-  provider: new AnthropicProvider({ proxyUrl: '/api/chat' }),
+  provider: new RemoteLLMProvider({ proxyUrl: '/api/chat' }),
   layers: [mcpClient.layer(), autoui.layer()],
   maxIterations: 5,
   callbacks: {
@@ -64,8 +66,6 @@ const result = await runAgentLoop('Show me sales data', {
 });
 ```
 
-> **Migration from Phase 7**: `onBlock` still works as a deprecated alias for `onWidget`. The `UILayer`, `SkillLayer`, `COMPONENT_TOOL`, `executeComponent`, and `componentRegistry` exports are removed — use `autoui.layer()` instead.
-
 ## TokenTracker
 
 Real-time usage metrics tracking across requests:
@@ -125,18 +125,19 @@ Requires `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Po
 
 ## API proxy (`+server.ts`)
 
-The `AnthropicProvider` sends requests to a local endpoint. The endpoint reads `ANTHROPIC_API_KEY` from the environment, or from `body.__apiKey` as a fallback (for cases where the key is provided at runtime).
+The `RemoteLLMProvider` sends requests to a local `+server.ts` endpoint that forwards them to the configured LLM API. The endpoint reads `LLM_API_KEY` from the environment, or from `body.__apiKey` as a fallback (for cases where the key is provided at runtime).
 
 ```ts
 // src/routes/api/chat/+server.ts
 import { env } from '$env/dynamic/private';
 export const POST: RequestHandler = async ({ request }) => {
   const body = await request.json();
-  const apiKey = body.__apiKey || env.ANTHROPIC_API_KEY;
+  const apiKey = body.__apiKey || env.LLM_API_KEY;
   delete body.__apiKey;
-  const res = await fetch('https://api.anthropic.com/v1/messages', {
+  // Forward to your LLM provider (Anthropic, OpenAI, Mistral, etc.)
+  const res = await fetch(LLM_ENDPOINT, {
     method: 'POST',
-    headers: { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01', 'Content-Type': 'application/json' },
+    headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   });
   return Response.json(await res.json());

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webmcp-auto-ui/agent",
-  "version": "2.5.11",
-  "description": "LLM agent loop + Anthropic/Gemma LiteRT providers + MCP wrapper",
+  "version": "2.5.14",
+  "description": "LLM agent loop + remote/WASM/local providers + MCP wrapper",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "sideEffects": true,
@@ -11,7 +11,7 @@
       "import": "./src/index.ts"
     },
     "./server": {
-      "import": "./src/server/anthropicProxy.ts"
+      "import": "./src/server/llmProxy.ts"
     }
   },
   "scripts": {

package/src/discovery-cache.ts

@@ -41,6 +41,39 @@ export class DiscoveryCache {
     this.servers.clear();
   }
 
+  /** All registered server prefixes */
+  serverPrefixes(): string[] {
+    return [...this.servers.keys()];
+  }
+
+  /** All recipes across all servers, tagged with their server prefix */
+  allRecipes(): Array<CachedRecipe & { server: string }> {
+    const result: Array<CachedRecipe & { server: string }> = [];
+    for (const [prefix, cache] of this.servers) {
+      for (const r of cache.recipes) result.push({ ...r, server: prefix });
+    }
+    return result;
+  }
+
+  /** All tools across all servers, tagged with their server prefix */
+  allTools(): Array<{ name: string; description?: string; inputSchema?: Record<string, unknown>; server: string }> {
+    const result: Array<{ name: string; description?: string; inputSchema?: Record<string, unknown>; server: string }> = [];
+    for (const [prefix, cache] of this.servers) {
+      for (const t of cache.tools) result.push({ ...t, server: prefix });
+    }
+    return result;
+  }
+
+  /** Recipe count for a specific server */
+  recipeCount(serverPrefix: string): number {
+    return this.servers.get(serverPrefix)?.recipes.length ?? 0;
+  }
+
+  /** Tool count for a specific server */
+  toolCount(serverPrefix: string): number {
+    return this.servers.get(serverPrefix)?.tools.length ?? 0;
+  }
+
   /**
    * Try to resolve a discovery tool call from cache.
    * Returns the result string if handled, or null if not a discovery tool.

package/src/index.ts

@@ -38,6 +38,11 @@ export type { WebMcpServer, WebMcpToolDef, WidgetEntry } from '@webmcp-auto-ui/c
 // Recipes
 export { WEBMCP_RECIPES, parseRecipe, parseRecipes } from './recipes/index.js';
 export { recipeRegistry, registerRecipes, filterRecipesByServer, formatRecipesForPrompt, formatMcpRecipesForPrompt } from './recipe-registry.js';
+export { filterRecipes, sortRecipes, recipeToMarkdown, recipeToDownloadBlob } from './recipe-browser.js';
+
+// Tool browser
+export { groupToolsByServer, formatToolSchema } from './tool-browser.js';
+export type { BrowsableTool } from './tool-browser.js';
 
 // Summarize
 export { summarizeChat } from './summarize.js';

package/src/recipe-browser.ts

@@ -0,0 +1,85 @@
+// recipe-browser — pure utility functions for browsing/filtering/exporting recipes
+
+/**
+ * Case-insensitive filter on name and description fields.
+ * Empty query returns all recipes.
+ */
+export function filterRecipes<T extends { name: string; description?: string }>(
+  recipes: T[],
+  query: string,
+): T[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return recipes;
+  return recipes.filter(
+    (r) =>
+      r.name.toLowerCase().includes(q) ||
+      (r.description && r.description.toLowerCase().includes(q)),
+  );
+}
+
+/**
+ * Returns a new array sorted alphabetically by name (case-insensitive).
+ * Does NOT mutate the input array.
+ */
+export function sortRecipes<T extends { name: string }>(recipes: T[]): T[] {
+  return [...recipes].sort((a, b) =>
+    a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
+  );
+}
+
+// Keys that belong in Recipe frontmatter (order matters for readability)
+const RECIPE_FM_KEYS = ['id', 'name', 'description', 'when', 'components_used', 'servers', 'layout'] as const;
+// Keys for McpRecipe frontmatter
+const MCP_FM_KEYS = ['name', 'description'] as const;
+
+function yamlValue(value: unknown): string {
+  if (value === null || value === undefined) return '""';
+  if (typeof value === 'string') return value.includes(':') || value.includes('#') || value.includes('\n') ? JSON.stringify(value) : value;
+  if (Array.isArray(value)) return `[${value.map((v) => JSON.stringify(v)).join(', ')}]`;
+  if (typeof value === 'object') return JSON.stringify(value);
+  return String(value);
+}
+
+/**
+ * Reconstructs a markdown file from a recipe object.
+ * Handles both Recipe (id, when, components_used, servers, layout, body)
+ * and McpRecipe (name, description, body?) shapes.
+ */
+export function recipeToMarkdown(recipe: Record<string, unknown>): string {
+  const isFullRecipe = 'id' in recipe || 'when' in recipe;
+  const fmKeys = isFullRecipe ? RECIPE_FM_KEYS : MCP_FM_KEYS;
+
+  const lines: string[] = ['---'];
+  for (const key of fmKeys) {
+    if (key in recipe && recipe[key] !== undefined) {
+      lines.push(`${key}: ${yamlValue(recipe[key])}`);
+    }
+  }
+  lines.push('---');
+
+  const body = typeof recipe.body === 'string' ? recipe.body.trim() : '';
+  if (body) {
+    lines.push('', body);
+  }
+
+  return lines.join('\n') + '\n';
+}
+
+function sanitizeFilename(raw: string): string {
+  return raw.replace(/\s+/g, '-').toLowerCase().replace(/[^a-z0-9_.-]/g, '');
+}
+
+/**
+ * Creates a downloadable Blob from a recipe object.
+ * Filename is derived from name or id, sanitized.
+ */
+export function recipeToDownloadBlob(
+  recipe: Record<string, unknown>,
+): { blob: Blob; filename: string } {
+  const md = recipeToMarkdown(recipe);
+  const rawName = (typeof recipe.name === 'string' && recipe.name)
+    || (typeof recipe.id === 'string' && recipe.id)
+    || 'recipe';
+  const filename = sanitizeFilename(rawName) + '.md';
+  return { blob: new Blob([md], { type: 'text/markdown' }), filename };
+}

package/src/server/{anthropicProxy.ts → llmProxy.ts}

@@ -1,9 +1,9 @@
 /**
- * Shared Anthropic proxy handler — used by all apps' /api/chat/+server.ts
+ * Shared LLM proxy handler — used by all apps' /api/chat/+server.ts
  * Accepts the parsed body (with __apiKey already extracted), the resolved
  * API key, and the optional model override from X-Model header.
  */
-export async function anthropicProxy(
+export async function llmProxy(
   body: Record<string, unknown>,
   apiKey: string,
   model?: string | null,

package/src/tool-browser.ts

@@ -0,0 +1,36 @@
+// tool-browser — pure utility functions for browsing/filtering tools
+
+export interface BrowsableTool {
+  name: string;
+  description?: string;
+  server?: string;
+  inputSchema?: Record<string, unknown>;
+}
+
+/**
+ * Group tools by server name.
+ * Returns a Map<serverName, tools[]> with alphabetically sorted tools in each group.
+ */
+export function groupToolsByServer(tools: BrowsableTool[]): Map<string, BrowsableTool[]> {
+  const map = new Map<string, BrowsableTool[]>();
+  for (const t of tools) {
+    const key = t.server || 'Unknown';
+    const arr = map.get(key) ?? [];
+    arr.push(t);
+    map.set(key, arr);
+  }
+  // Sort tools within each group
+  for (const [key, arr] of map) {
+    map.set(key, arr.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())));
+  }
+  return map;
+}
+
+/**
+ * Format a tool's input schema as a readable string.
+ * Returns pretty-printed JSON, or null if no schema.
+ */
+export function formatToolSchema(tool: BrowsableTool): string | null {
+  if (!tool.inputSchema) return null;
+  return JSON.stringify(tool.inputSchema, null, 2);
+}