Installation
This guide teaches how to install Heylock UI, configure environment variables, set up Tailwind CSS, and verify integration in a Next.js project.
1. Setup Tailwind CSS
Make sure Tailwind CSS is installed and configured in your project.
If you haven't set it up yet, follow the Tailwind Installation Guide.
2. Install Packages
Add Heylock UI as a dependency to your project.
npm install @heylock-dev/ui3. Configure Environment Variable
Store your agent key in a .env file at the root of your project.
NEXT_PUBLIC_HEYLOCK_AGENT_KEY=YOUR_AGENT_KEYNever commit secrets to source control.
4. Add CSS Source
Import the UI source in your globals.css file so Tailwind can scan component classes.
1/* app/globals.css */
2@source '../node_modules/@heylock-dev/ui/dist/index.js';Component styles may not appear correctly until this step is complete.
5. Root Layout
Wrap your app with <HeylockProvider> in app/layout.jsx.
1// app/layout.jsx
2import { HeylockProvider, HeylockExpandingChat } from '@heylock-dev/ui';
3
4export default function RootLayout({ children }) {
5 return (
6 <html lang="en">
7 <body>
8 <HeylockProvider agentKey={process.env.NEXT_PUBLIC_HEYLOCK_AGENT_KEY}>
9 {children}
10 <HeylockExpandingChat />
11 </HeylockProvider>
12 </body>
13 </html>
14 );
15}You can add <HeylockExpandingChat /> to enable the chat widget globally.
6. Verification
Run the development server and open your app. Send a test message to verify integration.
npm run devSomething Went Wrong?
If you run into issues, visit Common mistakes.