This repo is a fork of lramos33/big-calendar with WebMCP integration layered on top. It demonstrates how a regular web app can expose typed tools, prompts, and UI-backed actions to AI agents.
- WebMCP tool registration with
useWebMCPanduseWebMCPPrompt - Dialog-backed create, update, and delete flows for AI-triggered actions
- Browser-persisted calendar state using Dexie and IndexedDB
- Cross-origin runtime initialization with
initializeWebModelContext
git clone https://github.com/WebMCP-org/big-calendar
cd big-calendar
npm install
npm run devOpen http://localhost:3000.
To exercise the tools, connect with a WebMCP-capable client or embed the app in a parent page that can call its registered tools.
| File | What It Does |
|---|---|
src/app/layout.tsx |
Initializes the WebMCP runtime and transport configuration |
src/app/(calendar)/layout.tsx |
Wires up the calendar providers, tools, and controlled dialogs |
src/calendar/components/calendar-webmcp-tools.tsx |
Registers tools and starter prompts |
src/calendar/contexts/calendar-context.tsx |
Manages live calendar data backed by Dexie |
src/calendar/contexts/event-dialog-context.tsx |
Coordinates dialog-driven human and AI flows |
src/calendar/components/dialogs/event-form-dialog-content.tsx |
Shared add/edit dialog form UI |
| Tool | Description |
|---|---|
get_events |
Query events by ID, date, month, user, or search text |
get_calendar_info |
Return users, selected date, filters, colors, and display settings |
create_event |
Open a prefilled add-event dialog and create an event |
update_event |
Open a prefilled edit dialog and persist event changes |
delete_event |
Open a confirmation dialog and delete an event |
navigate |
Move the UI to today, a specific date, or an event |
configure |
Change filters, badge style, and visible hours |
| Prompt | Description |
|---|---|
reschedule_event |
Find and move an event |
create_meeting |
Create a new meeting with the current calendar context |
show_this_week |
Summarize the week and navigate the UI |
@mcp-b/globalinitializes runtime support and transport configuration.@mcp-b/react-webmcpregisters tools from React client components.- AI-triggered mutations open the same dialogs humans use, with a short countdown before auto-submit.
- Calendar data lives in IndexedDB so tool calls and UI interactions stay in sync without a backend.
The original calendar was a standalone UI. This fork adds:
- WebMCP runtime initialization
- Tool and prompt registration
- Dialog orchestration for AI-assisted mutations
- IndexedDB-backed persistence for events and users
- Calendar-specific navigation and configuration tools
- WebMCP Docs
- Start Here
- First React Tool
- @mcp-b/react-webmcp Overview
- @mcp-b/global Overview
- Tool Design
- Tool Schemas
- Tutorials
- Security and Human-in-the-Loop
- W3C Proposal
- Calendar UI: Leonardo Ramos
- WebMCP integration: WebMCP-org