@frontmcp/skills 1.1.2-beta.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/catalog/TEMPLATE.md +16 -11
  2. package/catalog/frontmcp-authorities/SKILL.md +116 -11
  3. package/catalog/frontmcp-authorities/references/authority-profiles.md +39 -36
  4. package/catalog/frontmcp-authorities/references/claims-mapping.md +7 -0
  5. package/catalog/frontmcp-authorities/references/custom-evaluators.md +63 -14
  6. package/catalog/frontmcp-channels/SKILL.md +36 -0
  7. package/catalog/frontmcp-channels/examples/channel-sources/file-watcher.md +8 -2
  8. package/catalog/frontmcp-channels/examples/channel-sources/replay-buffer.md +111 -30
  9. package/catalog/frontmcp-channels/examples/channel-two-way/whatsapp-bridge.md +45 -3
  10. package/catalog/frontmcp-channels/references/channel-sources.md +11 -3
  11. package/catalog/frontmcp-channels/references/channel-two-way.md +60 -89
  12. package/catalog/frontmcp-config/SKILL.md +111 -8
  13. package/catalog/frontmcp-config/examples/configure-auth-modes/local-self-signed-tokens.md +4 -4
  14. package/catalog/frontmcp-config/examples/configure-auth-modes/remote-enterprise-oauth.md +7 -1
  15. package/catalog/frontmcp-config/examples/configure-deployment-targets/distributed-ha-config.md +1 -1
  16. package/catalog/frontmcp-config/examples/configure-deployment-targets/json-schema-ide-support.md +1 -1
  17. package/catalog/frontmcp-config/examples/configure-deployment-targets/multi-target-with-security.md +12 -9
  18. package/catalog/frontmcp-config/examples/configure-http/cors-restricted-origins.md +2 -2
  19. package/catalog/frontmcp-config/examples/configure-http/entry-path-reverse-proxy.md +1 -1
  20. package/catalog/frontmcp-config/examples/configure-security-headers/csp-report-only.md +1 -1
  21. package/catalog/frontmcp-config/examples/configure-security-headers/full-production-headers.md +1 -1
  22. package/catalog/frontmcp-config/examples/configure-skills-http/audit-log-basic.md +76 -0
  23. package/catalog/frontmcp-config/examples/configure-skills-http/audit-log-redis.md +116 -0
  24. package/catalog/frontmcp-config/examples/configure-skills-http/inject-instructions.md +59 -0
  25. package/catalog/frontmcp-config/references/configure-auth-modes.md +5 -5
  26. package/catalog/frontmcp-config/references/configure-deployment-targets.md +27 -24
  27. package/catalog/frontmcp-config/references/configure-http.md +14 -10
  28. package/catalog/frontmcp-config/references/configure-security-headers.md +2 -2
  29. package/catalog/frontmcp-config/references/configure-session.md +25 -25
  30. package/catalog/frontmcp-config/references/configure-skills-http.md +157 -0
  31. package/catalog/frontmcp-config/references/configure-throttle.md +1 -1
  32. package/catalog/frontmcp-config/references/configure-transport.md +2 -2
  33. package/catalog/frontmcp-deployment/SKILL.md +112 -9
  34. package/catalog/frontmcp-deployment/examples/build-for-browser/browser-build-with-custom-entry.md +23 -11
  35. package/catalog/frontmcp-deployment/examples/build-for-browser/browser-crypto-and-storage.md +44 -17
  36. package/catalog/frontmcp-deployment/examples/build-for-browser/react-provider-setup.md +53 -21
  37. package/catalog/frontmcp-deployment/examples/build-for-cli/cli-binary-build.md +1 -1
  38. package/catalog/frontmcp-deployment/examples/build-for-cli/unix-socket-daemon.md +1 -1
  39. package/catalog/frontmcp-deployment/examples/build-for-mcpb/mcpb-bundle-build.md +1 -1
  40. package/catalog/frontmcp-deployment/examples/build-for-sdk/connect-openai.md +1 -1
  41. package/catalog/frontmcp-deployment/examples/build-for-sdk/multi-platform-connect.md +1 -1
  42. package/catalog/frontmcp-deployment/examples/deploy-to-cloudflare/basic-worker-deploy.md +7 -8
  43. package/catalog/frontmcp-deployment/examples/deploy-to-cloudflare/worker-custom-domain.md +8 -6
  44. package/catalog/frontmcp-deployment/examples/deploy-to-cloudflare/worker-with-kv-storage.md +5 -4
  45. package/catalog/frontmcp-deployment/examples/deploy-to-lambda/cdk-deployment.md +8 -5
  46. package/catalog/frontmcp-deployment/examples/deploy-to-lambda/lambda-handler-with-cors.md +20 -18
  47. package/catalog/frontmcp-deployment/examples/deploy-to-lambda/sam-template-basic.md +8 -5
  48. package/catalog/frontmcp-deployment/examples/deploy-to-node/docker-compose-with-redis.md +3 -3
  49. package/catalog/frontmcp-deployment/examples/deploy-to-node/pm2-with-nginx.md +1 -1
  50. package/catalog/frontmcp-deployment/examples/deploy-to-node/resource-limits.md +2 -2
  51. package/catalog/frontmcp-deployment/examples/deploy-to-node-dockerfile/basic-multistage-dockerfile.md +2 -2
  52. package/catalog/frontmcp-deployment/examples/deploy-to-node-dockerfile/secure-nonroot-dockerfile.md +1 -1
  53. package/catalog/frontmcp-deployment/examples/deploy-to-vercel/vercel-mcp-endpoint-test.md +23 -21
  54. package/catalog/frontmcp-deployment/examples/deploy-to-vercel/vercel-with-kv.md +25 -22
  55. package/catalog/frontmcp-deployment/examples/deploy-to-vercel/vercel-with-skills-cache.md +23 -30
  56. package/catalog/frontmcp-deployment/examples/deploy-to-vercel-config/minimal-vercel-config.md +52 -28
  57. package/catalog/frontmcp-deployment/examples/deploy-to-vercel-config/vercel-config-with-security-headers.md +32 -55
  58. package/catalog/frontmcp-deployment/examples/mcp-client-integration/http-remote.md +9 -0
  59. package/catalog/frontmcp-deployment/references/build-for-browser.md +40 -17
  60. package/catalog/frontmcp-deployment/references/build-for-cli.md +8 -8
  61. package/catalog/frontmcp-deployment/references/deploy-to-cloudflare.md +43 -24
  62. package/catalog/frontmcp-deployment/references/deploy-to-lambda.md +36 -25
  63. package/catalog/frontmcp-deployment/references/deploy-to-node-dockerfile.md +56 -14
  64. package/catalog/frontmcp-deployment/references/deploy-to-node.md +9 -6
  65. package/catalog/frontmcp-deployment/references/deploy-to-vercel-config.md +57 -58
  66. package/catalog/frontmcp-deployment/references/deploy-to-vercel.md +49 -59
  67. package/catalog/frontmcp-deployment/references/mcp-client-integration.md +2 -0
  68. package/catalog/frontmcp-development/SKILL.md +186 -11
  69. package/catalog/frontmcp-development/examples/create-agent/custom-multi-pass-agent.md +1 -1
  70. package/catalog/frontmcp-development/examples/create-agent/nested-agents-with-swarm.md +30 -27
  71. package/catalog/frontmcp-development/examples/create-job/job-with-permissions.md +13 -8
  72. package/catalog/frontmcp-development/examples/create-provider/basic-database-provider.md +33 -23
  73. package/catalog/frontmcp-development/examples/create-provider/config-and-api-providers.md +19 -10
  74. package/catalog/frontmcp-development/examples/create-tool/tool-with-rate-limiting-and-progress.md +3 -3
  75. package/catalog/frontmcp-development/examples/create-workflow/webhook-triggered-workflow.md +6 -4
  76. package/catalog/frontmcp-development/examples/decorators-guide/agent-skill-job-workflow.md +1 -1
  77. package/catalog/frontmcp-development/examples/decorators-guide/basic-server-with-app-and-tools.md +13 -8
  78. package/catalog/frontmcp-development/examples/decorators-guide/multi-app-with-plugins-and-providers.md +50 -23
  79. package/catalog/frontmcp-development/references/create-agent.md +47 -30
  80. package/catalog/frontmcp-development/references/create-job.md +69 -54
  81. package/catalog/frontmcp-development/references/create-plugin-hooks.md +45 -28
  82. package/catalog/frontmcp-development/references/create-plugin.md +10 -8
  83. package/catalog/frontmcp-development/references/create-prompt.md +3 -3
  84. package/catalog/frontmcp-development/references/create-provider.md +91 -51
  85. package/catalog/frontmcp-development/references/create-resource.md +3 -3
  86. package/catalog/frontmcp-development/references/create-skill.md +2 -2
  87. package/catalog/frontmcp-development/references/create-tool.md +7 -7
  88. package/catalog/frontmcp-development/references/create-workflow.md +8 -10
  89. package/catalog/frontmcp-development/references/decorators-guide.md +92 -56
  90. package/catalog/frontmcp-development/references/official-plugins.md +4 -3
  91. package/catalog/frontmcp-development/references/openapi-adapter.md +1 -1
  92. package/catalog/frontmcp-extensibility/SKILL.md +70 -10
  93. package/catalog/frontmcp-extensibility/examples/skill-audit-log/custom-store.md +197 -0
  94. package/catalog/frontmcp-extensibility/examples/skill-audit-log/verify-chain.md +68 -0
  95. package/catalog/frontmcp-extensibility/examples/vectoriadb/product-catalog-search.md +3 -5
  96. package/catalog/frontmcp-extensibility/examples/vectoriadb/semantic-search-with-persistence.md +4 -11
  97. package/catalog/frontmcp-extensibility/examples/vectoriadb/tfidf-keyword-search.md +41 -30
  98. package/catalog/frontmcp-extensibility/references/skill-audit-log.md +233 -0
  99. package/catalog/frontmcp-extensibility/references/vectoriadb.md +73 -63
  100. package/catalog/frontmcp-guides/SKILL.md +84 -27
  101. package/catalog/frontmcp-guides/examples/example-knowledge-base/agent-and-plugin.md +72 -62
  102. package/catalog/frontmcp-guides/examples/example-knowledge-base/vector-search-and-resources.md +32 -43
  103. package/catalog/frontmcp-guides/examples/example-task-manager/auth-and-crud-tools.md +24 -17
  104. package/catalog/frontmcp-guides/examples/example-task-manager/authenticated-e2e-tests.md +23 -21
  105. package/catalog/frontmcp-guides/examples/example-task-manager/redis-provider-with-di.md +47 -39
  106. package/catalog/frontmcp-guides/examples/example-weather-api/server-and-app-setup.md +16 -6
  107. package/catalog/frontmcp-guides/examples/example-weather-api/unit-and-e2e-tests.md +9 -8
  108. package/catalog/frontmcp-guides/references/example-knowledge-base.md +192 -265
  109. package/catalog/frontmcp-guides/references/example-task-manager.md +60 -54
  110. package/catalog/frontmcp-guides/references/example-weather-api.md +22 -24
  111. package/catalog/frontmcp-observability/SKILL.md +66 -2
  112. package/catalog/frontmcp-observability/examples/telemetry-api/skill-counters.md +100 -0
  113. package/catalog/frontmcp-observability/examples/tracing-setup/production-tracing.md +7 -2
  114. package/catalog/frontmcp-observability/examples/vendor-integrations/coralogix-setup.md +6 -2
  115. package/catalog/frontmcp-observability/references/telemetry-api.md +72 -8
  116. package/catalog/frontmcp-observability/references/testing-observability.md +33 -49
  117. package/catalog/frontmcp-observability/references/tracing-setup.md +12 -5
  118. package/catalog/frontmcp-observability/references/vendor-integrations.md +46 -1
  119. package/catalog/frontmcp-production-readiness/SKILL.md +134 -3
  120. package/catalog/frontmcp-production-readiness/examples/common-checklist/caching-and-performance.md +57 -36
  121. package/catalog/frontmcp-production-readiness/examples/common-checklist/observability-setup.md +1 -1
  122. package/catalog/frontmcp-production-readiness/examples/common-checklist/security-hardening.md +102 -6
  123. package/catalog/frontmcp-production-readiness/examples/production-cli-daemon/daemon-socket-config.md +2 -1
  124. package/catalog/frontmcp-production-readiness/examples/production-cli-daemon/graceful-shutdown-cleanup.md +66 -58
  125. package/catalog/frontmcp-production-readiness/examples/production-cli-daemon/security-and-permissions.md +5 -3
  126. package/catalog/frontmcp-production-readiness/examples/production-cloudflare/durable-objects-state.md +2 -1
  127. package/catalog/frontmcp-production-readiness/examples/production-cloudflare/wrangler-config.md +55 -76
  128. package/catalog/frontmcp-production-readiness/examples/production-lambda/cold-start-connection-reuse.md +43 -40
  129. package/catalog/frontmcp-production-readiness/examples/production-lambda/sam-template.md +63 -94
  130. package/catalog/frontmcp-production-readiness/examples/production-lambda/scaling-and-monitoring.md +28 -18
  131. package/catalog/frontmcp-production-readiness/examples/production-node-sdk/multi-instance-cleanup.md +29 -14
  132. package/catalog/frontmcp-production-readiness/examples/production-node-server/graceful-shutdown.md +58 -42
  133. package/catalog/frontmcp-production-readiness/examples/production-node-server/redis-session-scaling.md +5 -2
  134. package/catalog/frontmcp-production-readiness/examples/production-vercel/cold-start-optimization.md +41 -24
  135. package/catalog/frontmcp-production-readiness/examples/production-vercel/vercel-edge-config.md +56 -65
  136. package/catalog/frontmcp-production-readiness/references/common-checklist.md +17 -5
  137. package/catalog/frontmcp-production-readiness/references/production-cli-daemon.md +5 -5
  138. package/catalog/frontmcp-production-readiness/references/production-cloudflare.md +5 -5
  139. package/catalog/frontmcp-production-readiness/references/production-lambda.md +5 -5
  140. package/catalog/frontmcp-production-readiness/references/production-node-sdk.md +5 -5
  141. package/catalog/frontmcp-production-readiness/references/production-node-server.md +1 -1
  142. package/catalog/frontmcp-production-readiness/references/production-vercel.md +5 -5
  143. package/catalog/frontmcp-setup/SKILL.md +88 -0
  144. package/catalog/frontmcp-setup/examples/project-structure-nx/nx-workspace-with-apps.md +10 -4
  145. package/catalog/frontmcp-setup/examples/project-structure-standalone/dev-workflow-commands.md +21 -8
  146. package/catalog/frontmcp-setup/examples/readme-guide/node-server-readme.md +3 -3
  147. package/catalog/frontmcp-setup/references/multi-app-composition.md +4 -3
  148. package/catalog/frontmcp-setup/references/project-structure-nx.md +15 -6
  149. package/catalog/frontmcp-setup/references/project-structure-standalone.md +18 -15
  150. package/catalog/frontmcp-setup/references/readme-guide.md +1 -1
  151. package/catalog/frontmcp-setup/references/setup-project.md +19 -5
  152. package/catalog/frontmcp-setup/references/setup-redis.md +27 -39
  153. package/catalog/frontmcp-setup/references/setup-sqlite.md +25 -18
  154. package/catalog/frontmcp-testing/SKILL.md +102 -15
  155. package/catalog/frontmcp-testing/examples/setup-testing/unit-test-tool-resource-prompt.md +3 -3
  156. package/catalog/frontmcp-testing/examples/test-auth/oauth-flow-test.md +50 -39
  157. package/catalog/frontmcp-testing/examples/test-auth/role-based-access-test.md +52 -29
  158. package/catalog/frontmcp-testing/examples/test-auth/token-factory-test.md +37 -20
  159. package/catalog/frontmcp-testing/examples/test-direct-client/basic-create-test.md +25 -15
  160. package/catalog/frontmcp-testing/examples/test-direct-client/openai-claude-format-test.md +27 -21
  161. package/catalog/frontmcp-testing/examples/test-e2e-handler/basic-e2e-test.md +29 -20
  162. package/catalog/frontmcp-testing/examples/test-e2e-handler/manual-client-with-transport.md +5 -3
  163. package/catalog/frontmcp-testing/examples/test-e2e-handler/tool-call-and-error-e2e.md +35 -26
  164. package/catalog/frontmcp-testing/examples/test-tool-unit/basic-tool-test.md +8 -3
  165. package/catalog/frontmcp-testing/examples/test-tool-unit/schema-validation-test.md +4 -1
  166. package/catalog/frontmcp-testing/examples/test-tool-unit/tool-error-handling-test.md +6 -3
  167. package/catalog/frontmcp-testing/references/setup-testing.md +35 -39
  168. package/catalog/frontmcp-testing/references/test-auth.md +86 -43
  169. package/catalog/frontmcp-testing/references/test-browser-build.md +1 -1
  170. package/catalog/frontmcp-testing/references/test-direct-client.md +29 -19
  171. package/catalog/frontmcp-testing/references/test-e2e-handler.md +31 -19
  172. package/catalog/frontmcp-testing/references/test-tool-unit.md +6 -2
  173. package/catalog/skills-manifest.json +428 -339
  174. package/package.json +1 -1
  175. package/src/manifest.d.ts +13 -0
  176. package/src/manifest.js.map +1 -1
@@ -2,25 +2,36 @@
2
2
  name: browser-build-with-custom-entry
3
3
  reference: build-for-browser
4
4
  level: intermediate
5
- description: 'Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports.'
6
- tags: [deployment, browser, node, custom, entry]
5
+ description: Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports. Re-export the real `@frontmcp/react` symbols (`useListTools`, `useListResources`, `useCallTool`) — `useTools`/`useResources` do not exist.
6
+ tags:
7
+ - deployment
8
+ - browser
9
+ - custom
10
+ - entry
7
11
  features:
8
- - 'Creating a separate browser entry point (`src/client.ts`) that avoids importing Node.js-only modules like `fs` or `node:crypto`'
9
- - 'Using the `-e` and `-o` flags to customize the entry file and output directory'
12
+ - Creating a separate browser entry point (`src/client.ts`) that re-exports only browser-safe symbols
13
+ - Using the real `@frontmcp/react` hook names (`useListTools`, `useListResources`, etc.)
14
+ - Using the `-e` and `-o` flags to customize the entry file and output directory
10
15
  ---
11
16
 
12
17
  # Browser Build with Custom Entry
13
18
 
14
- Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports.
19
+ Build a browser bundle using a dedicated client entry file that avoids Node.js-only imports. Re-export the real `@frontmcp/react` symbols (`useListTools`, `useListResources`, `useCallTool`) — `useTools`/`useResources` do not exist.
15
20
 
16
21
  ## Code
17
22
 
18
23
  ```typescript
19
24
  // src/client.ts
20
- // Browser-safe entry point - no Node.js modules imported here
21
- import { FrontMcpProvider, useTools, useResources } from '@frontmcp/react';
22
-
23
- export { FrontMcpProvider, useTools, useResources };
25
+ // Browser-safe entry point no Node.js modules imported here.
26
+ export {
27
+ FrontMcpProvider,
28
+ useListTools,
29
+ useListResources,
30
+ useListPrompts,
31
+ useCallTool,
32
+ useReadResource,
33
+ useGetPrompt,
34
+ } from '@frontmcp/react';
24
35
  ```
25
36
 
26
37
  ```bash
@@ -29,13 +40,14 @@ frontmcp build --target browser -e ./src/client.ts -o ./dist/browser
29
40
  ```
30
41
 
31
42
  ```bash
32
- # Verify output contains no Node.js-only modules
43
+ # Verify output directory contents
33
44
  ls dist/browser/
34
45
  ```
35
46
 
36
47
  ## What This Demonstrates
37
48
 
38
- - Creating a separate browser entry point (`src/client.ts`) that avoids importing Node.js-only modules like `fs` or `node:crypto`
49
+ - Creating a separate browser entry point (`src/client.ts`) that re-exports only browser-safe symbols
50
+ - Using the real `@frontmcp/react` hook names (`useListTools`, `useListResources`, etc.)
39
51
  - Using the `-e` and `-o` flags to customize the entry file and output directory
40
52
 
41
53
  ## Related
@@ -2,22 +2,27 @@
2
2
  name: browser-crypto-and-storage
3
3
  reference: build-for-browser
4
4
  level: advanced
5
- description: 'Use `@frontmcp/utils` crypto functions (WebCrypto API) and in-memory storage in browser environments.'
6
- tags: [deployment, browser, database, remote, node, crypto]
5
+ description: Use `@frontmcp/utils` crypto in the browser, and create the FrontMCP server with `create()` from `@frontmcp/sdk` so the React provider can consume it via the `server` prop.
6
+ tags:
7
+ - deployment
8
+ - browser
9
+ - crypto
10
+ - react
7
11
  features:
8
- - 'Using `@frontmcp/utils` for PKCE and hashing in the browser (backed by WebCrypto, not `node:crypto`)'
9
- - 'Avoiding filesystem and native database storage in browser builds by relying on a remote server for persistence'
12
+ - Using `@frontmcp/utils` for PKCE and hashing in the browser (backed by WebCrypto, not `node:crypto`)
13
+ - Creating a `DirectMcpServer` with `create()` and passing it to `FrontMcpProvider` via `server={...}` (no `config={{ serverUrl }}`)
14
+ - Using `useListTools` (real hook) instead of the non-existent `useTools`
10
15
  ---
11
16
 
12
17
  # Browser-Safe Crypto and Storage
13
18
 
14
- Use `@frontmcp/utils` crypto functions (WebCrypto API) and in-memory storage in browser environments.
19
+ Use `@frontmcp/utils` crypto in the browser, and create the FrontMCP server with `create()` from `@frontmcp/sdk` so the React provider can consume it via the `server` prop.
15
20
 
16
21
  ## Code
17
22
 
18
23
  ```typescript
19
24
  // src/browser-auth.ts
20
- import { generateCodeVerifier, generateCodeChallenge, sha256Base64url, randomUUID } from '@frontmcp/utils';
25
+ import { generateCodeChallenge, generateCodeVerifier, randomUUID, sha256Base64url } from '@frontmcp/utils';
21
26
 
22
27
  // PKCE flow in the browser - uses WebCrypto API automatically
23
28
  async function startPkceFlow(): Promise<{
@@ -40,27 +45,48 @@ async function hashToken(token: string): Promise<string> {
40
45
  export { startPkceFlow, hashToken };
41
46
  ```
42
47
 
48
+ ```typescript
49
+ // src/server.ts — in-memory DirectMcpServer for the React app.
50
+ //
51
+ // NOTE: this file uses top-level `await`, which requires ES2022 module support.
52
+ // The browser build target (target: "es2022", module: "esnext") emits the bundle
53
+ // as an ES module so top-level await is preserved end-to-end.
54
+ import { create, tool, z } from '@frontmcp/sdk';
55
+
56
+ export const server = await create({
57
+ info: { name: 'browser-app', version: '1.0.0' },
58
+ tools: [
59
+ tool({
60
+ name: 'echo',
61
+ description: 'Echo input',
62
+ inputSchema: { msg: z.string() },
63
+ })((input) => ({
64
+ content: [{ type: 'text' as const, text: input.msg }],
65
+ })),
66
+ ],
67
+ });
68
+ ```
69
+
43
70
  ```typescript
44
71
  // src/client-app.tsx
45
- import { FrontMcpProvider, useTools } from '@frontmcp/react';
72
+ import { FrontMcpProvider, useListTools } from '@frontmcp/react';
73
+
74
+ import { server } from './server';
46
75
 
47
- // Browser environments cannot use Redis or SQLite.
48
- // Use in-memory stores or connect to a remote server that handles persistence.
76
+ // Browser environments cannot use Redis or SQLite. Either keep state in
77
+ // memory (DirectMcpServer is in-process) or call a remote server from your
78
+ // tools — the SDK does NOT include a built-in browser-side persistence layer.
49
79
  function App() {
50
80
  return (
51
- <FrontMcpProvider
52
- config={{
53
- serverUrl: 'https://my-mcp.example.com',
54
- // No local storage config - the remote server handles persistence
55
- }}
56
- >
81
+ <FrontMcpProvider server={server}>
57
82
  <ToolDashboard />
58
83
  </FrontMcpProvider>
59
84
  );
60
85
  }
61
86
 
62
87
  function ToolDashboard() {
63
- const { tools, callTool } = useTools();
88
+ const { data } = useListTools();
89
+ const tools = data?.tools ?? [];
64
90
 
65
91
  return (
66
92
  <div>
@@ -78,7 +104,8 @@ export default App;
78
104
  ## What This Demonstrates
79
105
 
80
106
  - Using `@frontmcp/utils` for PKCE and hashing in the browser (backed by WebCrypto, not `node:crypto`)
81
- - Avoiding filesystem and native database storage in browser builds by relying on a remote server for persistence
107
+ - Creating a `DirectMcpServer` with `create()` and passing it to `FrontMcpProvider` via `server={...}` (no `config={{ serverUrl }}`)
108
+ - Using `useListTools` (real hook) instead of the non-existent `useTools`
82
109
 
83
110
  ## Related
84
111
 
@@ -2,60 +2,92 @@
2
2
  name: react-provider-setup
3
3
  reference: build-for-browser
4
4
  level: basic
5
- description: 'Connect a React application to a remote FrontMCP server using `@frontmcp/react`.'
6
- tags: [deployment, react, browser, remote, provider, setup]
5
+ description: Connect a React application to a FrontMCP server using `@frontmcp/react`. `FrontMcpProvider` takes a `DirectMcpServer` instance via the `server` prop — there is no `serverUrl` option.
6
+ tags:
7
+ - deployment
8
+ - react
9
+ - browser
10
+ - provider
11
+ - setup
7
12
  features:
8
- - 'Wrapping your React app with `FrontMcpProvider` and pointing it at a remote server URL'
9
- - 'Using the `useTools` hook to list and invoke MCP tools from a React component'
13
+ - Wrapping your React app with `FrontMcpProvider` and passing a real `DirectMcpServer` via `server={...}`
14
+ - Using `useListTools` to fetch the tools list and `useCallTool` to invoke one
15
+ - Creating the server with `create()` from `@frontmcp/sdk` (in-memory direct connection)
10
16
  ---
11
17
 
12
18
  # React Provider Setup
13
19
 
14
- Connect a React application to a remote FrontMCP server using `@frontmcp/react`.
20
+ Connect a React application to a FrontMCP server using `@frontmcp/react`. `FrontMcpProvider` takes a `DirectMcpServer` instance via the `server` prop — there is no `serverUrl` option.
15
21
 
16
22
  ## Code
17
23
 
24
+ ```typescript
25
+ // src/server.ts — create a DirectMcpServer (in-memory) for the React app to consume.
26
+ import { create, tool, z } from '@frontmcp/sdk';
27
+
28
+ export const server = await create({
29
+ info: { name: 'browser-app', version: '1.0.0' },
30
+ tools: [
31
+ tool({
32
+ name: 'greet',
33
+ description: 'Greet a user',
34
+ inputSchema: { name: z.string() },
35
+ })((input) => ({
36
+ content: [{ type: 'text' as const, text: `Hello, ${input.name}!` }],
37
+ })),
38
+ ],
39
+ });
40
+ ```
41
+
18
42
  ```typescript
19
43
  // src/App.tsx
20
- import { FrontMcpProvider, useTools } from '@frontmcp/react';
44
+ import { FrontMcpProvider, useCallTool, useListTools } from '@frontmcp/react';
45
+
46
+ import { server } from './server';
21
47
 
22
48
  function App() {
23
49
  return (
24
- <FrontMcpProvider config={{ serverUrl: 'https://my-mcp.example.com' }}>
50
+ <FrontMcpProvider server={server}>
25
51
  <ToolUI />
26
52
  </FrontMcpProvider>
27
53
  );
28
54
  }
29
55
 
30
56
  function ToolUI() {
31
- const { tools, callTool } = useTools();
32
-
33
- const handleClick = async (toolName: string) => {
34
- const result = await callTool(toolName, { query: 'hello' });
35
- console.log(result);
36
- };
37
-
57
+ // useListTools returns ToolInfo[] directly (live-updates from the registry).
58
+ const tools = useListTools();
38
59
  return (
39
60
  <ul>
40
- {tools.map((tool) => (
41
- <li key={tool.name}>
42
- <button onClick={() => handleClick(tool.name)}>
43
- {tool.name}: {tool.description}
44
- </button>
61
+ {tools.map((t) => (
62
+ <li key={t.name}>
63
+ <ToolButton tool={t} />
45
64
  </li>
46
65
  ))}
47
66
  </ul>
48
67
  );
49
68
  }
50
69
 
70
+ // useCallTool requires the tool name as a hook arg, so each row owns its own
71
+ // hook instance. The mutate fn takes just the arguments object — not `{ name, arguments }`.
72
+ function ToolButton({ tool }: { tool: { name: string; description?: string } }) {
73
+ const [callTool] = useCallTool<{ name: string }>(tool.name);
74
+ return (
75
+ <button onClick={() => callTool({ name: 'World' })}>
76
+ {tool.name}: {tool.description}
77
+ </button>
78
+ );
79
+ }
80
+
51
81
  export default App;
52
82
  ```
53
83
 
54
84
  ## What This Demonstrates
55
85
 
56
- - Wrapping your React app with `FrontMcpProvider` and pointing it at a remote server URL
57
- - Using the `useTools` hook to list and invoke MCP tools from a React component
86
+ - Wrapping your React app with `FrontMcpProvider` and passing a real `DirectMcpServer` via `server={...}`
87
+ - Using `useListTools` to fetch the tools list and `useCallTool` to invoke one
88
+ - Creating the server with `create()` from `@frontmcp/sdk` (in-memory direct connection)
58
89
 
59
90
  ## Related
60
91
 
61
92
  - See `build-for-browser` for the full build command and browser limitations
93
+ - See `build-for-sdk` for the `create()` factory and `tool()` builder
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Greet a user by name',
26
26
  inputSchema: { name: z.string() },
27
27
  })
28
- class GreetTool extends ToolContext<{ name: string }> {
28
+ class GreetTool extends ToolContext {
29
29
  async execute(input: { name: string }) {
30
30
  return { content: [{ type: 'text' as const, text: `Hello, ${input.name}!` }] };
31
31
  }
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Look up a term in the local database',
26
26
  inputSchema: { term: z.string() },
27
27
  })
28
- class LookupTool extends ToolContext<{ term: string }> {
28
+ class LookupTool extends ToolContext {
29
29
  async execute(input: { term: string }) {
30
30
  return { content: [{ type: 'text' as const, text: `Result for: ${input.term}` }] };
31
31
  }
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Greet a user by name',
26
26
  inputSchema: { name: z.string() },
27
27
  })
28
- class GreetTool extends ToolContext<{ name: string }> {
28
+ class GreetTool extends ToolContext {
29
29
  async execute(input: { name: string }) {
30
30
  const apiBase = process.env.API_BASE ?? 'https://api.example.com';
31
31
  return {
@@ -25,7 +25,7 @@ import { App, connectOpenAI, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sd
25
25
  description: 'Search documentation by keyword',
26
26
  inputSchema: { query: z.string(), limit: z.number().optional() },
27
27
  })
28
- class SearchDocsTool extends ToolContext<{ query: string; limit?: number }> {
28
+ class SearchDocsTool extends ToolContext {
29
29
  async execute(input: { query: string; limit?: number }) {
30
30
  return {
31
31
  content: [{ type: 'text' as const, text: `Found results for: ${input.query}` }],
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Translate text to a target language',
26
26
  inputSchema: { text: z.string(), targetLang: z.string() },
27
27
  })
28
- class TranslateTool extends ToolContext<{ text: string; targetLang: string }> {
28
+ class TranslateTool extends ToolContext {
29
29
  async execute(input: { text: string; targetLang: string }) {
30
30
  return {
31
31
  content: [{ type: 'text' as const, text: `[${input.targetLang}] ${input.text}` }],
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Echo back the input',
26
26
  inputSchema: { message: z.string() },
27
27
  })
28
- class EchoTool extends ToolContext<{ message: string }> {
28
+ class EchoTool extends ToolContext {
29
29
  async execute(input: { message: string }) {
30
30
  return { content: [{ type: 'text' as const, text: input.message }] };
31
31
  }
@@ -47,13 +47,12 @@ export default MyServer;
47
47
  ```
48
48
 
49
49
  ```toml
50
- # wrangler.toml
50
+ # wrangler.toml — the Cloudflare adapter overwrites this on every build
51
+ # with exactly these three lines (configure name/compatibility_date via
52
+ # frontmcp.config.deployments[].wrangler).
51
53
  name = "frontmcp-worker"
52
- main = "dist/index.js"
54
+ main = "dist/cloudflare/index.js"
53
55
  compatibility_date = "2024-01-01"
54
-
55
- [vars]
56
- NODE_ENV = "production"
57
56
  ```
58
57
 
59
58
  ```bash
@@ -66,8 +65,8 @@ wrangler dev
66
65
  # Deploy to production
67
66
  wrangler deploy
68
67
 
69
- # Verify
70
- curl https://frontmcp-worker.your-subdomain.workers.dev/health
68
+ # Verify (FrontMCP serves /healthz by default)
69
+ curl https://frontmcp-worker.your-subdomain.workers.dev/healthz
71
70
  ```
72
71
 
73
72
  ## What This Demonstrates
@@ -31,7 +31,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
31
31
  description: 'Translate text',
32
32
  inputSchema: { text: z.string(), lang: z.string() },
33
33
  })
34
- class TranslateTool extends ToolContext<{ text: string; lang: string }> {
34
+ class TranslateTool extends ToolContext {
35
35
  async execute(input: { text: string; lang: string }) {
36
36
  return {
37
37
  content: [{ type: 'text' as const, text: `[${input.lang}] ${input.text}` }],
@@ -46,7 +46,7 @@ class TranslateApp {}
46
46
  info: { name: 'translate-worker', version: '1.0.0' },
47
47
  apps: [TranslateApp],
48
48
  transport: {
49
- type: 'sse',
49
+ protocol: 'modern',
50
50
  },
51
51
  })
52
52
  class TranslateServer {}
@@ -55,9 +55,11 @@ export default TranslateServer;
55
55
  ```
56
56
 
57
57
  ```toml
58
- # wrangler.toml
58
+ # wrangler.toml — name/compatibility_date are managed by frontmcp.config;
59
+ # bindings appended below are re-applied after each build (the adapter
60
+ # overwrites the top-level keys on every `frontmcp build --target cloudflare`).
59
61
  name = "translate-worker"
60
- main = "dist/index.js"
62
+ main = "dist/cloudflare/index.js"
61
63
  compatibility_date = "2024-01-01"
62
64
 
63
65
  [[kv_namespaces]]
@@ -76,8 +78,8 @@ wrangler deploy
76
78
  # Add a custom domain
77
79
  wrangler domains add mcp.example.com
78
80
 
79
- # Verify health endpoint
80
- curl https://mcp.example.com/health
81
+ # Verify health endpoint (FrontMCP serves /healthz by default)
82
+ curl https://mcp.example.com/healthz
81
83
 
82
84
  # Test MCP endpoint
83
85
  curl -X POST https://mcp.example.com/mcp \
@@ -25,7 +25,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
25
25
  description: 'Store a value by key',
26
26
  inputSchema: { key: z.string(), value: z.string() },
27
27
  })
28
- class StoreValueTool extends ToolContext<{ key: string; value: string }> {
28
+ class StoreValueTool extends ToolContext {
29
29
  async execute(input: { key: string; value: string }) {
30
30
  return {
31
31
  content: [{ type: 'text' as const, text: `Stored: ${input.key}` }],
@@ -40,7 +40,7 @@ class StorageApp {}
40
40
  info: { name: 'my-worker', version: '1.0.0' },
41
41
  apps: [StorageApp],
42
42
  transport: {
43
- type: 'sse',
43
+ protocol: 'modern',
44
44
  },
45
45
  })
46
46
  class MyServer {}
@@ -49,9 +49,10 @@ export default MyServer;
49
49
  ```
50
50
 
51
51
  ```toml
52
- # wrangler.toml
52
+ # wrangler.toml — name/main/compatibility_date are rewritten by the build.
53
+ # Bindings below need to be re-applied (or appended) after each build.
53
54
  name = "frontmcp-worker"
54
- main = "dist/index.js"
55
+ main = "dist/cloudflare/index.js"
55
56
  compatibility_date = "2024-01-01"
56
57
 
57
58
  [[kv_namespaces]]
@@ -19,9 +19,9 @@ Deploy a FrontMCP server to AWS Lambda using CDK with provisioned concurrency an
19
19
  ```typescript
20
20
  // lib/frontmcp-stack.ts
21
21
  import * as cdk from 'aws-cdk-lib';
22
- import * as lambda from 'aws-cdk-lib/aws-lambda';
23
22
  import * as apigw from 'aws-cdk-lib/aws-apigatewayv2';
24
23
  import * as integrations from 'aws-cdk-lib/aws-apigatewayv2-integrations';
24
+ import * as lambda from 'aws-cdk-lib/aws-lambda';
25
25
  import { Construct } from 'constructs';
26
26
 
27
27
  export class FrontMcpStack extends cdk.Stack {
@@ -31,7 +31,7 @@ export class FrontMcpStack extends cdk.Stack {
31
31
  const fn = new lambda.Function(this, 'FrontMcpHandler', {
32
32
  runtime: lambda.Runtime.NODEJS_24_X,
33
33
  handler: 'handler.handler',
34
- code: lambda.Code.fromAsset('.'),
34
+ code: lambda.Code.fromAsset('dist/lambda'),
35
35
  memorySize: 512,
36
36
  timeout: cdk.Duration.seconds(30),
37
37
  architecture: lambda.Architecture.ARM_64,
@@ -65,7 +65,10 @@ export class FrontMcpStack extends cdk.Stack {
65
65
  ```
66
66
 
67
67
  ```bash
68
- # Build the FrontMCP server
68
+ # Install the peer dep validated by the lambda adapter
69
+ npm install @codegenie/serverless-express
70
+
71
+ # Build the FrontMCP server — emits dist/lambda/handler.cjs
69
72
  frontmcp build --target lambda
70
73
 
71
74
  # Store secrets in SSM Parameter Store
@@ -77,8 +80,8 @@ aws ssm put-parameter \
77
80
  # Deploy with CDK
78
81
  cdk deploy
79
82
 
80
- # Verify
81
- curl https://abc123.execute-api.us-east-1.amazonaws.com/health
83
+ # Verify (FrontMCP serves /healthz by default)
84
+ curl https://abc123.execute-api.us-east-1.amazonaws.com/healthz
82
85
  ```
83
86
 
84
87
  ## What This Demonstrates
@@ -2,23 +2,26 @@
2
2
  name: lambda-handler-with-cors
3
3
  reference: deploy-to-lambda
4
4
  level: intermediate
5
- description: 'Create a custom Lambda handler with an explicit API Gateway definition for CORS support.'
6
- tags: [deployment, lambda, handler, cors]
5
+ description: CORS for a FrontMCP Lambda is configured at the API Gateway HTTP API level, not in the handler. `frontmcp build --target lambda` writes `dist/lambda/handler.cjs` — your `@FrontMcp` server is wrapped automatically with `@codegenie/serverless-express`, so CORS belongs on the gateway.
6
+ tags:
7
+ - deployment
8
+ - lambda
9
+ - handler
10
+ - cors
7
11
  features:
8
- - 'Creating a custom Lambda handler with `createLambdaHandler()` from `@frontmcp/adapters/lambda`'
9
- - 'Defining an explicit HTTP API resource with CORS configuration for cross-origin requests'
12
+ - Configuring CORS at the API Gateway HTTP API layer (not the handler) via `CorsConfiguration`
10
13
  - 'Linking the function events to the explicit API via `ApiId: !Ref`'
14
+ - Pointing SAM `CodeUri` at `dist/lambda/` so the auto-generated `handler.cjs` is uploaded
11
15
  ---
12
16
 
13
17
  # Lambda Handler with CORS and API Gateway
14
18
 
15
- Create a custom Lambda handler with an explicit API Gateway definition for CORS support.
19
+ CORS for a FrontMCP Lambda is configured at the API Gateway HTTP API level, not in the handler. `frontmcp build --target lambda` writes `dist/lambda/handler.cjs` — your `@FrontMcp` server is wrapped automatically with `@codegenie/serverless-express`, so CORS belongs on the gateway.
16
20
 
17
21
  ## Code
18
22
 
19
23
  ```typescript
20
- // src/lambda.ts
21
- import { createLambdaHandler } from '@frontmcp/adapters/lambda';
24
+ // src/main.ts — your @FrontMcp server. The CLI emits the Lambda handler.
22
25
  import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
23
26
 
24
27
  @Tool({
@@ -26,7 +29,7 @@ import { App, FrontMcp, Tool, ToolContext, z } from '@frontmcp/sdk';
26
29
  description: 'Analyze text content',
27
30
  inputSchema: { text: z.string() },
28
31
  })
29
- class AnalyzeTool extends ToolContext<{ text: string }> {
32
+ class AnalyzeTool extends ToolContext {
30
33
  async execute(input: { text: string }) {
31
34
  return {
32
35
  content: [{ type: 'text' as const, text: `Analysis of: ${input.text}` }],
@@ -41,15 +44,11 @@ class AnalyzerApp {}
41
44
  info: { name: 'analyzer', version: '1.0.0' },
42
45
  apps: [AnalyzerApp],
43
46
  })
44
- class AnalyzerServer {}
45
-
46
- export const handler = createLambdaHandler(AnalyzerServer, {
47
- streaming: false,
48
- });
47
+ export default class AnalyzerServer {}
49
48
  ```
50
49
 
51
50
  ```yaml
52
- # template.yaml - with explicit API Gateway and CORS
51
+ # template.yaml explicit HTTP API with CORS configuration
53
52
  AWSTemplateFormatVersion: '2010-09-09'
54
53
  Transform: AWS::Serverless-2016-10-31
55
54
  Description: FrontMCP server with CORS
@@ -80,7 +79,7 @@ Resources:
80
79
  Type: AWS::Serverless::Function
81
80
  Properties:
82
81
  Handler: handler.handler
83
- CodeUri: .
82
+ CodeUri: dist/lambda/
84
83
  Architectures:
85
84
  - arm64
86
85
  Environment:
@@ -96,6 +95,9 @@ Resources:
96
95
  ```
97
96
 
98
97
  ```bash
98
+ # Make sure the peer dep is installed (the build's validate hook checks)
99
+ npm install @codegenie/serverless-express
100
+
99
101
  # Build and deploy
100
102
  frontmcp build --target lambda
101
103
  sam build && sam deploy
@@ -103,10 +105,10 @@ sam build && sam deploy
103
105
 
104
106
  ## What This Demonstrates
105
107
 
106
- - Creating a custom Lambda handler with `createLambdaHandler()` from `@frontmcp/adapters/lambda`
107
- - Defining an explicit HTTP API resource with CORS configuration for cross-origin requests
108
+ - Configuring CORS at the API Gateway HTTP API layer (not the handler) via `CorsConfiguration`
108
109
  - Linking the function events to the explicit API via `ApiId: !Ref`
110
+ - Pointing SAM `CodeUri` at `dist/lambda/` so the auto-generated `handler.cjs` is uploaded
109
111
 
110
112
  ## Related
111
113
 
112
- - See `deploy-to-lambda` for secrets management, provisioned concurrency, and CDK deployment
114
+ - See `deploy-to-lambda` for the peer-dep flow, secrets management, provisioned concurrency, and CDK deployment.
@@ -37,7 +37,7 @@ Resources:
37
37
  Type: AWS::Serverless::Function
38
38
  Properties:
39
39
  Handler: handler.handler
40
- CodeUri: .
40
+ CodeUri: dist/lambda/
41
41
  Description: FrontMCP MCP server
42
42
  Architectures:
43
43
  - arm64
@@ -50,7 +50,7 @@ Resources:
50
50
  HealthCheck:
51
51
  Type: HttpApi
52
52
  Properties:
53
- Path: /health
53
+ Path: /healthz
54
54
  Method: GET
55
55
 
56
56
  FrontMcpLogGroup:
@@ -69,7 +69,10 @@ Outputs:
69
69
  ```
70
70
 
71
71
  ```bash
72
- # Build for Lambda
72
+ # Install the peer dep validated by the lambda adapter
73
+ npm install @codegenie/serverless-express
74
+
75
+ # Build for Lambda — emits dist/lambda/handler.cjs with a `handler` export
73
76
  frontmcp build --target lambda
74
77
 
75
78
  # Deploy with guided prompts (first time)
@@ -85,8 +88,8 @@ aws cloudformation describe-stacks \
85
88
  --query "Stacks[0].Outputs[?OutputKey=='ApiEndpoint'].OutputValue" \
86
89
  --output text
87
90
 
88
- # Verify
89
- curl https://abc123.execute-api.us-east-1.amazonaws.com/health
91
+ # Verify (FrontMCP serves /healthz by default)
92
+ curl https://abc123.execute-api.us-east-1.amazonaws.com/healthz
90
93
  ```
91
94
 
92
95
  ## What This Demonstrates
@@ -37,7 +37,7 @@ services:
37
37
  condition: service_healthy
38
38
  restart: unless-stopped
39
39
  healthcheck:
40
- test: ['CMD', 'wget', '-qO-', 'http://localhost:3000/health']
40
+ test: ['CMD', 'wget', '-qO-', 'http://localhost:3000/healthz']
41
41
  interval: 30s
42
42
  timeout: 5s
43
43
  retries: 3
@@ -76,7 +76,7 @@ COPY --from=builder /app/yarn.lock ./
76
76
  RUN yarn install --frozen-lockfile --production && yarn cache clean
77
77
  EXPOSE 3000
78
78
  HEALTHCHECK --interval=30s --timeout=5s --retries=3 --start-period=10s \
79
- CMD wget -qO- http://localhost:3000/health || exit 1
79
+ CMD wget -qO- http://localhost:3000/healthz || exit 1
80
80
  CMD ["node", "dist/main.js"]
81
81
  ```
82
82
 
@@ -86,7 +86,7 @@ docker compose up -d
86
86
 
87
87
  # Verify
88
88
  docker compose ps
89
- curl http://localhost:3000/health
89
+ curl http://localhost:3000/healthz
90
90
  # {"status":"ok","uptime":12345}
91
91
  ```
92
92
 
@@ -65,7 +65,7 @@ sudo ln -s /etc/nginx/sites-available/mcp.example.com /etc/nginx/sites-enabled/
65
65
  sudo nginx -t && sudo systemctl reload nginx
66
66
 
67
67
  # Verify
68
- curl https://mcp.example.com/health
68
+ curl https://mcp.example.com/healthz
69
69
  ```
70
70
 
71
71
  ## What This Demonstrates