PaceUI

Blocks
MCPComponentsTemplatesChartsStarter
Native AI
Introduction
Components
Browser SupportResponse RendererChat HeaderChat MessagesChat SuggestionsChat Input
Use Cases
Quick ChatFollow Ups
Hooks
useBrowserSupportuseNativeAI

Chat Header

PreviousNext

A header component for the chat interface displaying status, support info, and current token usage.

npx shadcn add ...

Loading preview...

Overview

The ChatHeader component provides a consistent header interface for local AI chat applications. It shows status indicators (e.g. "Ready" if browser AI is available) and current token context details.

default.tsx

API Reference

Props

PropTypeDescriptionDefault
titlestringThe title text displayed in the header."Local AI Assistant"
logoReactNodeCustom icon or logo element rendered on the left.<Sparkles />
iconReactNodeAlias for logo.undefined
isSupportedbooleanWhether Chrome's built-in AI is supported on the client.false
status"loading" | "ready" | "lazy"Status of the AI model adapter displayed as a header badge."ready"
contextInfo{ used: number, window: number } | nullOptional token utilization information to display adjacent to the title.null
Response RendererChat Messages

PaceUI

The ultimate toolkit empowering your designers and developers to launch their next big idea without ever settling on quality

Pages

ComponentsBlocksMCPTemplatesStarter

Account

ManageLicensesPricing

Support

AffiliateContact UsPrivacy PolicyTerms of ServiceDocs

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI