Enable AI agents to use your frontend app like a tool

Did you ever want to control your frontend app (like a dashboard) through AI while being able to take over at any point? I was curious how to make frontend apps fully programmable and built a library called MCP-Web that lets you expose state, actions, and UI as MCP tools+apps for AI while maintaining human agency.

Code: https://github.com/flekschas/mcp-web Docs: https://mcp-web.dev

With MCP-Web, your frontend app becomes the MCP server. AI doesn’t need to parse HTML to identify possible actions. It gets typed tools to directly manipulate your frontend app’s state like your UIs do.

This approach makes the frontend (instead of the database) the main control surface, which has a few benefits. Primarily, it makes human-AI parity straightforward. Humans control state through UIs and AI controls the very same state through MCP tools. So both have the same capabilities. This also enables mixed-initiative interactions: you can automate some tasks with natural language and use pointer interactions for others when you want to.

Try it: https://todo.demo.mcp-web.dev is a todo app that either you or AI can fully control.

Another benefit of making the frontend the main control surface is when your UI has rich ephemeral state that shouldn’t live in a database. Think of dashboards, visualization tools, or visual analytics with crossfilters, selections, and dynamic color scales. Or a 3D viewer with camera and display settings. These view models are often larger than the data model itself. Moreover, if you want AI to show UIs to the user (via MCP apps), the frontend is the natural place to define them as it already renders those UI components in the browser.

A good example is the HiGlass genome browser: https://higlass.demo.mcp-web.dev lets you browse and configure it using any MCP-compatible AI agent.

To build AI-controllable frontend apps with MCP-Web, the main work involves modeling your frontend state declaratively. Break your state into atomic and derived units, and describe it with Zod schemas. Exposing your state as tools is then straightforward. MCP-Web comes with utilities to streamline the automatic generation of token-efficient MCP tools and apps, and is framework agnostic.

MCP-Web also lets you trigger AI queries directly from the frontend. Your app can “ask” AI questions, not just respond to AI requests. As an example, https://checkers.demo.mcp-web.dev is a checkers game where you play against AI. But since the app is AI-controllable, you can also let AI play against AI or have AI explain moves.

If you’re curious about the philosophy and design decisions behind MCP-Web, keep on reading at https://mcp-web.dev/made-with-love.