{"id":50658662,"url":"https://github.com/asouqi/webmcp-adapter-react","last_synced_at":"2026-06-08T01:05:49.284Z","repository":{"id":356588561,"uuid":"1232254012","full_name":"asouqi/webmcp-adapter-react","owner":"asouqi","description":"React hooks for WebMCP tool registration. Provides a simple useTools hook to register AI-powered tools within React component lifecycle","archived":false,"fork":false,"pushed_at":"2026-05-08T18:10:51.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-08T20:10:43.690Z","etag":null,"topics":["ai","browser","hooks","mcp","model-context-protocol","react","tools","webmcp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asouqi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-07T18:40:03.000Z","updated_at":"2026-05-08T18:12:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/asouqi/webmcp-adapter-react","commit_stats":null,"previous_names":["asouqi/webmcp-adapter-react"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/asouqi/webmcp-adapter-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asouqi%2Fwebmcp-adapter-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asouqi%2Fwebmcp-adapter-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asouqi%2Fwebmcp-adapter-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asouqi%2Fwebmcp-adapter-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asouqi","download_url":"https://codeload.github.com/asouqi/webmcp-adapter-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asouqi%2Fwebmcp-adapter-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34043826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-07T02:00:07.652Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","browser","hooks","mcp","model-context-protocol","react","tools","webmcp"],"created_at":"2026-06-08T01:05:49.193Z","updated_at":"2026-06-08T01:05:49.279Z","avatar_url":"https://github.com/asouqi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webmcp-adapter-react\n\nReact hooks for WebMCP tool registration. Provides a simple `useTools` hook to register AI-powered tools within React component lifecycle.\n\n## Installation\n\n```bash\nnpm install webmcp-adapter-react webmcp-adapter\n```\n\n## API\n\n### `useTools(options)`\n\nRegisters tools with WebMCP and automatically unregisters them on unmount or when dependencies change.\n\n```typescript\ninterface UseToolsOptions {\n    /** Tools to register */\n    tools: ToolDefinition[]\n    /** Dependencies that should trigger re-registration */\n    deps?: unknown[]\n}\n\nfunction useTools(options: UseToolsOptions): void\n```\n\n## How It Works\n\n1. Tools are registered when the component mounts\n2. Tools are unregistered when the component unmounts\n3. If `deps` change, tools are unregistered and re-registered\n\n```tsx\nuseTools(tools, [fields])\n//              ^^^^^^^^\n//              When fields change:\n//              1. Unregister old tools\n//              2. Register new tools\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport { useTools } from 'webmcp-adapter-react'\nimport { defineTool } from 'webmcp-adapter'\n\nfunction App() {\n    const tools = [\n        defineTool({\n            name: 'greet',\n            description: 'Greet the user',\n            inputSchema: {\n                type: 'object',\n                properties: {\n                    name: { type: 'string' }\n                },\n                required: ['name']\n            },\n            execute: ({ name }) =\u003e ({\n                content: [{ type: 'text', text: `Hello, ${name}!` }]\n            })\n        })\n    ]\n\n    useTools(tools)\n\n    return \u003cdiv\u003eMy App\u003c/div\u003e\n}\n```\n\n### With `webmcp-forms`\n\n```tsx\nimport { useState } from 'react'\nimport { useTools } from 'webmcp-adapter-react'\nimport { createFormTools } from 'webmcp-forms'\n\nconst fields = {\n    name: { type: 'string', required: true },\n    email: { type: 'string', required: true }\n}\n\nfunction ContactForm() {\n    const [values, setValues] = useState({ name: '', email: '' })\n\n    useTools({\n        tools: createFormTools({\n            formId: 'test',\n            fields,\n            values,\n            onChange: (field, value) =\u003e {\n                setValues((prev) =\u003e ({ ...prev, [field]: value }));\n            },\n            selectedTools: new Set\u003cFormTools\u003e(['fill-field', 'clear-field']),\n        }),\n        deps: [fields]\n    })\n\n    return (\n        \u003cform\u003e\n            \u003cinput\n                value={values.name}\n                onChange={e =\u003e setValues(prev =\u003e ({ ...prev, name: e.target.value }))}\n                placeholder=\"Name\"\n            /\u003e\n            \u003cinput\n                value={values.email}\n                onChange={e =\u003e setValues(prev =\u003e ({ ...prev, email: e.target.value }))}\n                placeholder=\"Email\"\n            /\u003e\n            \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n        \u003c/form\u003e\n    )\n}\n```\n\n## Requirements\n\n- React 18.0.0 or higher\n- `webmcp-adapter` as a peer dependency\n- Browser with WebMCP support (`document.modelContext` or `navigator.modelContext`)\n\n## Related Packages\n\n- [`webmcp-adapter`](https://github.com/asouqi/webmcp-adapter) - Core adapter for defining and registering tools\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasouqi%2Fwebmcp-adapter-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasouqi%2Fwebmcp-adapter-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasouqi%2Fwebmcp-adapter-react/lists"}