git404hub

what is lyra-agent-ui-demo fr?

petehsu/lyra-agent-ui-demo — explained in plain English

Analysis updated 2026-05-18

1TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A React component library and demo for building the chat interface of an AI coding agent, including tool calls and reasoning display.

vibe map

vibe map loading… check back in a sec.

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add a polished chat UI to an AI coding tool without designing the interface from scratch.

VIBE 2

Show an agent's tool calls, reasoning, and permission requests in a structured, collapsible panel.

VIBE 3

Connect any backend AI service to the UI by feeding it a single data provider object.

what's the stack?

TypeScriptReactViteMermaid

how it stacks up fr

petehsu/lyra-agent-ui-demo0xkinno/neuralvault0xmayurrr/ai-contractauditor
Stars111
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardeasy
Complexity2/54/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

Backend-agnostic, you must supply your own AI service and wire it into the DataProviderValue format.

in plain english

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.

prompts (copy fr)

prompt 1
Show me how to wrap my backend's session and messages into Lyra's DataProviderValue format.
prompt 2
Explain how Lyra's permission and decision panel works when an agent needs user approval.
prompt 3
Help me set up AgentChatApp with a custom sendMessage callback for my own AI backend.
prompt 4
Walk me through Lyra's collapsible three-level tool call display.

Frequently asked questions

what is lyra-agent-ui-demo fr?

A React component library and demo for building the chat interface of an AI coding agent, including tool calls and reasoning display.

What language is lyra-agent-ui-demo written in?

Mainly TypeScript. The stack also includes TypeScript, React, Vite.

How hard is lyra-agent-ui-demo to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is lyra-agent-ui-demo for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.