Ein hochgradig anpassbares Chat-Widget für Web-Anwendungen, das es Entwicklern ermöglicht, KI-gestützte Chatbots schnell und einfach zu integrieren.
npm install chatkit-ai
# oder
yarn add chatkit-ai
# oder
pnpm add chatkit-ai// app/layout.tsx
import { ChatWidgetProvider } from 'chatkit-ai';
import { MessageCircle } from 'lucide-react';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<ChatWidgetProvider config={{
apiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY || '',
apiProvider: 'google',
colors: {
primary: '#ff5722', // Benutzerdefiniertes Orange
secondary: '#fff3e0',
background: '#ffffff',
text: '#212121'
},
title: 'AI Assistant',
initialMessage: 'Hallo! Wie kann ich dir heute helfen?'
}} />
</body>
</html>
);
}// App.jsx oder App.tsx
import React from 'react';
import { ChatWidgetProvider } from 'chatkit-ai';
import { MessageCircle } from 'lucide-react'; // Optional: Lucide-Icons installieren
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Meine App</h1>
</header>
{/* Widget hier einfügen */}
<ChatWidgetProvider config={{
apiKey: process.env.REACT_APP_GOOGLE_API_KEY || '',
apiProvider: 'google',
icon: <MessageCircle />, // Optional: Benutzerdefiniertes Icon
colors: {
primary: '#3f51b5',
background: '#ffffff',
text: '#212121'
}
}} />
</div>
);
}
export default App;Das Chat-Widget unterstützt die folgenden Konfigurationsoptionen:
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
apiKey |
string |
- | API-Schlüssel für den Chat-Dienst (erforderlich) |
apiProvider |
'google' | 'openai' | 'custom' |
- | Welcher AI-Anbieter verwendet werden soll |
icon |
ReactNode |
<Bot /> |
Benutzerdefiniertes Icon für das Chat-Widget |
colors |
object |
Siehe unten | Farben für das Widget |
colors.primary |
string |
'#f97316' |
Primärfarbe für Buttons, Icons, etc. |
colors.secondary |
string |
'#ffedd5' |
Sekundärfarbe für Hintergründe, etc. |
colors.background |
string |
'#ffffff' |
Hintergrundfarbe des Widgets |
colors.text |
string |
'#1f2937' |
Textfarbe |
title |
string |
'Chat Assistant' |
Titel des Chat-Fensters |
initialMessage |
string |
'Hello! How can I help you today?' |
Erste Nachricht vom Bot |
position |
'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' |
'bottom-right' |
Position des Widgets auf der Seite |
Das Widget lässt sich umfassend an Ihr Branding anpassen:
- Farben können als hexadezimale Strings angegeben werden (
#ff5722) - Für das Icon können Sie jedes React-Element verwenden, einschließlich SVGs oder Komponenten aus Icon-Bibliotheken wie Lucide React
MIT