chatkit-ai
v0.0.11
Published
The open-source toolkit for integrating powerful conversational AI into your applications with just a few lines of code.
Downloads
24
Maintainers
jonas-is-codingReadme
ChatKit AI
Ein hochgradig anpassbares Chat-Widget für Web-Anwendungen, das es Entwicklern ermöglicht, KI-gestützte Chatbots schnell und einfach zu integrieren.
Installation
npm install chatkit-ai
# oder
yarn add chatkit-ai
# oder
pnpm add chatkit-aiVerwendung
In Next.js
// 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>
);
}In React
// 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;Konfiguration
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 |
Anpassung
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
Lizenz
MIT