Inspiration
AI integrations don't scale when every tool needs a custom connection to every AI client. Morphe takes a different approach: use a common standard so one integration works across many clients — the "USB-C of AI."
We wanted to prove that idea on a real product, not a toy.
A form builder was a natural fit for WebMCP. Forms are highly interactive, but difficult for agents to operate. An API can expose data, but WebMCP lets an agent actually operate the application in the browser.
What it does
Morphe is a form builder originally built as part of a larger platform. For this hackathon, we extracted it into a standalone product and added MCP at two levels.
Through backend MCP, agents can create, manage, publish, submit, analyse, and export forms.
Through WebMCP, agents can operate the actual web app — opening the form list, entering the editor, viewing submissions, opening previews, and navigating the app via the use of tools.
The key idea is that humans and agents share the same workspace. There is no separate agent mode or shadow API. Both use the same data, validation, and business logic.
How we built it
Morphe uses FastAPI + React/Vite, deployed on Render and Vercel.
Because WebMCP is still a draft standard, the frontend detects support through document.modelContext. If available, we register our tools; otherwise, the app works normally.
We exposed 20 WebMCP tools across two groups:
- Form operations: create, update, publish, submit, analytics, and export.
- Navigation: move between the form list, editor, submissions, preview, and other views.
Navigation uses the application's real router, so agents operate the actual SPA rather than simulating page changes.
Challenges
The biggest challenge was building around an emerging standard while keeping the product reliable without it.
We also dealt with production-only routing failures, a CDN issue affecting a specific API path, CORS between separately deployed services, and extracting the application from its larger codebase.
Accomplishments
We turned an existing project into a standalone, deployed product with:
- 20 WebMCP tools
- Backend MCP support
- Agent-driven browser navigation
- Graceful degradation when WebMCP isn't supported
What we learned
WebMCP isn't just useful for AI. Designing interfaces that are easier for agents to understand can also improve accessibility and usability for people.
We also learned that emerging standards require graceful degradation: detect what the platform supports, enhance when possible, and never make the core product depend on it.
What's next
Morphe will become the foundation for the larger platform. Next we're planning Postgres persistence, authentication, richer analytics, conditional logic, embeds, and a larger agent tool surface.
The goal remains simple: humans and AI should be able to operate the same product, without bespoke integrations for every AI client.
Built With
- alembic
- dnd-kit
- fastapi
- model-context-protocol-(mcp)
- python
- react
- react-router
- recharts
- render
- sqlalchemy
- sqlite
- streamable-http
- typescript
- vercel
- vite
- webmcp

Log in or sign up for Devpost to join the conversation.