richardgill/llm-ui

The React library for LLMs

What it solves

It solves the common visual glitches and performance issues encountered when rendering streamed text from Large Language Models (LLMs) in React applications, such as broken markdown syntax appearing during the stream and jerky output movement.

How it works

The library provides a headless React component system that handles the streaming output. It uses throttling to smooth out pauses in the stream and renders at the native frame rate to ensure a fluid user experience. It also integrates with Shiki for high-quality code block rendering and allows developers to integrate their own custom components into the LLM's output.

Who it’s for

Frontend developers building AI chat interfaces or LLM-powered applications using React.

Highlights

  • Smooth Streaming: Uses throttling to prevent jerky text appearance.
  • Clean Rendering: Automatically removes broken markdown syntax during the streaming process.
  • Customizable: Headless design allows for custom styling and the addition of custom components to the output.
  • Code Support: High-quality code blocks for all languages via Shiki integration.

Related

  • Project
  • Project
  • Project
  • Project