diff --git a/README.md b/README.md index ae1beb6..12c0c30 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,14 @@ # WebMCP + Legit SDK Calendar Demo A demonstration of **WebMCP** (Model Context Protocol for the web) integrated with **Legit SDK** (Git-like versioning for application state). - This project showcases how AI agents can safely make changes to application state using isolated sandbox branches, visual previews, and a commit-based workflow. - πŸ“Ί Check out the [Loom](https://www.loom.com/share/c0e34ef13fa940b4a1c7464ef1405398) to see the features in action +heißt ich muss erst einen change machen? +kannst du auch ein u +Warum speicjert du ncihts? +## OK und wenn ich jetzt hier was Γ€ndere?. + +## ## Features @@ -13,9 +17,9 @@ This project showcases how AI agents can safely make changes to application stat - **Version History**: Full commit history with undo/rollback capabilities - **MCP Tool Integration**: 19 tools for calendar operations via WebMCP - **Agent Prompts**: Built-in guidance for AI agents using the system - ## Architecture + ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ React Application β”‚ @@ -30,6 +34,7 @@ This project showcases how AI agents can safely make changes to application stat ## Quick Start + ```bash # Install dependencies npm install @@ -43,6 +48,7 @@ npm run build ## Project Structure + ``` src/ β”œβ”€β”€ legit-webmcp/ # WebMCP + Legit SDK integration layer @@ -155,73 +161,73 @@ function CalendarComponent() { Tool handlers receive a `LegitToolContext` with these methods: -| Method | Description | -|--------|-------------| -| `readState(path)` | Read JSON from versioned file | -| `writeState(path, data)` | Write JSON, creating a commit | -| `getCurrentBranch()` | Get the active branch name | -| `getHistory()` | Get commit history for branch | -| `rollback(commitOid)` | Revert to a previous commit | -| `getPastState(oid, path)` | Read file at a specific commit | +| Method | Description | Method | Description | +|------------------------------|--------------------------------|------------------------------|--------------------------------| +| `readState(path)` | Read JSON from versioned file | `readState(path)` | Read JSON from versioned file | +| `writeState(path, data)` | Write JSON, creating a commit | `writeState(path, data)` | Write JSON, creating a commit | +| `getCurrentBranch()` | Get the active branch name | `getCurrentBranch()` | Get the active branch name | +| `getHistory()` | Get commit history for branch | `getHistory()` | Get commit history for branch | +| `rollback(commitOid)` | Revert to a previous commit | `rollback(commitOid)` | Revert to a previous commit | +| `getPastState(oid, path)` | Read file at a specific commit | `getPastState(oid, path)` | Read file at a specific commit | ## MCP Tools Reference ### Sandbox & Multi-Agent Tools -| Tool | Description | -|------|-------------| -| `calendar_start_sandbox` | Create isolated branch for agent | -| `calendar_preview_changes` | Preview pending changes vs main | -| `calendar_commit_changes` | Merge agent changes to main | -| `calendar_list_agents` | List active agent sessions | -| `calendar_switch_branch` | Switch between branches | +| Tool | Description | Tool | Description | +|----------------------------|----------------------------------|----------------------------|----------------------------------| +| `calendar_start_sandbox` | Create isolated branch for agent | `calendar_start_sandbox` | Create isolated branch for agent | +| `calendar_preview_changes` | Preview pending changes vs main | `calendar_preview_changes` | Preview pending changes vs main | +| `calendar_commit_changes` | Merge agent changes to main | `calendar_commit_changes` | Merge agent changes to main | +| `calendar_list_agents` | List active agent sessions | `calendar_list_agents` | List active agent sessions | +| `calendar_switch_branch` | Switch between branches | `calendar_switch_branch` | Switch between branches | ### Version History Tools -| Tool | Description | -|------|-------------| -| `calendar_show_history` | View commit history | -| `calendar_undo` | Rollback to previous state | -| `calendar_compare_states` | Diff between commits | +| Tool | Description | Tool | Description | +|---------------------------|----------------------------|---------------------------|----------------------------| +| `calendar_show_history` | View commit history | `calendar_show_history` | View commit history | +| `calendar_undo` | Rollback to previous state | `calendar_undo` | Rollback to previous state | +| `calendar_compare_states` | Diff between commits | `calendar_compare_states` | Diff between commits | ### Visual Preview Tools -| Tool | Description | -|------|-------------| -| `calendar_show_preview` | Display phantom events in UI | -| `calendar_hide_preview` | Exit preview mode | -| `calendar_get_preview_status` | Check preview state | +| Tool | Description | Tool | Description | +|-------------------------------|------------------------------|-------------------------------|------------------------------| +| `calendar_show_preview` | Display phantom events in UI | `calendar_show_preview` | Display phantom events in UI | +| `calendar_hide_preview` | Exit preview mode | `calendar_hide_preview` | Exit preview mode | +| `calendar_get_preview_status` | Check preview state | `calendar_get_preview_status` | Check preview state | ### Calendar Operations -| Tool | Description | -|------|-------------| -| `calendar_list_events` | Query events with filters | -| `calendar_schedule_meeting` | Create new events | -| `calendar_update_event` | Modify event properties | -| `calendar_delete_event` | Remove events | -| `calendar_find_free_time` | Find available time slots | +| Tool | Description | Tool | Description | +|-----------------------------|---------------------------|-----------------------------|---------------------------| +| `calendar_list_events` | Query events with filters | `calendar_list_events` | Query events with filters | +| `calendar_schedule_meeting` | Create new events | `calendar_schedule_meeting` | Create new events | +| `calendar_update_event` | Modify event properties | `calendar_update_event` | Modify event properties | +| `calendar_delete_event` | Remove events | `calendar_delete_event` | Remove events | +| `calendar_find_free_time` | Find available time slots | `calendar_find_free_time` | Find available time slots | ### State & Navigation -| Tool | Description | -|------|-------------| -| `calendar_get_state` | Get complete calendar state | -| `calendar_filter_by_user` | Filter by participant | -| `calendar_navigate` | Change view/date | +| Tool | Description | Tool | Description | +|---------------------------|-----------------------------|---------------------------|-----------------------------| +| `calendar_get_state` | Get complete calendar state | `calendar_get_state` | Get complete calendar state | +| `calendar_filter_by_user` | Filter by participant | `calendar_filter_by_user` | Filter by participant | +| `calendar_navigate` | Change view/date | `calendar_navigate` | Change view/date | ## Agent Prompts Built-in prompts help AI agents understand the system: -| Prompt | Description | -|--------|-------------| -| `legit_demo_guide` | Comprehensive integration overview | -| `legit_quick_start` | Concise sandbox workflow | -| `legit_multi_agent_guide` | Multi-agent coordination | -| `scheduling_assistant` | Calendar assistant role | -| `legit_phantom_events` | Visual preview explanation | -| `legit_history_guide` | Version history guide | +| Prompt | Description | Prompt | Description | +|---------------------------|------------------------------------|---------------------------|------------------------------------| +| `legit_demo_guide` | Comprehensive integration overview | `legit_demo_guide` | Comprehensive integration overview | +| `legit_quick_start` | Concise sandbox workflow | `legit_quick_start` | Concise sandbox workflow | +| `legit_multi_agent_guide` | Multi-agent coordination | `legit_multi_agent_guide` | Multi-agent coordination | +| `scheduling_assistant` | Calendar assistant role | `scheduling_assistant` | Calendar assistant role | +| `legit_phantom_events` | Visual preview explanation | `legit_phantom_events` | Visual preview explanation | +| `legit_history_guide` | Version history guide | `legit_history_guide` | Version history guide | ## The Sandbox Workflow @@ -246,11 +252,11 @@ This ensures: - Users can review before committing - Multiple agents can work concurrently - Full history for auditing - ## Type Definitions ### Core Types + ```typescript interface AgentSession { agentId: string; // Unique agent identifier @@ -286,6 +292,7 @@ interface CommitRecord { ### Calendar Types + ```typescript interface IEvent { id: number; @@ -313,13 +320,282 @@ interface IUser { - **@legit-sdk/core** - Legit SDK core functionality - **Next.js 16** - React framework - **Zod** - Schema validation - ## License MIT - ## Credits - Calendar UI based on [big-calendar](https://github.com/lramos33/big-calendar) - WebMCP by [MCP-B](https://github.com/anthropics/mcp-b) - Legit SDK for versioned state management +# WebMCP + Legit SDK Calendar Demo + +A demonstration of **WebMCP** (Model Context Protocol for the web) integrated with **Legit SDK** (Git-like versioning for application state). +This project showcases how AI agents can safely make changes to application state using isolated sandbox branches, visual previews, and a commit-based workflow. +πŸ“Ί Check out the [Loom](https://www.loom.com/share/c0e34ef13fa940b4a1c7464ef1405398) to see the features in action +## Features + +- **Multi-Agent Sandboxing**: Each AI agent works in an isolated Git branch +- **Visual Previews**: Phantom events show proposed changes before committing +- **Version History**: Full commit history with undo/rollback capabilities +- **MCP Tool Integration**: 19 tools for calendar operations via WebMCP +- **Agent Prompts**: Built-in guidance for AI agents using the system +## Architecture + + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ React Application β”‚ +β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ +β”‚ ← Git-like versioned filesystem β”‚ +β”‚ ← MCP tool registration β”‚ +β”‚ ← Calendar state on branches β”‚ +β”‚ ← Tool & prompt registration β”‚ +β”‚ ← UI components β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +## Quick Start + + +```bash +# Install dependencies +npm install + +# Run development server +npm run dev + +# Build for production +npm run build +``` + +## Project Structure + + +``` +src/ +β”œβ”€β”€ legit-webmcp/ # WebMCP + Legit SDK integration layer +β”‚ β”œβ”€β”€ index.ts # Public API exports +β”‚ β”œβ”€β”€ types.ts # Type definitions +β”‚ β”œβ”€β”€ use-legit-webmcp.ts # Legit-enabled MCP tool hook +β”‚ β”œβ”€β”€ use-multi-agent.ts # Multi-agent coordination +β”‚ └── legit-calendar-context.tsx # Calendar state on Legit +β”‚ +β”œβ”€β”€ calendar/ +β”‚ β”œβ”€β”€ mcp-tools/ # MCP tool implementations +β”‚ β”‚ β”œβ”€β”€ CalendarMCPTools.tsx # Tool registry component +β”‚ β”‚ β”œβ”€β”€ agent-prompts.ts # Agent guidance prompts +β”‚ β”‚ β”œβ”€β”€ use-agent-tools.ts # Multi-agent sandbox tools +β”‚ β”‚ β”œβ”€β”€ use-event-tools.ts # Event CRUD tools +β”‚ β”‚ β”œβ”€β”€ use-filter-tools.ts # State & navigation tools +β”‚ β”‚ β”œβ”€β”€ use-history-tools.ts # Version history tools +β”‚ β”‚ β”œβ”€β”€ use-preview-tools.ts # Phantom preview tools +β”‚ β”‚ └── use-smart-tools.ts # Scheduling tools +β”‚ β”‚ +β”‚ β”œβ”€β”€ contexts/ # React contexts +β”‚ β”œβ”€β”€ components/ # UI components +β”‚ └── interfaces.ts # Type definitions +``` + +## WebMCP-Legit Integration + +### Key Hooks + +#### `useLegitWebMCP` + +Create MCP tools with Legit-powered versioned state: + +```tsx +import { useLegitWebMCP } from "@/legit-webmcp"; + +useLegitWebMCP({ + name: "calendar_add_event", + description: "Add a new calendar event", + inputSchema: { + title: z.string().describe("Event title"), + date: z.string().describe("Event date (YYYY-MM-DD)"), + }, + mutates: true, + handler: async (args, legit) => { + // Read current state from versioned filesystem + const events = await legit.readState("/calendar/events.json"); + + // Create new event + const newEvent = { id: Date.now(), ...args }; + + // Write to current branch (creates commit) + await legit.writeState("/calendar/events.json", [...events, newEvent]); + + return { success: true, event: newEvent }; + }, +}); +``` + +#### `useMultiAgentCoordination` + +Manage multi-agent sandboxes with Git-like branching: + +```tsx +import { useMultiAgentCoordination } from "@/legit-webmcp"; + +function AgentTools() { + const { + createAgentSession, // Create isolated branch + getAgentPreview, // Preview changes vs main + mergeAgentChanges, // Commit to main branch + activeSessions, // List active agents + switchToMain, // Return to main branch + } = useMultiAgentCoordination(); + + // Create a sandbox for the agent + const branch = await createAgentSession("scheduler", "claude"); + + // Preview what's changed + const preview = await getAgentPreview("scheduler"); + if (preview?.hasChanges) { + console.log(`${preview.summary.eventsAdded} events added`); + } + + // Merge when approved + await mergeAgentChanges("scheduler", { + message: "Added team sync meeting", + }); +} +``` + +#### `useLegitCalendar` + +Access calendar state backed by Legit filesystem: + +```tsx +import { useLegitCalendar } from "@/legit-webmcp"; + +function CalendarComponent() { + const { + events, // Current events on active branch + setLocalEvents, // Update events (writes to branch) + users, // Available users + getCurrentBranch, // Get active branch name + } = useLegitCalendar(); +} +``` + +### The LegitToolContext + +Tool handlers receive a `LegitToolContext` with these methods: + +## MCP Tools Reference + +### Sandbox & Multi-Agent Tools + +### Version History Tools + +### Visual Preview Tools + +### Calendar Operations + +### State & Navigation + +## Agent Prompts + +Built-in prompts help AI agents understand the system: + +## The Sandbox Workflow + +AI agents should follow this workflow when making changes: + +``` +1. Start Sandbox β†’ Creates isolated branch + ↓ +2. Make Changes β†’ Events created on agent branch + ↓ +3. Preview Changes β†’ See diff vs main branch + ↓ +4. Show Preview β†’ Display phantom events in UI + ↓ +5. Wait for Approval β†’ User reviews visual changes + ↓ +6. Commit Changes β†’ Merge to main branch +``` + +This ensures: +- Changes are invisible until approved +- Users can review before committing +- Multiple agents can work concurrently +- Full history for auditing +## Type Definitions + +### Core Types + + +```typescript +interface AgentSession { + agentId: string; // Unique agent identifier + modelName: string; // AI model (claude, gpt4, etc.) + branch: string; // Git branch name + createdAt: Date; + lastActivity: Date; +} + +interface AgentPreview { + hasChanges: boolean; + agentState: unknown; + mainState: unknown; + summary?: { + eventsAdded: number; + eventsRemoved: number; + eventsModified: number; + }; +} + +interface CommitRecord { + id: string; + timestamp: Date; + agentId: string; + message: string; + summary: { + eventsAdded: number; + eventsRemoved: number; + eventsModified: number; + }; +} +``` + +### Calendar Types + + +```typescript +interface IEvent { + id: number; + startDate: string; + endDate: string; + title: string; + color: TEventColor; + description: string; + user: IUser; + _phantom?: "added" | "modified" | "removed"; + _agentId?: string; +} + +interface IUser { + id: string; + name: string; + picturePath: string | null; +} +``` + +## Dependencies + +- **@mcp-b/react-webmcp** - WebMCP React hooks for tool registration +- **@legit-sdk/react** - Legit SDK React bindings +- **@legit-sdk/core** - Legit SDK core functionality +- **Next.js 16** - React framework +- **Zod** - Schema validation +## License + +MIT +## Credits + +- Calendar UI based on [big-calendar](https://github.com/lramos33/big-calendar) +- WebMCP by [MCP-B](https://github.com/anthropics/mcp-b) +- Legit SDK for versioned state management \ No newline at end of file