Chat

StreamingCode

Code block with language badge, filename header, copy button, and live cursor.

Preview

chat.tsxtsx

import { useChat } from '@nyxis/core';

export function Chat() {
  const { messages, send, isStreaming } = useChat({
    api: '/api/chat',
  });

  return (
    <ChatThread
      messages={messages}
      streaming={isStreaming}
    />
  );
}

Installation

pnpm add nyxis-ui

Usage

import { StreamingCode } from 'nyxis-ui';

<StreamingCode code={code} language="tsx" filename="chat.tsx" />;

Notes

Syntax highlighting is intentionally not bundled to keep the package light. Pair with Shiki, Prism, or highlight.js by passing pre-rendered HTML.
Used automatically by <StreamingMarkdown> for fenced code blocks.