@farihatang/llm-ui

A React component library for building AI chat interfaces — with real streaming support via the Anthropic API.

Built with React 19 · TypeScript · Tailwind CSS · Storybook 8

🔗 Storybook Demo · npm · GitHub

Components

| Component | Description | | ------------------- | ------------------------------------------------------------------ | | ChatWindow | Full chat interface — connects to Anthropic API with SSE streaming | | MessageBubble | User / AI message bubbles with Markdown rendering | | StreamingText | Typewriter effect for streaming token output | | PromptInput | Auto-growing textarea with send & stop controls | | ThinkingIndicator | Animated dots shown while the AI is generating | | FeedbackButtons | 👍👎 thumbs feedback with controlled & uncontrolled modes |

Installation

npm install @farihatang/llm-ui

Import the styles once at your app root:

import '@farihatang/llm-ui/styles';

Quick Start

Full chat with live Anthropic streaming

import { ChatWindow } from '@farihatang/llm-ui';
import '@farihatang/llm-ui/styles';

export default function App() {
  return (
    <ChatWindow
      apiKey={process.env.ANTHROPIC_API_KEY}
      model="claude-3-5-haiku-20241022"
      systemPrompt="You are a helpful assistant."
    />
  );
}

Compose individual components

import {
  MessageBubble,
  StreamingText,
  ThinkingIndicator,
  PromptInput,
  FeedbackButtons,
} from '@farihatang/llm-ui';

// A user message
<MessageBubble role="user" content="What is TypeScript?" />

// An AI message with Markdown
<MessageBubble
  role="assistant"
  content="TypeScript is a **typed superset** of JavaScript."
/>

// Streaming token output
<StreamingText text={streamedContent} speed={20} showCursor markdown />

// Loading state
<ThinkingIndicator size="md" label="Thinking…" />

// Smart input
<PromptInput
  onSubmit={(value) => sendMessage(value)}
  onStop={abortStream}
  isStreaming={isStreaming}
/>

// Feedback
<FeedbackButtons value={feedback} onChange={setFeedback} showLabel />

ChatWindow Props

| Prop | Type | Default | Description | | ----------------- | ----------- | -------------------------------- | ----------------------------- | | apiKey | string | — | Anthropic API key | | model | string | claude-3-5-haiku-20241022 | Model ID | | systemPrompt | string | 'You are a helpful assistant.' | System prompt | | initialMessages | Message[] | [] | Pre-load conversation history | | placeholder | string | 'Message AI…' | Input placeholder | | maxHeight | string | '520px' | Max height of message list | | className | string | — | Additional class names |

Development

npm install
npm run dev          # Storybook at localhost:6007
npm run build        # Build the library (tsup)
npm run build-storybook  # Build static Storybook
npm run type-check   # TypeScript check

Tech Stack

• React 19 + TypeScript 5
• Tailwind CSS 3 with custom design tokens
• Storybook 8 with autodocs
• tsup for dual CJS/ESM build
• lucide-react for icons
• react-markdown for Markdown rendering
• Anthropic API — SSE streaming via fetch

License

MIT © Fariha Tang