https://github.com/asouqi/webmcp-adapter-react
React hooks for WebMCP tool registration. Provides a simple useTools hook to register AI-powered tools within React component lifecycle
https://github.com/asouqi/webmcp-adapter-react
ai browser hooks mcp model-context-protocol react tools webmcp
Last synced: about 2 months ago
JSON representation
React hooks for WebMCP tool registration. Provides a simple useTools hook to register AI-powered tools within React component lifecycle
- Host: GitHub
- URL: https://github.com/asouqi/webmcp-adapter-react
- Owner: asouqi
- License: mit
- Created: 2026-05-07T18:40:03.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-05-08T18:10:51.000Z (3 months ago)
- Last Synced: 2026-05-08T20:10:43.690Z (3 months ago)
- Topics: ai, browser, hooks, mcp, model-context-protocol, react, tools, webmcp
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webmcp-adapter-react
React hooks for WebMCP tool registration. Provides a simple `useTools` hook to register AI-powered tools within React component lifecycle.
## Installation
```bash
npm install webmcp-adapter-react webmcp-adapter
```
## API
### `useTools(options)`
Registers tools with WebMCP and automatically unregisters them on unmount or when dependencies change.
```typescript
interface UseToolsOptions {
/** Tools to register */
tools: ToolDefinition[]
/** Dependencies that should trigger re-registration */
deps?: unknown[]
}
function useTools(options: UseToolsOptions): void
```
## How It Works
1. Tools are registered when the component mounts
2. Tools are unregistered when the component unmounts
3. If `deps` change, tools are unregistered and re-registered
```tsx
useTools(tools, [fields])
// ^^^^^^^^
// When fields change:
// 1. Unregister old tools
// 2. Register new tools
```
## Usage
### Basic Usage
```tsx
import { useTools } from 'webmcp-adapter-react'
import { defineTool } from 'webmcp-adapter'
function App() {
const tools = [
defineTool({
name: 'greet',
description: 'Greet the user',
inputSchema: {
type: 'object',
properties: {
name: { type: 'string' }
},
required: ['name']
},
execute: ({ name }) => ({
content: [{ type: 'text', text: `Hello, ${name}!` }]
})
})
]
useTools(tools)
return
My App
}
```
### With `webmcp-forms`
```tsx
import { useState } from 'react'
import { useTools } from 'webmcp-adapter-react'
import { createFormTools } from 'webmcp-forms'
const fields = {
name: { type: 'string', required: true },
email: { type: 'string', required: true }
}
function ContactForm() {
const [values, setValues] = useState({ name: '', email: '' })
useTools({
tools: createFormTools({
formId: 'test',
fields,
values,
onChange: (field, value) => {
setValues((prev) => ({ ...prev, [field]: value }));
},
selectedTools: new Set(['fill-field', 'clear-field']),
}),
deps: [fields]
})
return (
setValues(prev => ({ ...prev, name: e.target.value }))}
placeholder="Name"
/>
setValues(prev => ({ ...prev, email: e.target.value }))}
placeholder="Email"
/>
Submit
)
}
```
## Requirements
- React 18.0.0 or higher
- `webmcp-adapter` as a peer dependency
- Browser with WebMCP support (`document.modelContext` or `navigator.modelContext`)
## Related Packages
- [`webmcp-adapter`](https://github.com/asouqi/webmcp-adapter) - Core adapter for defining and registering tools
## License
MIT