Components
Core building blocks for embedding a conversational experience.
HeylockProvider
Initializes the agent once and makes it available to all nested components. Initialization continues without blocking first paint.
1'use client';
2
3import { HeylockProvider, HeylockExpandingChat } from '@heylock-dev/ui';
4
5export default function RootLayout({ children }) {
6 return (
7 <html>
8 <body>
9 <HeylockProvider agentKey={process.env.NEXT_PUBLIC_HEYLOCK_AGENT_KEY!}>
10 {children}
11 </HeylockProvider>
12 </body>
13 </html>
14 );
15}HeylockExpandingChat
Floating panel that combines messages and input.
1export function Widget() {
2 return (
3 <div className='fixed bottom-0 right-0 p-4'>
4 <HeylockExpandingChat header='Ask AI' theme='auto' />
5 </div>
6 );
7}Handles open / close, streaming updates, focus handoff, and disabled state when balance is exhausted.
HeylockMessages
Scrollable list that renders conversation history.
1export function MessagesPanel() {
2 return (
3 <div className='border rounded-xl p-4 h-80 w-full max-w-lg flex flex-col'>
4 <HeylockMessages className='flex-1 overflow-y-auto' />
5 </div>
6 );
7}Automatically subscribes to updates and scrolls to the latest message.
HeylockInput
Form used to submit prompts.
1export function StandaloneInput() {
2 return (
3 <div className='max-w-lg w-full'>
4 <HeylockInput placeholders={['Ask anything', 'Need product help?', 'Generate ideas']} />
5 </div>
6 );
7}Includes: throttling, rotating placeholders, usage-limit disable, animated particle send effect, responding placeholder state, and theme-aware styling.
Composition
Use <HeylockMessages/> and <HeylockInput/> directly for a fully custom layout instead of the expanding widget.
1import { HeylockMessages, HeylockInput } from '@heylock-dev/ui';
2
3export function ChatSurface() {
4 return (
5 <div className='flex flex-col gap-3 border rounded-xl p-4 max-w-md w-full'>
6 <HeylockMessages className='h-72' />
7 <HeylockInput />
8 </div>
9 );
10}