Blocks

Drop in a whole interface

Blocks are pre-composed, themeable surfaces built from skeehn primitives + the AI SDK layer. Import one, wire your data, and re-skin it with any theme — chat, agent, voice, and site. Available from @skeehn/react/blocks.

ChatConsole

Header + model picker, an autoscrolling conversation, an empty-state with prompt suggestions, and an input. Try it — type or pick a suggestion:

import { useChat } from '@ai-sdk/react';
import { ChatConsole } from '@skeehn/react/blocks';
import '@skeehn/core/styles.css';

export function Support() {
  const { messages, sendMessage, status } = useChat();
  return (
    <ChatConsole
      title="Support"
      messages={messages}
      busy={status === 'streaming'}
      onSend={(text) => sendMessage({ text })}
      models={['anthropic/claude-opus-4-8', 'anthropic/claude-sonnet-4-6']}
      suggestions={[
        { value: 'refund', text: 'How do I get a refund?' },
        { value: 'status', text: 'Where is my order?' },
      ]}
    />
  );
}

AgentConsole

A run monitor: a live status pill, the current task, and the agent’s reasoning + tool calls as they stream.

{
  "query": "parseTree"
}

{
  "matches": 3,
  "file": "src/parse/parseTree.ts"
}

{
  "file": "parseTree.ts"
}

{
  "applied": true,
  "lines": 12
}

VoiceConsole

A framed voice surface — waveform, transcript, and mute/end controls.

HeroSection

Not just chat — skeehn builds sites too. A themeable landing hero from the core foundation.

Every block re-themes with data-theme — try switching the theme from the navbar and watch them transform.