Skip to main content

​
1. Install the Lopus AI SDK

Install lopus-ai in your React project: 
npm install lopus-ai@latest

​
2. Set up shadcn/ui

Currently, the SDK requires you to setup shadcn/ui separately in order to render the generated components (we internally use these components for clean default styling). If you prefer installation guidelines given by the shadcn/ui website, head on to the Installation instructions. If you’re using a framework like Next.js, Gatsby, Remix or Astro, you can use the shadcn/ui CLI to set this up. If you’re using plain React.js, head on to the Manual Installation Guide. Install and initialize shadcn/ui in your React-based project: 
npx shadcn-ui@latest init
During initialization, answer the questions as you want.

​
3. Configure Tailwind CSS

Add the Lopus AI components to your tailwind.config.ts content array:
tailwind.config.ts
import type { Config } from 'tailwindcss';

export default {
	darkMode: ['class'],
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
		'./node_modules/lopus-ai/dist/**/*.{js,ts,jsx,tsx}', // Add this line
	],
	theme: {
		extend: {
			// ... rest of your theme config
		},
	},
	plugins: [require('tailwindcss-animate')],
} satisfies Config;
Make sure to add the highlighted line to your Tailwind config to properly style the Lopus AI components.

​
4. Initialize the useLopusChat Hook

Import and initialize the useLopusChat hook in your React component:
ChatComponent.tsx
'use client';
import { useLopusChat } from 'lopus-ai';

export default function ChatComponent() {
	const { messages, sendQuery, isLoading } = useLopusChat({
		apiKey: 'your_api_key_here',
	});

	return (
		<div>
			{messages.map((message, index) => (
				<div key={index}>{String(message.content)}</div>
			))}
		</div>
	);
}
Replace your_api_key_here with your actual Lopus AI API key. You can find your API key in the dashboard.
The useLopusChat hook provides:
  • messages: An array of chat messages
  • sendQuery: A function to send new messages
  • isLoading: A boolean indicating if a response is being generated
You should see a confirmation that you are authenticated:

Authentication confirmation from Lopus AI

​
5. Design Chat Components

Create 3 necessary components for Messages, Message List, and Chat Input. Each component includes error handling, type checking, and styling. 
import React, { ReactElement, JSXElementConstructor } from 'react';

export function Message({ message }: MessageProps) {
  return (
  	<div
  		className={`mb-2 p-2 rounded ${
  			message.sender === 'USER'
  				? 'bg-blue-600 text-white ml-auto'
  				: 'bg-gray-200 text-black'
  		} max-w-[80%]`}
  	>
  		{(() => {
  			switch (typeof message.content) {
  				case 'string':
  					return <div>{message.content}</div>;
  				case 'object':
  					if (React.isValidElement(message.content)) {
  						return message.content;
  					}
  					return <div>{JSON.stringify(message.content)}</div>;
  				default:
  					return <div>{String(message.content)}</div>;
  			}
  		})()}
  	</div>
  );
}

interface Message {
content: string | ReactElement<unknown, string | JSXElementConstructor<any>> | Record<string, unknown>;
sender: 'USER' | 'ASSISTANT';
}

interface MessageProps {
message: Message;
}
Make sure to update your ChatComponent.tsx to use the components:
ChatComponent.tsx
'use client';
import { useLopusChat } from 'lopus-ai';
import { MessageList } from './components/MessageList';
import { ChatInput } from './components/ChatInput';

export default function ChatComponent() {
	const { messages, sendQuery, isLoading } = useLopusChat({
		apiKey: 'your_api_key_here',
	});

	return (
		<div className='flex flex-col h-screen p-4 bg-gray-100'>
			<MessageList messages={messages} isLoading={isLoading} />
			<ChatInput onSubmit={sendQuery} isLoading={isLoading} />
		</div>
	);
}

Lopus Chat Component

For a complete implementation with advanced features like error handling and component rendering, see our example app:

​
Next Steps

⌘I