@burnishdev/components

Renders structured MCP (Model Context Protocol) tool call results as interactive web components using Lit's reactive templating system. Converts tool response objects into declarative, shadow-DOM-encapsulated UI elements with automatic reactivity and efficient re-rendering via Lit's virtual DOM diffing. Integrates directly with MCP servers by consuming standardized tool result schemas and mapping them to component properties.

Maps MCP tool result schemas to appropriate Lit component implementations, automatically selecting the correct renderer based on tool metadata and output type. Uses schema introspection to determine component properties, event handlers, and layout strategies without manual configuration. Implements a registry pattern where tool types are matched to component implementations at runtime.

Binds MCP tool result data to Lit component properties with automatic reactivity, triggering re-renders when tool outputs change. Uses Lit's @property decorator and reactive update cycle to efficiently propagate data changes through the component tree. Supports two-way binding for interactive tool results that require user input or state management.

Encapsulates tool result component styles within shadow DOM boundaries, preventing CSS conflicts with host application styles and ensuring component style isolation. Each tool result component renders into its own shadow root with scoped CSS, using Lit's css`` tagged template literals for style definition. Supports CSS custom properties (CSS variables) for theming across encapsulated components.

Manages Lit component lifecycle events (connectedCallback, disconnectedCallback, updated) in coordination with MCP server connections and tool result streaming. Handles component initialization when mounted in the DOM, cleanup when removed, and state synchronization with MCP server state. Implements proper resource cleanup (event listeners, subscriptions) to prevent memory leaks in long-running MCP client applications.

Emits custom DOM events from tool result components for user interactions (clicks, form submissions, selections) and propagates them up the component tree using standard DOM event bubbling. Implements CustomEvent with detailed event data including tool context, result metadata, and interaction payload. Allows parent applications to listen for and respond to tool result interactions without tight coupling.

Composes Lit html`` templates to render complex, nested tool results with conditional rendering, loops, and nested components. Uses Lit's template directives (if, repeat, classMap) to build dynamic UIs based on tool result structure and metadata. Supports template composition patterns for reusing common result layouts across different tool types.