Quickstart

Generate personalized UI to guide your users with Lopus AI

1. Install the Lopus AI SDK

Install lopus-ai in your React project:

npm

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:

npm

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.

Message.tsx

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

• Learn how to Render Markdown Messages

• Learn about different Message Types supported by Lopus AI