Quickstart
This guide teaches how to install packages, configure an environment variable, mount the provider, send a message, stream a response, and customize layout.
1. Install
npm install @heylock-dev/ui2. Environment Variable
Add your agent key to a .env file in the root of your Next.js project.
HEYLOCK_AGENT_KEY=YOUR_AGENT_KEYDo not commit this file.
3. Tailwind Source Import
Add this line to globals.css file in the root of your project to make Tailwind scan UI package classes.
1/* app/globals.css */
2@source '../node_modules/@heylock-dev/ui/dist/index.js';Component will look weird until you do this step.
4. Root Layout
Wrap your app with <HeylockProvider> in src/app/layout.js, and pass your agent key from the environment variable. This ensures all child components have access to the Heylock context.
1'use client';
2
3import { HeylockProvider, HeylockExpandingChat } from '@heylock-dev/ui';
4
5export default function RootLayout({ children }) {
6 return (
7 <html lang="en">
8 <body>
9 <HeylockProvider agentKey={process.env.HEYLOCK_AGENT_KEY}>
10 {children}
11 <HeylockExpandingChat />
12 </HeylockProvider>
13 </body>
14 </html>
15 );
16}Also you can add the <HeylockExpandingChat \> component to your layout. The widget will appear globally.
5. Inline Composition (optional)
Add <HeylockMessages \> and <HeylockInput \> to your page. These components are designed for streaming and real-time updates.
1import { HeylockMessages, HeylockInput } from '@heylock-dev/ui';
2
3export function Chat() {
4 return (
5 <div className='flex flex-col gap-3 border rounded-xl p-4 max-w-md'>
6 <HeylockMessages className='h-72' />
7 <HeylockInput placeholders={['Ask anything', 'How can I help?']} />
8 </div>
9 );
10}6. Run
npm run devSomething went wrong?
If you run into issues, visit Common mistakes.