---
title: Quickstart
description: Install FullCalendar WebMCP, connect your existing event persistence, register the React hook, and verify agent tools work end to end.
sidebar:
  order: 1
---

Make an existing FullCalendar React calendar operable by AI agents in a few minutes.

## Install

```package-install
npm install @protocoltooling/fullcalendar
```

Peer dependencies: `react` (`>=17 <20`) and `@fullcalendar/react` (`^6` or `^7`).

## Add your event repository

Wire the five operations you already use for persistence. Replace the `api` calls with your own:

```ts
import type { CalendarEventRepository } from "@protocoltooling/fullcalendar";
import { api } from "./my-api-client";

export const repository: CalendarEventRepository = {
  list: (query) => api.events.list(query),
  get: (id) => api.events.get(id),
  create: (input) => api.events.create(input),
  update: (id, input) => api.events.update(id, input),
  delete: (id) => api.events.delete(id),
};
```

This object is what you pass as `events` to the hook. It is your persistence—not FullCalendar’s in-memory event list.

## Register WebMCP

Attach a ref to FullCalendar, pass your repository, and refresh React state after agent mutations:

```tsx
import FullCalendar, { type CalendarRef } from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/react/daygrid";
import { useCallback, useEffect, useRef, useState } from "react";
import {
  useFullCalendarWebMCP,
  type CalendarEvent,
} from "@protocoltooling/fullcalendar";
import { repository } from "./repository";

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

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

  useEffect(() => {
    void refreshEvents();
  }, [refreshEvents]);

  useFullCalendarWebMCP({
    calendarRef,
    events: repository,
    onEventsChanged: refreshEvents,
  });

  return (
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={events.map((event) => ({
        ...event,
        end: event.end ?? undefined,
      }))}
    />
  );
}
```

:::note
FullCalendar React **v6** uses `useRef<FullCalendar>(null)` and `import dayGridPlugin from "@fullcalendar/daygrid"`. See [Troubleshooting](/integrations/fullcalendar/troubleshooting).
:::

Protocol Tooling uses your existing authenticated session. Authorization remains your backend's job — see [Security](/integrations/fullcalendar/concepts/security).

## Verify

Use this **Chrome local** path. It does not require an AI agent to prove registration and tool execution.

### 1. Enable WebMCP in Chrome

1. Open `chrome://flags/#enable-webmcp-testing`
2. Set **WebMCP Testing** to **Enabled**
3. Relaunch Chrome

See Chrome’s [WebMCP docs](https://developer.chrome.com/docs/ai/webmcp) for origin-trial and production notes. Local development uses the flag above.

### 2. Load your calendar

Run your app and open the calendar page on `http://localhost` (or another origin-isolated secure context).

### 3. Confirm the six tools registered

1. Open **Chrome DevTools**
2. Open the **Application** panel
3. In the sidebar, select **WebMCP**
4. Under **Available Tools**, confirm these names are listed:

   - `calendar_get_context`
   - `calendar_list_events`
   - `calendar_get_event`
   - `calendar_create_event`
   - `calendar_update_event`
   - `calendar_delete_event`

**You are done with registration when** all six appear in **Available Tools**.

If the list is empty, see [Troubleshooting](/integrations/fullcalendar/troubleshooting#the-agent-cannot-see-calendar-tools). Chrome’s panel docs: [Debug WebMCP tools](https://developer.chrome.com/docs/devtools/application/webmcp).

### 4. Run one read and one write from DevTools

Still in **Application → WebMCP → Available Tools**:

1. Open `calendar_list_events` → **Run tool** (leave filters empty).  
   **Observable result:** status **Completed**; returned `events` match what FullCalendar shows.
2. Open `calendar_create_event` → **Run tool** with:

   ```json
   {
     "title": "Agent Test Meeting",
     "start": "2026-09-05T14:00:00Z",
     "end": "2026-09-05T15:00:00Z"
   }
   ```

   **Observable result:** status **Completed**; returned `event.id` is non-empty; the event appears on the calendar **without** a manual page refresh (`onEventsChanged` ran).

### 5. Confirm host persistence

Hard-reload the page.

**You are done when** the test event is still on the calendar (your repository persisted it).

### Optional: natural-language agent check

Install Chrome’s [Model Context Tool Inspector](https://developer.chrome.com/docs/ai/webmcp#imitate-agent-chat-with-the-inspector-extension) and prompt:

> List the events on this calendar, then create a 30-minute event titled “WebMCP smoke test” tomorrow at 10:00 in the browser’s timezone.

**Observable result:** the inspector shows tool calls to `calendar_list_events` / `calendar_create_event`, and the calendar UI updates.

For a longer checklist, see [Testing](/integrations/fullcalendar/guides/testing).

## Next steps

- [Existing app](/integrations/fullcalendar/guides/existing-app) — integrate without changing your FullCalendar UI
- [Next.js](/integrations/fullcalendar/guides/nextjs) — App Router client components and server actions
- [Custom event models](/integrations/fullcalendar/guides/custom-event-model) — map bookings/sessions and optional `metadata`
- [WebMCP tools](/integrations/fullcalendar/concepts/webmcp) — tool inputs and returns
- [Agent tool workflows](/integrations/fullcalendar/concepts/agent-tools) — how agents compose the six tools
- [Security](/integrations/fullcalendar/concepts/security) — auth boundaries, capabilities, and data minimization
- [API reference](/integrations/fullcalendar/reference/use-fullcalendar-webmcp) — hook options and types