The Case Against Chat as the Permanent UI
Chat-based interfaces are the current "starfish design" of AI—they force users to do the heavy lifting of discovery and context management. Much like the transition from the command-line interface (CLI) to the graphical user interface (GUI) on desktop computers, agentic software is currently in a "terminal phase." To move forward, developers must treat the browser and agent interfaces as infinite canvases capable of rendering interactive, visual experiences rather than just walls of text.
MCP Apps: Bundling UI into Agentic Flows
Model Context Protocol (MCP) apps allow developers to bundle HTML, CSS, and JavaScript into a single file that renders within an agent's iframe. This transforms tool responses from raw JSON into functional, interactive surfaces.
Key implementation details include:
- Transports: While
stdiois common for local processes,HTTPtransports allow for easier deployment as web services, making them accessible to remote agent clients like Claude. - Sandboxing: MCP apps operate as isolated islands. They lack local storage and require explicit Content Security Policy (CSP) configurations to allow external resources like fonts or images.
- Design Systems: Because these apps are self-contained, they are the perfect vehicle for leveraging existing design systems. By sharing CSS and component logic from your main site, you ensure visual consistency between the web and the agent.
- Tool Interaction: Apps can call tools to handle state changes (like navigation), but developers must manage visibility carefully to prevent the LLM from attempting to parse UI-specific tool outputs as plain text.
WebMCP: Turning Websites into Agent-Ready APIs
WebMCP bridges the gap between traditional websites and browser-based agents. Instead of forcing agents to rely on brittle DOM traversal or screenshot parsing—which is compute-intensive and token-heavy—WebMCP allows developers to expose existing functions directly to the agent.
- Declarative vs. Imperative: You can use a declarative model by adding
tool-nameandtool-descriptionattributes to existing HTML forms, or an imperative model usingnavigator.registerToolto expose JavaScript functions directly. - Native Capabilities: By leveraging existing browser APIs (Web Speech, Web Animations, Canvas), developers can build rich, zero-dependency experiences that don't require additional model inference, effectively turning any website into a functional tool for an agent.