@mcp-b/react-webmcp 0.1.6-beta.3 → 0.1.6-beta.4

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 (2) hide show
  1. package/README.md +57 -1
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -104,6 +104,62 @@ function PostsPage() {
104
104
  }
105
105
  ```
106
106
 
107
+ ### Tool with Output Schema (Recommended)
108
+
109
+ **Output schemas are essential for modern AI integrations** - they enable AI agents to return structured, type-safe responses:
110
+
111
+ ```tsx
112
+ import { useWebMCP } from '@mcp-b/react-webmcp';
113
+ import { z } from 'zod';
114
+
115
+ function ProductSearch() {
116
+ const searchTool = useWebMCP({
117
+ name: 'products_search',
118
+ description: 'Search for products in the catalog',
119
+ inputSchema: {
120
+ query: z.string().describe('Search query'),
121
+ maxResults: z.number().min(1).max(50).default(10),
122
+ category: z.enum(['electronics', 'clothing', 'books']).optional(),
123
+ },
124
+ // Output schema enables structured responses
125
+ outputSchema: {
126
+ products: z.array(z.object({
127
+ id: z.string(),
128
+ name: z.string(),
129
+ price: z.number(),
130
+ inStock: z.boolean(),
131
+ })),
132
+ total: z.number().describe('Total matching products'),
133
+ hasMore: z.boolean(),
134
+ },
135
+ handler: async ({ query, maxResults, category }) => {
136
+ const results = await api.products.search({ query, maxResults, category });
137
+ return {
138
+ products: results.items,
139
+ total: results.totalCount,
140
+ hasMore: results.totalCount > maxResults,
141
+ };
142
+ },
143
+ // Format for text display (structuredContent is auto-generated from return value)
144
+ formatOutput: (result) => `Found ${result.total} products`,
145
+ });
146
+
147
+ return (
148
+ <div>
149
+ {searchTool.state.isExecuting && <Spinner />}
150
+ {searchTool.state.lastResult && (
151
+ <p>Found {searchTool.state.lastResult.total} products</p>
152
+ )}
153
+ </div>
154
+ );
155
+ }
156
+ ```
157
+
158
+ **Why use output schemas?**
159
+ - AI providers compile schemas to TypeScript, enabling type-safe code generation
160
+ - Responses are validated against the schema
161
+ - Better AI reasoning about expected output format
162
+
107
163
  ### Context Tool
108
164
 
109
165
  Expose read-only context to AI:
@@ -150,7 +206,7 @@ function useWebMCP<
150
206
  | `name` | `string` | ✓ | Unique tool identifier (e.g., 'posts_like') |
151
207
  | `description` | `string` | ✓ | Human-readable description for AI |
152
208
  | `inputSchema` | `Record<string, ZodType>` | - | Input validation using Zod schemas |
153
- | `outputSchema` | `Record<string, ZodType>` | - | Output validation (optional) |
209
+ | `outputSchema` | `Record<string, ZodType>` | - | Output schema for structured responses (recommended) |
154
210
  | `annotations` | `ToolAnnotations` | - | Metadata hints for the AI |
155
211
  | `elicitation` | `ElicitationConfig` | - | User confirmation settings |
156
212
  | `handler` | `(input) => Promise<TOutput>` | ✓ | Function that executes the tool |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/react-webmcp",
3
- "version": "0.1.6-beta.3",
3
+ "version": "0.1.6-beta.4",
4
4
  "description": "React hooks for Model Context Protocol (MCP) - expose React components as AI tools for Claude, ChatGPT, Cursor, and Copilot with Zod validation",
5
5
  "keywords": [
6
6
  "mcp",
@@ -55,10 +55,10 @@
55
55
  "dist"
56
56
  ],
57
57
  "dependencies": {
58
- "@modelcontextprotocol/sdk": "1.15.0",
59
- "@mcp-b/global": "1.1.3-beta.3",
60
- "@mcp-b/transports": "1.1.2-beta.3",
61
- "@mcp-b/webmcp-ts-sdk": "1.0.2-beta.2"
58
+ "@modelcontextprotocol/sdk": "1.24.3",
59
+ "@mcp-b/global": "1.1.3-beta.4",
60
+ "@mcp-b/webmcp-ts-sdk": "1.0.2-beta.3",
61
+ "@mcp-b/transports": "1.1.2-beta.4"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@types/node": "22.17.2",