---
title: WebMCP hook
description: API reference for useFullCalendarWebMCP covering options, registration lifecycle, Strict Mode behavior, and a minimal React example.
---

React hook that registers FullCalendar WebMCP tools against your host persistence.

## Signature

```ts
import { useFullCalendarWebMCP } from "@protocoltooling/fullcalendar";

function useFullCalendarWebMCP(options: FullCalendarWebMCPOptions): void;
```

## Options

| Prop | Type | Default | Description |
| - | - | - | - |
| `calendarRef` | `RefObject<FullCalendarHandle \| null>` | - | Ref attached to <FullCalendar />. |
| `events` | `CalendarEventRepository` | - | Your persistence object (list / get / create / update / delete). Not the FullCalendar events array. |
| `onEventsChanged` | `() => unknown \| Promise<unknown>` | - | Called after agent create, update, or delete so you can refresh UI state from your source of truth. |
| `onRegistrationError?` | `(error: unknown) => void` | - | Called if tool registration fails (for example duplicate tool names). |
| `capabilities?` | `FullCalendarWebMCPCapabilities` | - | Least-privilege tool exposure. Disabled capabilities omit tools from registration. See Security. |

## Example

```tsx
import FullCalendar from "@fullcalendar/react";
import { useCallback, useRef, useState } from "react";
import { useFullCalendarWebMCP, type CalendarEvent } from "@protocoltooling/fullcalendar";
import { repository } from "./events-service";

export function Calendar() {
  const calendarRef = useRef<FullCalendar>(null);
  const [events, setEvents] = useState<CalendarEvent[]>([]);

  const refreshEvents = useCallback(async () => {
    setEvents(await repository.list());
  }, []);

  useFullCalendarWebMCP({
    calendarRef,
    events: repository,
    onEventsChanged: refreshEvents,
    onRegistrationError: (error) => console.error(error),
  });

  return (
    <FullCalendar
      ref={calendarRef}
      events={events.map((event) => ({
        ...event,
        end: event.end ?? undefined,
      }))}
    />
  );
}
```

## Lifecycle

- **Registration:** Tools register in `useEffect`. Unmount aborts registration and cleans up.
- **Strict Mode:** Safe under development double-mount; no duplicate tools left behind.
- **Late WebMCP runtime:** If `document.modelContext` is missing at mount, the hook polls every 250 ms until it appears or the component unmounts.
- **Fresh options:** Tool handlers always use the latest `events` repository and callbacks without re-registering on every render.

See [`CalendarEventRepository`](/integrations/fullcalendar/reference/calendar-event-repository), [Types](/integrations/fullcalendar/reference/types), [Security](/integrations/fullcalendar/concepts/security), and [Troubleshooting](/integrations/fullcalendar/troubleshooting).