CoPlan

• 

  The CoPlan board a human-added activity and an agent-added activity, same live itinerary.

• 

  Without WebMCP, agents guess at buttons. With WebMCP, they call structured tools directly.

• 

  One registerTool() call powers both the agent's action and the "Add activity" button no separate code paths.

Inspiration

Trip planning is one of those tasks that's part research, part taste. An AI agent is great at the research part searching activities, checking budgets but most agents have to guess their way through a website's buttons and forms to actually act on anything. WebMCP changes that: a site can just tell the agent exactly what it's allowed to do. We wanted to build something where that difference is immediately visible, not just theoretical

What it does

CoPlan is a shared trip-planning board. You can edit it by hand add activities, adjust costs, change the destination and an AI agent can edit the exact same board through real WebMCP tools (add_activity, search_activities, set_trip_details, and more). Whether a person or an agent makes a change, it lands on the same live itinerary, instantly.

How we built it

Next.js (App Router) with TypeScript, deployed on Vercel. The backend is a set of simple API routes backed by in-memory state. On the frontend, we register WebMCP tools via document.modelContext.registerTool(), and every tool's execute() calls the same API routes the human-facing UI uses one source of truth, no separate "agent path."

Challenges we ran into

Next.js (App Router) with TypeScript, deployed on Vercel. The backend is a set of simple API routes backed by in-memory state. On the frontend, we register WebMCP tools via document.modelContext.registerTool(), and every tool's execute() calls the same API routes the human-facing UI uses one source of truth, no separate "agent path."

Accomplishments that we're proud of

What we learned

Getting a fully working, spec-compliant WebMCP integration live and verifiable end-to-end registration, discovery (getTools()), and execution (executeTool()) all confirmed working against our real deployed app, not a mock.

What's next for CoPlan

That "agent-native" design is really just good API design pointed at a new kind of caller. Keeping one shared backend for both human and agent actions turned out to be the most important decision we made it meant we never had to worry about the two getting out of sync.

Built With

• css
• javascript
• manus
• nextjs
• node.js
• react
• typescript
• vercel
• webmcp