Symbiote: A Runtime Framework for Dynamic UI Building for AI Agents

Symbiote is a component-based runtime framework designed specifically for AI agents. It allows agents to dynamically describe, register, and render web components at runtime, enabling interface and workflow updates without restarting the server. Maintained by rnd-pro, this project was released on GitHub on June 3, 2026 (link: https://github.com/rnd-pro/symbiote-node) to address the limitation of traditional web development models, which fail to meet the agents' need for "building interfaces while conversing".

With the rapid development of Large Language Models (LLMs) and AI agents, traditional web development models face new challenges. Traditional applications require developers to pre-write code, build interfaces, and then deploy. However, in agent-driven scenarios, AI needs to dynamically generate interfaces during conversations, render components in real time, and adjust layouts based on context—all these operations must be done at runtime, not during development. Existing front-end frameworks assume code is fixed at build time, making it hard to meet the agents' need for "building interfaces while conversing", which led to the creation of Symbiote.

Symbiote is a modular workspace consisting of three core packages:

1. symbiote-ui: Component and layout layer, providing a Web Components library, UI primitives, Provider directory, theme system, Schema rules, WebMCP metadata, and JSDA SSR integration contracts;
2. symbiote-engine: Runtime engine layer, responsible for graph runtime, CLI commands, server tools, registry, persistence, and processors;
3. symbiote-node: Migration compatibility layer, offering a smooth transition path for existing projects, with new features focused on the ui and engine packages.

Symbiote enables agents to "describe interfaces with data". Key mechanisms include:

• Components as Data: Agents can describe components as structured data (tag names, attribute events, SSR categories, etc.) without understanding the underlying code;
• On-Demand Registration and Hydration: Web Components are registered on demand at runtime, rendered in chat windows, and browser behaviors are hydrated without restarting;
• WebMCP Protocol Support: Defines tool descriptors, input modes, annotation permissions, and SSR mode markers, allowing agents to query and safely combine components.

Practical applications of Symbiote include:

1. Conversational Interface Generation: When users request dataset analysis, agents can dynamically render interactive visualization interfaces;
2. Intelligent Layout Composition: Incrementally build layouts based on context (e.g., search form → result list → detail panel);
3. Workflow State Visualization: Real-time updates of project graph status, displaying execution steps and blocked nodes, allowing users to interactively adjust parameters.

Symbiote's security design includes:

• Principle of Least Exposure: Components only expose intentional public capabilities to prevent dangerous operations;
• Permissions and Visibility: Control callers and visibility conditions via annotations, exposedTo, and visibilityDeps fields;
• Host Control Boundaries: Layered responsibilities (ui handles component metadata, engine handles runtime, host handles routing/authorization, etc.) to keep the framework focused and give hosts control space.

Symbiote represents a new front-end architecture idea shifting from "developers writing code" to "agents dynamically building". It does not replace traditional frameworks like React/Vue but provides specialized runtime capabilities for the AI era. It offers AI application development teams protocols and implementations covering component description, dynamic registration, SSR security, and agent interaction, with a modular design allowing on-demand use. As the MCP (Model Context Protocol) standard becomes widespread, agent-native UI frameworks like Symbiote may become key infrastructure for AI application development.