Your privacy is important to us. By clicking "Necessary cookies only", you agree that we can use essential cookies to ensure you get the best experience on our website in accordance with our Cookie Policy.
The Chatbot component provides an interactive chat interface for users to communicate with an AI or automated system.
Copy and paste the following code into your project.
1. Install the required dependencies:
npx shadcn@latest initYou can also find installation instructions for shadcn/ui at shadcn.com.
1. Install dependencies:
npm install @ai-sdk/anthropic ai2. Add your API key to your environment variables (.env or on your hosting platform):
ANTHROPIC_API_KEY=your_api_key_here3. Configure app/api/chat/route.ts as needed. By default, it uses Claude 3.5 Haiku with a simple chatbot prompt.
Import and add the Chatbot component anywhere in your app. It includes a floating button that opens the chat interface.
import { Chatbot } from "@/components/ui/chatbot"
export default function ChatExample() {
return (
<Chatbot />
)
}