> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-b.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# usewebmcp overview

> Register React state and actions as WebMCP tools with upstream types and JSON Schema input inference.

`usewebmcp` exposes a component's current state and actions through WebMCP tools:

```tsx title="Counter.tsx" theme={null}
'use client';

import { useState } from 'react';
import { useWebMCP } from 'usewebmcp';

export function Counter() {
  const [count, setCount] = useState(0);

  useWebMCP({
    name: 'get_count',
    description: 'Get the current counter value',
    annotations: { readOnlyHint: true },
    execute: () => ({ count }),
  });

  return (
    <button type="button" onClick={() => setCount((value) => value + 1)}>
      Count: {count}
    </button>
  );
}
```

Each call reads the latest committed counter. Registration and cleanup follow the component lifecycle.

## Package boundary

The hook uses Community Group [types](https://github.com/webmachinelearning/webmcp-types)
and accepts upstream JSON Schema metadata without runtime validation. Supply native WebMCP, the
[polyfill](/packages/webmcp-polyfill/overview), or [MCP-B runtime](/packages/global/overview).
React 18/19 and `'use client'` are supported. The hook rejects Standard Schema validators such as
Zod. For Standard Schema validation, MCP output metadata, prompts, resources, or formatted agent
responses, use [`@mcp-b/react-webmcp`](/packages/react-webmcp/reference).

[Framework setup](/how-to/frameworks) · [API reference](/packages/usewebmcp/reference) ·
[Schema guide](/how-to/use-schemas-and-structured-output)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.