Chat

StreamingMarkdown

Markdown renderer tuned for streaming — GFM, themed code blocks, trailing cursor.

Preview

Two reasons we ship adapters as peer dependencies:

Bundle size — apps targeting only Anthropic don't pay for OpenAI.
Version freedom — pin the AI SDK version that matches your server.

ts
import { createChatHandler, createModel } from '@nyxis/core/server';

export const POST = createChatHandler({
  model: createModel('anthropic', 'claude-sonnet-4-5'),
});

Adapter packages are loaded lazily — only providers you actually use end up in your bundle.

Installation

pnpm add nyxis-ui react-markdown remark-gfm

Usage

import { StreamingMarkdown } from 'nyxis-ui';
// or:
// import { StreamingMarkdown } from 'nyxis-ui/streaming-markdown';

<StreamingMarkdown text={partial} streaming={isStreaming} />;

Anatomy

Built on top of react-markdown + remark-gfm — task lists, tables, strikethrough, autolinks.
Fenced code blocks render through <StreamingCode> (copy button, language badge).
Inline code, links, headings, blockquotes are styled with theme tokens — drops cleanly into any <ChatMessage> bubble.
React-markdown internally memoises by source string, so re-renders during streaming stay cheap.

Peer dependencies

react-markdown and remark-gfm are optional peer deps — only loaded when <StreamingMarkdown> is on a page.