petehsu/lyra-agent-ui-demo — explained in plain English
Analysis updated 2026-05-18
Add a polished chat UI to an AI coding tool without designing the interface from scratch.
Show an agent's tool calls, reasoning, and permission requests in a structured, collapsible panel.
Connect any backend AI service to the UI by feeding it a single data provider object.
| petehsu/lyra-agent-ui-demo | 0xkinno/neuralvault | 0xmayurrr/ai-contractauditor | |
|---|---|---|---|
| Stars | 1 | 1 | 1 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | hard | easy |
| Complexity | 2/5 | 4/5 | 2/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Backend-agnostic, you must supply your own AI service and wire it into the DataProviderValue format.
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.
A React component library and demo for building the chat interface of an AI coding agent, including tool calls and reasoning display.
Mainly TypeScript. The stack also includes TypeScript, React, Vite.
Setup difficulty is rated easy, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.