OpenSkillIndex← back to search
claude-code

Openakita chat-ui

"Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat," react chat, chat interface, messaging ui, conversation ui, chat building blocks

install
source · Clone the upstream repo
git clone https://github.com/openakita/openakita
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/openakita/openakita "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/agent-browser/skills/chat-ui" ~/.claude/skills/openakita-openakita-chat-ui && rm -rf "$T"
manifest: skills/agent-browser/skills/chat-ui/SKILL.md
source content

Chat UI Components

Chat building blocks from ui.inference.sh.

Chat UI Components

Quick Start

# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.json

Components

Chat Container

import { ChatContainer } from "@/registry/blocks/chat/chat-container"

<ChatContainer>
  {/* messages go here */}
</ChatContainer>

Messages

import { ChatMessage } from "@/registry/blocks/chat/chat-message"

<ChatMessage
  role="user"
  content="Hello, how can you help me?"
/>

<ChatMessage
  role="assistant"
  content="I can help you with many things!"
/>

Chat Input

import { ChatInput } from "@/registry/blocks/chat/chat-input"

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Type a message..."
  disabled={isLoading}
/>

Typing Indicator

import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

{isTyping && <TypingIndicator />}

Full Example

import {
  ChatContainer,
  ChatMessage,
  ChatInput,
  TypingIndicator,
} from "@/registry/blocks/chat"

export function Chat() {
  const [messages, setMessages] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  const handleSend = async (content: string) => {
    setMessages(prev => [...prev, { role: 'user', content }])
    setIsLoading(true)
    // Send to API...
    setIsLoading(false)
  }

  return (
    <ChatContainer>
      {messages.map((msg, i) => (
        <ChatMessage key={i} role={msg.role} content={msg.content} />
      ))}
      {isLoading && <TypingIndicator />}
      <ChatInput onSubmit={handleSend} disabled={isLoading} />
    </ChatContainer>
  )
}

Message Variants

RoleDescription
user
User messages (right-aligned)
assistant
AI responses (left-aligned)
system
System messages (centered)

Styling

Components use Tailwind CSS and shadcn/ui design tokens:

<ChatMessage
  role="assistant"
  content="Hello!"
  className="bg-muted"
/>

Related Skills

# Full agent component (recommended)
npx skills add inference-sh/skills@agent-ui

# Declarative widgets
npx skills add inference-sh/skills@widgets-ui

# Markdown rendering
npx skills add inference-sh/skills@markdown-ui

Documentation

Component docs: ui.inference.sh/blocks/chat