Skip to content
FullCalendar WebMCP
Esc
↑↓navigate↵open⌘Jpreview
On this page

Quickstart

Install FullCalendar WebMCP, connect your existing event persistence, register the React hook, and verify agent tools work end to end.

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

Install

npm install @protocoltooling/fullcalendar
pnpm add @protocoltooling/fullcalendar
yarn add @protocoltooling/fullcalendar
bun add @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:

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:

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,
      }))}
    />
  );
}

Protocol Tooling uses your existing authenticated session. Authorization remains your backend’s job — see 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 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. Chrome’s panel docs: Debug WebMCP tools.

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:

    {
  "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 and prompt:

List the events on this calendar, then create a 30-minute event titled “WebMCP smoke test” tomorrow at 10 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.

Next steps

Was this page helpful?