Gathering detailed insights and metrics for chatkit-ai
Gathering detailed insights and metrics for chatkit-ai
Installations
npm install chatkit-aiDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.17.0
NPM Version
10.9.0
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.0.11
Package Id
chatkit-ai@0.0.11
Unpacked Size
52.76 kB
Size
10.98 kB
File Count
8
NPM Version
10.9.0
Node Version
20.17.0
Published on
May 05, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
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
1npm install chatkit-ai 2# oder 3yarn add chatkit-ai 4# oder 5pnpm add chatkit-ai
Verwendung
In Next.js
1// app/layout.tsx 2import { ChatWidgetProvider } from 'chatkit-ai'; 3import { MessageCircle } from 'lucide-react'; 4 5export default function RootLayout({ 6 children, 7}: { 8 children: React.ReactNode; 9}) { 10 return ( 11 <html lang="en"> 12 <body> 13 {children} 14 <ChatWidgetProvider config={{ 15 apiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY || '', 16 apiProvider: 'google', 17 colors: { 18 primary: '#ff5722', // Benutzerdefiniertes Orange 19 secondary: '#fff3e0', 20 background: '#ffffff', 21 text: '#212121' 22 }, 23 title: 'AI Assistant', 24 initialMessage: 'Hallo! Wie kann ich dir heute helfen?' 25 }} /> 26 </body> 27 </html> 28 ); 29}
In React
1// App.jsx oder App.tsx 2import React from 'react'; 3import { ChatWidgetProvider } from 'chatkit-ai'; 4import { MessageCircle } from 'lucide-react'; // Optional: Lucide-Icons installieren 5 6function App() { 7 return ( 8 <div className="App"> 9 <header className="App-header"> 10 <h1>Meine App</h1> 11 </header> 12 13 {/* Widget hier einfügen */} 14 <ChatWidgetProvider config={{ 15 apiKey: process.env.REACT_APP_GOOGLE_API_KEY || '', 16 apiProvider: 'google', 17 icon: <MessageCircle />, // Optional: Benutzerdefiniertes Icon 18 colors: { 19 primary: '#3f51b5', 20 background: '#ffffff', 21 text: '#212121' 22 } 23 }} /> 24 </div> 25 ); 26} 27 28export 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
No vulnerabilities found.
No security vulnerabilities found.