Introduction
This guide covers installation, environment setup, provider integration, messaging, streaming, styling, and type usage for Heylock UI in Next.js.
Installation
1. Setup Tailwind CSS
Before you begin, make sure Tailwind CSS is installed and configured in your project.
For installation instructions, see the Tailwind Installation Guide.
2. Install Heylock UI
Add Heylock UI as a dependency to your project.
npm install @heylock-dev/ui3. Configure Tailwind
Add the following line to your globals.css file so Tailwind can include Heylock UI styles.
1/* app/globals.css */
2@source '../node_modules/@heylock-dev/ui/dist/index.js';Quick Start
Wrap your app with <HeylockProvider> in app/layout.jsx and render <HeylockExpandingChat \>.
1// app/layout.jsx
2'use client';
3
4import { HeylockProvider, HeylockExpandingChat } from '@heylock-dev/ui';
5
6export default function RootLayout({ children }) {
7 return (
8 <html lang="en">
9 <body>
10 <HeylockProvider agentKey={process.env.HEYLOCK_AGENT_KEY}>
11 {children}
12 <HeylockExpandingChat />
13 </HeylockProvider>
14 </body>
15 </html>
16 );
17}This will display the same chat widget you see in the lower right corner of this page.
Streaming
Render messages progressively by subscribing to message history updates.
1import { useEffect, useState } from 'react';
2import { useAgent, HeylockInput } from '@heylock-dev/ui';
3
4export function StreamingPanel(){
5 const agent = useAgent();
6 const [messages, setMessages] = useState([]);
7
8 useEffect(() => {
9 const unsubscribe = agent.onMessageHistoryChange((history) => {
10 setMessages(history);
11 });
12
13 return unsubscribe;
14 }, [agent]);
15
16 return (
17 <div className='flex flex-col gap-3 border rounded-xl p-4 max-w-md w-full'>
18 {
19 messages.map((message, index) => (
20 <div key={index} className='bg-blue-500 text-white p-3 rounded-lg'>
21 <p className='text-sm'>{message.content}</p>
22 </div>
23 ))
24 }
25
26 <HeylockInput />
27 </div>
28 );
29}