How do I add syntax highlighting to code blocks in llm-ui?

llm-ui integrates Shiki for syntax highlighting, automatically rendering code blocks for all programming languages based on the detected language in the LLM output, without additional configuration needed.

Can I use llm-ui with Next.js for server-side rendering?

Yes, llm-ui is compatible with Next.js and other React-based frameworks, but since it handles streaming, ensure your SSR setup accommodates client-side hydration for dynamic content to avoid performance issues.

What makes llm-ui different from using a regular markdown parser with React?

llm-ui is specifically optimized for LLM output, with built-in features like stream throttling and markdown cleanup that address common quirks in AI-generated content, which generic parsers might not handle effectively.

How to customize the appearance of llm-ui components?

As a headless library, you apply custom styles via CSS or CSS-in-JS by targeting the rendered HTML elements; the library provides the functional structure without any imposed styles, giving full design control.

Is llm-ui better than shadcn/ui for building AI chatbots?

llm-ui is tailored for LLM interaction with streaming optimizations and markdown handling, while shadcn/ui offers pre-styled components; choose llm-ui for core LLM output management and shadcn/ui for ready-made designs, or combine both for a complete solution.

Does llm-ui support non-streaming LLM responses or batch processing?

While optimized for streaming, llm-ui can handle static or batch LLM responses, but its key features like throttling may be less beneficial, making it potentially overkill for such use cases.

llm-ui — React UI Library for LLM Apps

What is llm-ui?

llm-ui is a React library that provides components and utilities for building user interfaces that display content from Large Language Models. It solves the problem of handling streaming LLM output by cleaning up markdown, smoothing playback, and allowing custom component integration while remaining completely headless for styling flexibility.

Target Audience

Frontend developers building applications that integrate LLM features like AI chatbots, code assistants, or content generation tools with streaming responses.

Value Proposition

Developers choose llm-ui because it specifically addresses the technical challenges of LLM output rendering—like broken markdown and choppy streaming—while providing a headless architecture that doesn't lock them into specific design systems or styling approaches.

The React library for LLMs

Use Cases

Best For

Building AI chatbot interfaces with smooth streaming responses
Creating code generation tools with syntax-highlighted output
Developing content creation apps that integrate LLM output
Implementing custom UI components around LLM-generated content
Handling markdown cleanup from LLM responses in React apps
Optimizing performance for high-frequency LLM output updates

Not Ideal For

Applications that require out-of-the-box, styled UI components for rapid prototyping without custom CSS work
Non-React projects or those using alternative frontend frameworks like Vue or Svelte
Simple implementations where LLM responses are static and don't benefit from streaming optimizations
Teams needing a comprehensive UI kit with built-in state management and authentication features

Pros & Cons

Pros

Effective Markdown Cleanup

Automatically removes broken markdown syntax from LLM outputs, reducing manual cleanup and ensuring cleaner rendering for user interfaces.

Smooth Streaming Experience

Throttles and optimizes streamed LLM output to eliminate pauses and inconsistencies, providing a more natural and responsive interaction for users.

Headless Flexibility

Offers complete control over styling, allowing seamless integration with any design system or custom CSS without imposed visual constraints.

Custom Component Integration

Enables embedding custom React components into LLM-generated content for enhanced or transformed displays, as highlighted in the README.

Cons

Styling Investment Required

The headless design necessitates significant upfront effort in building and maintaining custom CSS or integrating external design systems from scratch.

Limited Pre-built Elements

Focuses on core utilities rather than providing ready-to-use UI components like chat bubbles or message layouts, which might slow down development for some teams.

Ecosystem Constraints

As a specialized library, it lacks the extensive community plugins, extensions, and third-party integrations found in more established UI frameworks.

Frequently Asked Questions

What is llm-ui?

Target Audience

Frontend developers building applications that integrate LLM features like AI chatbots, code assistants, or content generation tools with streaming responses.

Value Proposition

Use Cases

Best For

Building AI chatbot interfaces with smooth streaming responses
Creating code generation tools with syntax-highlighted output
Developing content creation apps that integrate LLM output
Implementing custom UI components around LLM-generated content
Handling markdown cleanup from LLM responses in React apps
Optimizing performance for high-frequency LLM output updates

Not Ideal For

Applications that require out-of-the-box, styled UI components for rapid prototyping without custom CSS work
Non-React projects or those using alternative frontend frameworks like Vue or Svelte
Simple implementations where LLM responses are static and don't benefit from streaming optimizations
Teams needing a comprehensive UI kit with built-in state management and authentication features

Pros & Cons

Pros

Effective Markdown Cleanup

Automatically removes broken markdown syntax from LLM outputs, reducing manual cleanup and ensuring cleaner rendering for user interfaces.

Smooth Streaming Experience

Throttles and optimizes streamed LLM output to eliminate pauses and inconsistencies, providing a more natural and responsive interaction for users.

Headless Flexibility

Offers complete control over styling, allowing seamless integration with any design system or custom CSS without imposed visual constraints.

Custom Component Integration

Enables embedding custom React components into LLM-generated content for enhanced or transformed displays, as highlighted in the README.

Cons

Styling Investment Required

The headless design necessitates significant upfront effort in building and maintaining custom CSS or integrating external design systems from scratch.

Limited Pre-built Elements

Focuses on core utilities rather than providing ready-to-use UI components like chat bubbles or message layouts, which might slow down development for some teams.

Ecosystem Constraints

As a specialized library, it lacks the extensive community plugins, extensions, and third-party integrations found in more established UI frameworks.

Frequently Asked Questions

llm-ui

What is llm-ui?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

llm-ui

What is llm-ui?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?