Zero runtime dependencies · <10KB gzipped

inferface

Ship streaming AI interfaces in minutes, not weeks.

Start Building GitHub★ –
How does useChat work?
$ npx shadcn add https://inferface.dev/registry/use-chat

Explore the primitives

useCompletion

Streaming Text

Stream AI responses with live markdown rendering and syntax highlighting.

const { completion, complete, isLoading } =
  useCompletion({ api: "/api/complete" });

<StreamingText content={completion}
  isStreaming={isLoading} />
useChat

Chat Interface

Full ChatGPT-style conversation with optimistic updates, abort, and regeneration.

const { messages, send, isLoading, abort } =
  useChat({ api: "/api/chat" });

<ChatThread chat={{ messages, isLoading }} />
<PromptInput onSubmit={send} />
useToolCalls

Tool Call Approval

Human-in-the-loop approval flows for AI tool execution.

const { pendingCalls, resolveToolCall } =
  useToolCalls({ stream: content });

{pendingCalls.map(call =>
  <ApprovalCard onApprove={...} />)}

Your brand. Your styles.

inferface components accept a classNames prop for granular overrides. Drop-in to any design system.

Summarize this for me

Sure! Here's a concise breakdown of the key points across each section...

Message...

inferface default

<ChatThread
  classNames={{
    userBubble: "bg-emerald-600",
  }}
/>
Summarize this for me

Sure! Here's a concise breakdown of the key points across each section...

Message...

Corporate blue

<ChatThread
  classNames={{
    userBubble: "bg-blue-600",
  }}
/>
Summarize this for me

Sure! Here's a concise breakdown of the key points across each section...

Message...

Warm amber

<ChatThread
  classNames={{
    userBubble: "bg-amber-500",
  }}
/>

Human-in-the-loop, first-class

Most frameworks handle chat. inferface handles the moment the AI asks for permission.

  • Pending tool calls surface as typed React components, not raw JSON
  • Approve, reject, or modify — your UI, your rules
  • Nested tool calls and dependency chains handled automatically
search_web
Pending
query: "React streaming patterns 2024"
ApproveReject

Built for when things get weird

Mid-stream abort

User cancelled? abort() stops the stream and rolls back state cleanly.

Lost connections

Network hiccup mid-stream? The hook tracks error state so your UI can recover gracefully.

Nested tool calls

When the AI calls a tool that calls another tool, useToolCalls tracks the dependency chain.

Hooks API

HookDescriptionKey Returns
useStreamLow-level SSE/ReadableStream primitivecontent, isStreaming, start, abort, reset
useCompletionSingle-turn text completion with streamingcompletion, complete, isLoading, abort
useChatFull conversational state with optimistic UImessages, send, isLoading, streamingContent, regenerate
useToolCallsParse and manage tool call approval flowstoolCalls, pendingCalls, resolveToolCall, rejectToolCall