@frontmcp/skills 1.0.0-beta.13 → 1.0.0-beta.14

package/catalog/frontmcp-config/references/configure-transport.md

@@ -194,6 +194,16 @@ curl -X POST http://localhost:3001/ -H 'Content-Type: application/json' -d '{"js
 | Session not found after server restart | In-memory sessions do not survive restarts                                 | Enable Redis persistence with `distributedMode: true`                                      |
 | Streamable HTTP returns 404            | Streamable HTTP is not enabled in the current preset                       | Use `'modern'`, `'legacy'`, or `'full'` preset, or set `streamable: true` in custom config |
 
+## Examples
+
+| Example                                                                                       | Level        | Description                                                                              |
+| --------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------- |
+| [`custom-protocol-flags`](../examples/configure-transport/custom-protocol-flags.md)           | Advanced     | Override individual protocol flags instead of using a preset for fine-grained control.   |
+| [`distributed-sessions-redis`](../examples/configure-transport/distributed-sessions-redis.md) | Intermediate | Configure transport with Redis persistence for multi-instance load-balanced deployments. |
+| [`stateless-serverless`](../examples/configure-transport/stateless-serverless.md)             | Basic        | Configure stateless transport for Vercel, Lambda, or Cloudflare deployments.             |
+
+> See all examples in [`examples/configure-transport/`](../examples/configure-transport/)
+
 ## Reference
 
 - **Docs:** [Runtime Modes and Transport Configuration](https://docs.agentfront.dev/frontmcp/deployment/runtime-modes)

package/catalog/frontmcp-config/references/setup-redis.md

@@ -7,3 +7,8 @@ description: Cross-reference to the full Redis configuration guide in frontmcp-s
 
 > This reference is maintained in `frontmcp-setup/references/setup-redis.md`.
 > See that file for the full Redis configuration guide including connection options, Vercel KV setup, Docker Compose examples, and troubleshooting.
+
+## Examples
+
+> Examples for Redis setup are maintained alongside the canonical reference.
+> See [`frontmcp-setup/examples/setup-redis/`](../../frontmcp-setup/examples/setup-redis/).

package/catalog/frontmcp-config/references/setup-sqlite.md

@@ -7,3 +7,8 @@ description: Cross-reference to the full SQLite configuration guide in frontmcp-
 
 > This reference is maintained in `frontmcp-setup/references/setup-sqlite.md`.
 > See that file for the full SQLite configuration guide including WAL mode, encryption, daemon mode, and troubleshooting.
+
+## Examples
+
+> Examples for SQLite setup are maintained alongside the canonical reference.
+> See [`frontmcp-setup/examples/setup-sqlite/`](../../frontmcp-setup/examples/setup-sqlite/).

package/catalog/frontmcp-deployment/SKILL.md

@@ -9,7 +9,7 @@ priority: 10
 visibility: both
 license: Apache-2.0
 metadata:
-  docs: https://docs.agentfront.dev/frontmcp/deployment/overview
+  docs: https://docs.agentfront.dev/frontmcp/deployment/runtime-modes
 ---
 
 # FrontMCP Deployment Router
@@ -148,5 +148,5 @@ Beyond `frontmcp build`, the CLI provides commands for the full deployment lifec
 
 ## Reference
 
-- [Deployment Overview](https://docs.agentfront.dev/frontmcp/deployment/overview)
+- [Runtime Modes](https://docs.agentfront.dev/frontmcp/deployment/runtime-modes)
 - Related skills: `deploy-to-node`, `deploy-to-vercel`, `deploy-to-lambda`, `deploy-to-cloudflare`, `build-for-cli`, `build-for-browser`, `build-for-sdk`, `configure-transport`

package/catalog/frontmcp-deployment/examples/build-for-browser/browser-build-with-custom-entry.md

@@ -0,0 +1,43 @@
+---
+name: browser-build-with-custom-entry
+reference: build-for-browser
+level: intermediate
+description: 'Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports.'
+tags: [deployment, browser, node, custom, entry]
+features:
+  - 'Creating a separate browser entry point (`src/client.ts`) that avoids importing Node.js-only modules like `fs` or `node:crypto`'
+  - 'Using the `-e` and `-o` flags to customize the entry file and output directory'
+---
+
+# Browser Build with Custom Entry
+
+Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports.
+
+## Code
+
+```typescript
+// src/client.ts
+// Browser-safe entry point - no Node.js modules imported here
+import { FrontMcpProvider, useTools, useResources } from '@frontmcp/react';
+
+export { FrontMcpProvider, useTools, useResources };
+```
+
+```bash
+# Build with custom entry and output directory
+frontmcp build --target browser -e ./src/client.ts -o ./dist/browser
+```
+
+```bash
+# Verify output contains no Node.js-only modules
+ls dist/browser/
+```
+
+## What This Demonstrates
+
+- Creating a separate browser entry point (`src/client.ts`) that avoids importing Node.js-only modules like `fs` or `node:crypto`
+- Using the `-e` and `-o` flags to customize the entry file and output directory
+
+## Related
+
+- See `build-for-browser` for the full browser limitations table and verification checklist

package/catalog/frontmcp-deployment/examples/build-for-browser/browser-crypto-and-storage.md

@@ -0,0 +1,85 @@
+---
+name: browser-crypto-and-storage
+reference: build-for-browser
+level: advanced
+description: 'Use `@frontmcp/utils` crypto functions (WebCrypto API) and in-memory storage in browser environments.'
+tags: [deployment, browser, database, remote, node, crypto]
+features:
+  - 'Using `@frontmcp/utils` for PKCE and hashing in the browser (backed by WebCrypto, not `node:crypto`)'
+  - 'Avoiding filesystem and native database storage in browser builds by relying on a remote server for persistence'
+---
+
+# Browser-Safe Crypto and Storage
+
+Use `@frontmcp/utils` crypto functions (WebCrypto API) and in-memory storage in browser environments.
+
+## Code
+
+```typescript
+// src/browser-auth.ts
+import { generateCodeVerifier, generateCodeChallenge, sha256Base64url, randomUUID } from '@frontmcp/utils';
+
+// PKCE flow in the browser - uses WebCrypto API automatically
+async function startPkceFlow(): Promise<{
+  verifier: string;
+  challenge: string;
+  state: string;
+}> {
+  const verifier = generateCodeVerifier();
+  const challenge = await generateCodeChallenge(verifier);
+  const state = randomUUID();
+
+  return { verifier, challenge, state };
+}
+
+// Hash a value using WebCrypto (works in browsers)
+async function hashToken(token: string): Promise<string> {
+  return sha256Base64url(token);
+}
+
+export { startPkceFlow, hashToken };
+```
+
+```typescript
+// src/client-app.tsx
+import { FrontMcpProvider, useTools } from '@frontmcp/react';
+
+// Browser environments cannot use Redis or SQLite.
+// Use in-memory stores or connect to a remote server that handles persistence.
+function App() {
+  return (
+    <FrontMcpProvider
+      config={{
+        serverUrl: 'https://my-mcp.example.com',
+        // No local storage config - the remote server handles persistence
+      }}
+    >
+      <ToolDashboard />
+    </FrontMcpProvider>
+  );
+}
+
+function ToolDashboard() {
+  const { tools, callTool } = useTools();
+
+  return (
+    <div>
+      <h1>MCP Tools</h1>
+      {tools.map((tool) => (
+        <div key={tool.name}>{tool.name}</div>
+      ))}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## What This Demonstrates
+
+- Using `@frontmcp/utils` for PKCE and hashing in the browser (backed by WebCrypto, not `node:crypto`)
+- Avoiding filesystem and native database storage in browser builds by relying on a remote server for persistence
+
+## Related
+
+- See `build-for-browser` for the complete browser support table and troubleshooting guide

package/catalog/frontmcp-deployment/examples/build-for-browser/react-provider-setup.md

@@ -0,0 +1,61 @@
+---
+name: react-provider-setup
+reference: build-for-browser
+level: basic
+description: 'Connect a React application to a remote FrontMCP server using `@frontmcp/react`.'
+tags: [deployment, react, browser, remote, provider, setup]
+features:
+  - 'Wrapping your React app with `FrontMcpProvider` and pointing it at a remote server URL'
+  - 'Using the `useTools` hook to list and invoke MCP tools from a React component'
+---
+
+# React Provider Setup
+
+Connect a React application to a remote FrontMCP server using `@frontmcp/react`.
+
+## Code
+
+```typescript
+// src/App.tsx
+import { FrontMcpProvider, useTools } from '@frontmcp/react';
+
+function App() {
+  return (
+    <FrontMcpProvider config={{ serverUrl: 'https://my-mcp.example.com' }}>
+      <ToolUI />
+    </FrontMcpProvider>
+  );
+}
+
+function ToolUI() {
+  const { tools, callTool } = useTools();
+
+  const handleClick = async (toolName: string) => {
+    const result = await callTool(toolName, { query: 'hello' });
+    console.log(result);
+  };
+
+  return (
+    <ul>
+      {tools.map((tool) => (
+        <li key={tool.name}>
+          <button onClick={() => handleClick(tool.name)}>
+            {tool.name}: {tool.description}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default App;
+```
+
+## What This Demonstrates
+
+- Wrapping your React app with `FrontMcpProvider` and pointing it at a remote server URL
+- Using the `useTools` hook to list and invoke MCP tools from a React component
+
+## Related
+
+- See `build-for-browser` for the full build command and browser limitations

package/catalog/frontmcp-deployment/examples/build-for-cli/cli-binary-build.md

@@ -0,0 +1,66 @@
+---
+name: cli-binary-build
+reference: build-for-cli
+level: basic
+description: 'Build a FrontMCP server as a standalone binary using Node.js Single Executable Applications (SEA).'
+tags: [deployment, cli, local, node, binary]
+features:
+  - 'Building a FrontMCP server as a self-contained binary with `--target cli`'
+  - 'Using `socketPath` for local communication instead of a TCP port'
+  - 'The `--js` flag to produce a bundled JS file without the native binary wrapper'
+---
+
+# CLI Binary Build
+
+Build a FrontMCP server as a standalone binary using Node.js Single Executable Applications (SEA).
+
+## Code
+
+```typescript
+// src/main.ts
+import { FrontMcp, App, Tool, ToolContext } from '@frontmcp/sdk';
+import { z } from 'zod';
+
+@Tool({
+  name: 'greet',
+  description: 'Greet a user by name',
+  inputSchema: { name: z.string() },
+})
+class GreetTool extends ToolContext<{ name: string }> {
+  async execute(input: { name: string }) {
+    return { content: [{ type: 'text' as const, text: `Hello, ${input.name}!` }] };
+  }
+}
+
+@App({ name: 'GreeterApp', tools: [GreetTool] })
+class GreeterApp {}
+
+@FrontMcp({
+  info: { name: 'greeter-cli', version: '1.0.0' },
+  apps: [GreeterApp],
+  http: { socketPath: '/tmp/greeter.sock' },
+})
+class GreeterCLI {}
+```
+
+```bash
+# Build the SEA binary (requires Node.js 24+)
+frontmcp build --target cli
+
+# Test the binary
+./dist/greeter-cli --help
+
+# Or build a JS bundle only (no SEA)
+frontmcp build --target cli --js
+node dist/greeter-cli.cjs.js
+```
+
+## What This Demonstrates
+
+- Building a FrontMCP server as a self-contained binary with `--target cli`
+- Using `socketPath` for local communication instead of a TCP port
+- The `--js` flag to produce a bundled JS file without the native binary wrapper
+
+## Related
+
+- See `build-for-cli` for SEA requirements, process management, and system service installation

package/catalog/frontmcp-deployment/examples/build-for-cli/unix-socket-daemon.md

@@ -0,0 +1,76 @@
+---
+name: unix-socket-daemon
+reference: build-for-cli
+level: intermediate
+description: 'Run a FrontMCP server as a local daemon accessible via Unix socket for IDE extensions and local MCP clients.'
+tags: [deployment, unix-socket, cli, transport, local, unix]
+features:
+  - 'Configuring a FrontMCP server for Unix socket transport instead of TCP'
+  - 'Running the server as a background daemon with process management (`frontmcp start/stop/status`)'
+  - 'Installing the daemon as a system service for automatic startup on reboot'
+---
+
+# Unix Socket Daemon Mode
+
+Run a FrontMCP server as a local daemon accessible via Unix socket for IDE extensions and local MCP clients.
+
+## Code
+
+```typescript
+// src/main.ts
+import { FrontMcp, App, Tool, ToolContext } from '@frontmcp/sdk';
+import { z } from 'zod';
+
+@Tool({
+  name: 'lookup',
+  description: 'Look up a term in the local database',
+  inputSchema: { term: z.string() },
+})
+class LookupTool extends ToolContext<{ term: string }> {
+  async execute(input: { term: string }) {
+    return { content: [{ type: 'text' as const, text: `Result for: ${input.term}` }] };
+  }
+}
+
+@App({ name: 'DaemonApp', tools: [LookupTool] })
+class DaemonApp {}
+
+@FrontMcp({
+  info: { name: 'my-daemon', version: '1.0.0' },
+  apps: [DaemonApp],
+  http: { socketPath: '/tmp/my-tool.sock' },
+  sqlite: { path: '~/.my-tool/data.db' },
+})
+class MyDaemonServer {}
+```
+
+```bash
+# Start daemon in foreground
+frontmcp socket ./src/main.ts -s ~/.frontmcp/sockets/my-app.sock
+
+# Start daemon in background with a local database
+frontmcp socket ./src/main.ts -b --db ~/.my-tool/data.db
+
+# Manage the daemon process
+frontmcp start my-daemon -e ./src/main.ts --max-restarts 5
+frontmcp status my-daemon
+frontmcp logs my-daemon -F
+frontmcp stop my-daemon
+```
+
+```bash
+# Install as a system service for automatic startup
+# Linux: creates a systemd unit
+# macOS: creates a launchd plist
+frontmcp service install my-daemon
+```
+
+## What This Demonstrates
+
+- Configuring a FrontMCP server for Unix socket transport instead of TCP
+- Running the server as a background daemon with process management (`frontmcp start/stop/status`)
+- Installing the daemon as a system service for automatic startup on reboot
+
+## Related
+
+- See `build-for-cli` for the full process management and system service reference

package/catalog/frontmcp-deployment/examples/build-for-sdk/connect-openai.md

@@ -0,0 +1,78 @@
+---
+name: connect-openai
+reference: build-for-sdk
+level: intermediate
+description: "Use `connectOpenAI()` to get tools formatted for OpenAI's function-calling API."
+tags: [deployment, sdk, openai, session, connect]
+features:
+  - 'Setting `serve: false` to prevent the HTTP server from starting in library mode'
+  - 'Using `connectOpenAI()` to get tools in OpenAI function-calling format automatically'
+  - 'Passing session information via `ConnectOptions` for user context'
+---
+
+# Connect to OpenAI Function Calling
+
+Use `connectOpenAI()` to get tools formatted for OpenAI's function-calling API.
+
+## Code
+
+```typescript
+// src/openai-integration.ts
+import { FrontMcp, App, Tool, ToolContext } from '@frontmcp/sdk';
+import { connectOpenAI } from '@frontmcp/sdk';
+import { z } from 'zod';
+
+@Tool({
+  name: 'search_docs',
+  description: 'Search documentation by keyword',
+  inputSchema: { query: z.string(), limit: z.number().optional() },
+})
+class SearchDocsTool extends ToolContext<{ query: string; limit?: number }> {
+  async execute(input: { query: string; limit?: number }) {
+    return {
+      content: [{ type: 'text' as const, text: `Found results for: ${input.query}` }],
+    };
+  }
+}
+
+@App({ name: 'DocsApp', tools: [SearchDocsTool] })
+class DocsApp {}
+
+@FrontMcp({
+  info: { name: 'docs-sdk', version: '1.0.0' },
+  apps: [DocsApp],
+  serve: false, // No HTTP server - library mode only
+})
+class DocsSDK {}
+
+// Connect with OpenAI-formatted tools
+async function main() {
+  const client = await connectOpenAI(DocsSDK, {
+    session: { id: 'user-123', user: { sub: 'user-id' } },
+  });
+
+  // Tools are returned in OpenAI format:
+  // [{ type: 'function', function: { name, description, parameters, strict: true } }]
+  const tools = await client.listTools();
+  console.log(JSON.stringify(tools, null, 2));
+
+  // Call a tool
+  const result = await client.callTool('search_docs', { query: 'authentication' });
+  console.log(result);
+
+  // Always clean up
+  await client.close();
+}
+
+main();
+```
+
+## What This Demonstrates
+
+- Setting `serve: false` to prevent the HTTP server from starting in library mode
+- Using `connectOpenAI()` to get tools in OpenAI function-calling format automatically
+- Passing session information via `ConnectOptions` for user context
+
+## Related
+
+- See `build-for-sdk` for `connectClaude()`, `connectLangChain()`, and `connectVercelAI()` alternatives

package/catalog/frontmcp-deployment/examples/build-for-sdk/create-flat-config.md

@@ -0,0 +1,85 @@
+---
+name: create-flat-config
+reference: build-for-sdk
+level: basic
+description: 'Spin up an in-memory FrontMCP server from a flat config object using `create()`.'
+tags: [deployment, sdk, cache, flat, config]
+features:
+  - 'Using `create()` to spin up a server without decorators or classes'
+  - 'Calling tools directly via `server.callTool()` with zero network overhead'
+  - 'Using `cacheKey` to reuse the same server instance across multiple calls'
+---
+
+# Programmatic Server with create()
+
+Spin up an in-memory FrontMCP server from a flat config object using `create()`.
+
+## Code
+
+```typescript
+// src/embedded-server.ts
+import { create, tool } from '@frontmcp/sdk';
+import { z } from 'zod';
+
+async function main() {
+  const server = await create({
+    info: { name: 'my-service', version: '1.0.0' },
+    tools: [
+      tool({
+        name: 'calculate',
+        description: 'Perform calculation',
+        inputSchema: {
+          a: z.number(),
+          b: z.number(),
+          operation: z.enum(['add', 'subtract', 'multiply', 'divide']),
+        },
+        outputSchema: { result: z.number() },
+      })((input) => {
+        switch (input.operation) {
+          case 'add':
+            return { result: input.a + input.b };
+          case 'subtract':
+            return { result: input.a - input.b };
+          case 'multiply':
+            return { result: input.a * input.b };
+          case 'divide':
+            return { result: input.a / input.b };
+        }
+      }),
+    ],
+    cacheKey: 'my-service', // Reuse same instance on repeated calls
+  });
+
+  // Call tools directly - no HTTP involved
+  const result = await server.callTool('calculate', { a: 2, b: 2, operation: 'add' });
+  console.log(result); // { result: 4 }
+
+  // List available tools
+  const { tools } = await server.listTools();
+  console.log(tools.map((t) => t.name)); // ['calculate']
+
+  // Clean up when done
+  await server.dispose();
+}
+
+main();
+```
+
+```bash
+# Build as an SDK library
+frontmcp build --target sdk
+
+# Verify outputs
+ls dist/
+# my-service.cjs.js  my-service.esm.mjs  *.d.ts
+```
+
+## What This Demonstrates
+
+- Using `create()` to spin up a server without decorators or classes
+- Calling tools directly via `server.callTool()` with zero network overhead
+- Using `cacheKey` to reuse the same server instance across multiple calls
+
+## Related
+
+- See `build-for-sdk` for the full `CreateConfig` fields and `DirectClient` API

package/catalog/frontmcp-deployment/examples/build-for-sdk/multi-platform-connect.md

@@ -0,0 +1,104 @@
+---
+name: multi-platform-connect
+reference: build-for-sdk
+level: advanced
+description: 'Connect the same FrontMCP server to multiple LLM platforms using platform-specific `connect*()` functions.'
+tags: [deployment, sdk, multi, platform, connect]
+features:
+  - 'Connecting a single FrontMCP server to four different LLM platforms with automatic schema translation'
+  - "Each `connect*()` function returns tools in the platform's native format"
+  - 'All clients share the same `DirectClient` API (`listTools`, `callTool`, `close`)'
+---
+
+# Multi-Platform Tool Connection
+
+Connect the same FrontMCP server to multiple LLM platforms using platform-specific `connect*()` functions.
+
+## Code
+
+```typescript
+// src/server.ts
+import { FrontMcp, App, Tool, ToolContext } from '@frontmcp/sdk';
+import { z } from 'zod';
+
+@Tool({
+  name: 'translate',
+  description: 'Translate text to a target language',
+  inputSchema: { text: z.string(), targetLang: z.string() },
+})
+class TranslateTool extends ToolContext<{ text: string; targetLang: string }> {
+  async execute(input: { text: string; targetLang: string }) {
+    return {
+      content: [{ type: 'text' as const, text: `[${input.targetLang}] ${input.text}` }],
+    };
+  }
+}
+
+@App({ name: 'TranslateApp', tools: [TranslateTool] })
+class TranslateApp {}
+
+@FrontMcp({
+  info: { name: 'translate-sdk', version: '1.0.0' },
+  apps: [TranslateApp],
+  serve: false,
+})
+class TranslateSDK {}
+
+export default TranslateSDK;
+```
+
+```typescript
+// src/connect-all-platforms.ts
+import { connectOpenAI, connectClaude, connectLangChain, connectVercelAI } from '@frontmcp/sdk';
+import TranslateSDK from './server';
+
+async function main() {
+  // OpenAI format: [{ type: 'function', function: { name, description, parameters, strict: true } }]
+  const openaiClient = await connectOpenAI(TranslateSDK, {
+    clientInfo: { name: 'my-app', version: '1.0' },
+    session: { id: 'session-1', user: { sub: 'user-1', name: 'Alice' } },
+  });
+  const openaiTools = await openaiClient.listTools();
+  console.log('OpenAI tools:', openaiTools);
+
+  // Claude format: [{ name, description, input_schema }]
+  const claudeClient = await connectClaude(TranslateSDK);
+  const claudeTools = await claudeClient.listTools();
+  console.log('Claude tools:', claudeTools);
+
+  // LangChain tool schema format
+  const langchainClient = await connectLangChain(TranslateSDK);
+  const langchainTools = await langchainClient.listTools();
+  console.log('LangChain tools:', langchainTools);
+
+  // Vercel AI SDK format
+  const vercelClient = await connectVercelAI(TranslateSDK);
+  const vercelTools = await vercelClient.listTools();
+  console.log('Vercel AI tools:', vercelTools);
+
+  // All clients share the same DirectClient API
+  const result = await openaiClient.callTool('translate', {
+    text: 'Hello',
+    targetLang: 'es',
+  });
+  console.log(result);
+
+  // Clean up all clients
+  await openaiClient.close();
+  await claudeClient.close();
+  await langchainClient.close();
+  await vercelClient.close();
+}
+
+main();
+```
+
+## What This Demonstrates
+
+- Connecting a single FrontMCP server to four different LLM platforms with automatic schema translation
+- Each `connect*()` function returns tools in the platform's native format
+- All clients share the same `DirectClient` API (`listTools`, `callTool`, `close`)
+
+## Related
+
+- See `build-for-sdk` for the full `DirectClient` API reference and `ConnectOptions` details