NextGen Chatbot

A powerful, customizable chatbot component for Next.js applications that integrates with Google's Gemini AI. Easily add an intelligent virtual assistant to your website with your own company knowledge and branding.

Features

• 🤖 AI-Powered: Built on Google's Gemini AI for intelligent responses
• 🎨 Customizable: Fully customizable UI and branding
• 📚 Knowledge Base: Train the chatbot with your company's specific information
• 🔧 Easy Integration: Simple setup with minimal configuration
• 📱 Responsive: Works perfectly on desktop and mobile devices
• 🎯 Positioning: Choose from 4 different corner positions
• 🔒 Secure: API keys are handled securely on the client side

Installation

1npm install nextgen-chatbot

Quick Start

1. Basic Setup

1import { ChatBot } from 'nextgen-chatbot';
2import 'nextgen-chatbot/dist/styles/chat.css';
3
4export default function MyPage() {
5  return (
6    <div>
7      <h1>Welcome to my website</h1>
8      <ChatBot 
9        apiKey="your-gemini-api-key"
10        companyName="My Company"
11      />
12    </div>
13  );
14}

2. Create API Route ⚠️ IMPORTANT

You must create this API route file for the chatbot to work!

Create a file at app/api/chat/route.ts (or pages/api/chat.ts for Pages Router):

1import { chatHandler } from 'nextgen-chatbot';
2
3export async function POST(request: Request) {
4  return chatHandler(request);
5}

For Pages Router (pages/api/chat.ts):

1import { chatHandler } from 'nextgen-chatbot';
2import type { NextApiRequest, NextApiResponse } from 'next';
3
4export default async function handler(req: NextApiRequest, res: NextApiResponse) {
5  if (req.method === 'POST') {
6    const response = await chatHandler(req as any);
7    const data = await response.json();
8    res.status(response.status).json(data);
9  } else {
10    res.status(405).json({ error: 'Method not allowed' });
11  }
12}

If you get "Unexpected token '<'" errors, it means this API route is missing! See API_SETUP.md for detailed instructions.

3. Get Your Gemini API Key

1. Go to Google AI Studio
2. Create a new API key
3. Use this key in your ChatBot component

Advanced Usage

Custom Company Knowledge

1import { ChatBot, createCompanyKnowledge } from 'nextgen-chatbot';
2
3const myCompanyKnowledge = createCompanyKnowledge(
4  {
5    name: "TechCorp",
6    description: "Leading technology solutions provider",
7    founded: "2020",
8    location: "San Francisco, CA",
9    industry: "Technology"
10  },
11  {
12    products: [
13      {
14        name: "Cloud Solutions",
15        description: "Enterprise cloud infrastructure and management",
16        features: ["Scalable", "Secure", "24/7 Support"],
17        benefits: ["Cost Effective", "High Performance", "Easy Management"]
18      }
19    ],
20    faq: [
21      {
22        question: "What services do you offer?",
23        answer: "We provide comprehensive cloud solutions including infrastructure, security, and support."
24      }
25    ]
26  }
27);
28
29export default function MyPage() {
30  return (
31    <ChatBot 
32      apiKey="your-gemini-api-key"
33      companyName="TechCorp"
34      knowledge={myCompanyKnowledge}
35      welcomeMessage="Hello! I'm TechCorp's AI assistant. How can I help you today?"
36    />
37  );
38}

Using Knowledge Templates

1import { ChatBot, knowledgeTemplates } from 'nextgen-chatbot';
2
3// Use e-commerce template
4const ecommerceKnowledge = knowledgeTemplates.ecommerce("MyStore");
5
6// Use service business template
7const serviceKnowledge = knowledgeTemplates.service("MyService", "We provide professional consulting services");
8
9export default function MyPage() {
10  return (
11    <ChatBot 
12      apiKey="your-gemini-api-key"
13      companyName="MyStore"
14      knowledge={ecommerceKnowledge}
15    />
16  );
17}

Using KnowledgeBuilder

1import { ChatBot, KnowledgeBuilder } from 'nextgen-chatbot';
2
3const knowledge = new KnowledgeBuilder()
4  .setCompany({
5    name: "My Company",
6    description: "We provide amazing services",
7    founded: "2024",
8    location: "New York",
9    industry: "Services"
10  })
11  .addProducts([
12    {
13      name: "Premium Service",
14      description: "Our flagship service offering",
15      features: ["Feature 1", "Feature 2"],
16      benefits: ["Benefit 1", "Benefit 2"]
17    }
18  ])
19  .addFAQ([
20    {
21      question: "How do I get started?",
22      answer: "Contact us for a free consultation!"
23    }
24  ])
25  .build();
26
27export default function MyPage() {
28  return (
29    <ChatBot 
30      apiKey="your-gemini-api-key"
31      companyName="My Company"
32      knowledge={knowledge}
33    />
34  );
35}

Configuration Options

ChatBot Props

Prop	Type	Default	Description
apiKey	string	Required	Your Gemini API key
companyName	string	Required	Your company name
welcomeMessage	string	"Welcome! I'm your virtual assistant..."	Initial greeting message
position	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'	Chat widget position
knowledge	CompanyKnowledge	Default demo data	Your company's knowledge base
apiEndpoint	string	'/api/chat'	Custom API endpoint
model	string	'gemini-2.0-flash'	Gemini model to use
maxTokens	number	1000	Maximum response length
temperature	number	0.7	Response creativity (0-1)

Company Knowledge Structure

1interface CompanyKnowledge {
2  company: {
3    name: string;
4    description: string;
5    founded: string;
6    location: string;
7    industry: string;
8  };
9  products: Array<{
10    name: string;
11    description: string;
12    features?: string[];
13    benefits?: string[];
14    // ... more fields
15  }>;
16  faq: Array<{
17    question: string;
18    answer: string;
19  }>;
20  policies: {
21    refund: string;
22    privacy: string;
23    terms: string;
24  };
25  contact: {
26    email: string;
27    phone: string;
28    address: string;
29    support: {
30      email: string;
31      phone: string;
32    };
33  };
34}

Styling

The chatbot comes with built-in CSS that you need to import. You can import the styles in several ways:

Method 1: Import CSS directly in your component

1import { ChatBot } from 'nextgen-chatbot';
2import 'nextgen-chatbot/dist/styles/chat.css';
3
4export default function MyPage() {
5  return (
6    <ChatBot apiKey="your-key" companyName="My Company" />
7  );
8}

Method 2: Import CSS in your main layout (Recommended)

1// In _app.tsx (Pages Router) or layout.tsx (App Router)
2import 'nextgen-chatbot/dist/styles/chat.css';
3
4export default function App({ Component, pageProps }) {
5  return <Component {...pageProps} />;
6}

Method 3: Import CSS in your global styles

1/* In your global CSS file */
2@import 'nextgen-chatbot/dist/styles/chat.css';

Customizing Styles

You can override the default styles by adding your own CSS:

1/* Custom styles */
2.chat-button {
3  background-color: #your-brand-color !important;
4}
5
6.chat-window {
7  border-radius: 12px !important;
8}
9
10.chat-header {
11  background: linear-gradient(45deg, #your-color-1, #your-color-2) !important;
12}

Environment Variables

For production, consider using environment variables for your API key:

1<ChatBot 
2  apiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
3  companyName="My Company"
4/>

Examples

E-commerce Store

1import { ChatBot, knowledgeTemplates } from 'nextgen-chatbot';
2
3const storeKnowledge = knowledgeTemplates.ecommerce("MyStore");
4
5<ChatBot 
6  apiKey="your-key"
7  companyName="MyStore"
8  knowledge={storeKnowledge}
9  position="bottom-right"
10/>

Service Business

1import { ChatBot, knowledgeTemplates } from 'nextgen-chatbot';
2
3const serviceKnowledge = knowledgeTemplates.service(
4  "MyConsulting", 
5  "We provide business consulting and strategy services"
6);
7
8<ChatBot 
9  apiKey="your-key"
10  companyName="MyConsulting"
11  knowledge={serviceKnowledge}
12  welcomeMessage="Hi! I'm here to help with your business needs."
13/>

Custom Knowledge

1import { ChatBot, createCompanyKnowledge } from 'nextgen-chatbot';
2
3const customKnowledge = createCompanyKnowledge(
4  {
5    name: "My Startup",
6    description: "Innovative tech startup",
7    founded: "2024",
8    location: "Silicon Valley",
9    industry: "Technology"
10  },
11  {
12    products: [
13      {
14        name: "AI Platform",
15        description: "Our revolutionary AI platform",
16        features: ["Machine Learning", "Real-time Processing", "API Access"],
17        benefits: ["Increased Efficiency", "Cost Savings", "Scalability"]
18      }
19    ],
20    faq: [
21      {
22        question: "What makes your AI platform unique?",
23        answer: "Our platform combines cutting-edge ML with intuitive design."
24      }
25    ]
26  }
27);
28
29<ChatBot 
30  apiKey="your-key"
31  companyName="My Startup"
32  knowledge={customKnowledge}
33/>

Customizing the Chatbot UI

The chatbot uses CSS variables for all key colors, fonts, and spacing. You can easily override these in your own CSS to match your brand.

Example: Change Primary Color and Font

1:root {
2  --chatbot-primary: #0d9488; /* teal */
3  --chatbot-accent: #0ea5e9;  /* sky blue */
4  --chatbot-font: 'Roboto', Arial, sans-serif;
5}

Add this to your global CSS file or inside a selector that wraps your app.

All Available CSS Variables

1:root {
2  --chatbot-primary: #2563eb;
3  --chatbot-primary-dark: #1d4ed8;
4  --chatbot-accent: #4f46e5;
5  --chatbot-bg: #fff;
6  --chatbot-bg-alt: #f9fafb;
7  --chatbot-border: #e5e7eb;
8  --chatbot-user-bg: linear-gradient(to right, var(--chatbot-accent), var(--chatbot-primary));
9  --chatbot-assistant-bg: #fff;
10  --chatbot-assistant-border: #e5e7eb;
11  --chatbot-unread-bg: #ef4444;
12  --chatbot-unread-color: #fff;
13  --chatbot-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
14  --chatbot-radius: 1rem;
15  --chatbot-radius-full: 9999px;
16  --chatbot-font: 'Inter', 'Segoe UI', Arial, sans-serif;
17  --chatbot-font-size: 1rem;
18  --chatbot-message-font-size: 0.95rem;
19  --chatbot-header-font-size: 1.1rem;
20  --chatbot-input-bg: #f9fafb;
21  --chatbot-input-color: #1f2937;
22  --chatbot-placeholder: #6b7280;
23  --chatbot-send-bg: var(--chatbot-primary);
24  --chatbot-send-bg-hover: var(--chatbot-primary-dark);
25  --chatbot-send-color: #fff;
26  --chatbot-close-hover: #bfdbfe;
27}

You can override any of these to match your brand or design system.

Troubleshooting

Common Issues

1. "Unexpected token '<'" Error: This means your API route is missing. Create the API route file as shown in step 2 above. See API_SETUP.md for detailed instructions.

2. API Key Error: Make sure your Gemini API key is valid and has proper permissions

3. CORS Issues: Ensure your API route is properly configured

4. Styling Issues: Check if the CSS is being imported correctly

5. Knowledge Not Working: Verify your knowledge object structure matches the interface

Quick Fix for "Unexpected token '<'" Error

If you're getting this error, it means the API route is missing. Here's the quick fix:

For App Router - Create app/api/chat/route.ts:

1import { chatHandler } from 'nextgen-chatbot';
2export async function POST(request: Request) {
3  return chatHandler(request);
4}

For Pages Router - Create pages/api/chat.ts:

1import { chatHandler } from 'nextgen-chatbot';
2import type { NextApiRequest, NextApiResponse } from 'next';
3
4export default async function handler(req: NextApiRequest, res: NextApiResponse) {
5  if (req.method === 'POST') {
6    const response = await chatHandler(req as any);
7    const data = await response.json();
8    res.status(response.status).json(data);
9  } else {
10    res.status(405).json({ error: 'Method not allowed' });
11  }
12}

After creating the file, restart your development server.

Debug Mode

Enable console logging to debug issues:

1<ChatBot 
2  apiKey="your-key"
3  companyName="My Company"
4  // Add console.log in your API route for debugging
5/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details.

Support

If you need help or have questions, please open an issue on GitHub.