petehsu/lyra-agent-ui-demo

Lyra Agent UI Demo is a React component library and demo shell for building the visual interface of an AI coding agent, the kind of chat window where you see the agent's messages, its tool calls, and its reasoning as it works through a task. If you are building an AI-powered coding tool or IDE and need a polished chat UI, this library gives you the building blocks without having to design them from scratch. The core idea is that the library is backend-agnostic: it does not connect to any specific AI service. Instead, you feed it a data object called DataProviderValue that contains the current conversation state, and the UI renders from that. The code examples show the integration pattern clearly, you import AgentChatApp and createDataProviderValue, wrap your backend's session and messages into the provider format, pass in a sendMessage callback, and render the component. Mock data is kept in a separate sub-entry so production builds never accidentally include demo fixtures. The library supports rich output formats including Markdown, code highlighting, Mermaid diagrams, and streaming text. It also includes a permission and decision panel, a UI element that appears above the input box when the agent needs the user to approve or deny an action, which is common in agentic coding workflows. There is also a collapsible three-level tool call display, floating task and diff summaries for long-running sessions, and small polish details like streaming shimmers and scroll-follow behavior. The project is written in TypeScript and built on React and Vite. It is licensed under Apache 2.0.