Repolode
Submit
richardgill

richardgill/llm-ui

A React component library for rendering streamed LLM output, fixing broken markdown and supporting custom components and syntax-highlighted code blocks.

View on GitHubWebsite
Stars
1,752
Forks
90
Open issues
18
Last commit
last month

What is it?

llm-ui is a React library for displaying text produced by large language models. Streamed LLM output often arrives with incomplete markdown, such as unclosed code fences or half-written emphasis, which can break rendering. The library removes this broken syntax so the output displays cleanly while it is still streaming.

Beyond cleanup, it smooths the stream with throttling so pauses in token delivery do not cause visible stutter, and it renders updates at the browser's native frame rate. Code blocks are highlighted for every language using Shiki. Developers can also register their own React components to render specific patterns in LLM output.

The library is headless, so it does not impose a visual style and you bring your own CSS or design system.

Key features

  • 01Removes broken markdown syntax from partially streamed output.
  • 02Throttles streamed text to smooth out pauses in delivery.
  • 03Renders updates at native frame rate.
  • 04Highlights code blocks in every language via Shiki.
  • 05Lets you add custom React components to LLM output.
  • 06Headless, so styling is fully up to you.

Use cases

  • Building a chat interface that displays streamed responses from an LLM API.
  • Rendering markdown and code from AI assistants in a React web app.
  • Embedding custom interactive widgets within AI-generated answers.

Quick start

  1. 1

    Install the llm-ui package

  2. 2

    Read the documentation for usage

Things to know

  • The README does not show an install command, so setup details must be taken from the external documentation.

In collections

Claude Code tools, skills & pluginsFrontend frameworks & UI componentsStreaming toolsStatic site generators & documentation tools

Topics

#react#llm#markdown#streaming#ui-components#syntax-highlighting#typescript#chatgpt#claude#component-library

FAQ

What is llm-ui?
A React component library for rendering streamed LLM output, fixing broken markdown and supporting custom components and syntax-highlighted code blocks. llm-ui is a React library for displaying text produced by large language models. Streamed LLM output often arrives with incomplete markdown, such as unclosed code fences or half-written emphasis, which can break rendering. The library removes this broken syntax so the output displays cleanly while it is still streaming.
Is llm-ui free to use? What license does it have?
llm-ui is open source under the MIT license. Check the license terms before using it in commercial products.
Is llm-ui still maintained?
Updated within 6 months. The last commit to llm-ui was on Sep 29, 2026.
What can I use llm-ui for?
Building a chat interface that displays streamed responses from an LLM API. Rendering markdown and code from AI assistants in a React web app. Embedding custom interactive widgets within AI-generated answers.
How do I install llm-ui?
Install the llm-ui package Read the documentation for usage
Where can I get llm-ui?
The source code and installation instructions are on GitHub: https://github.com/richardgill/llm-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects