ask-junkie-sdk

v1.2.1

Published

10 days ago

Ask Junkie - AI Chatbot SDK for any website. Add an intelligent AI chatbot to React, Next.js, Vue, or vanilla HTML sites.

Downloads

932

0High
0Medium
0Low

souaibansari

chatbot ai widget groq gemini openai llama react nextjs vue javascript

Ask Junkie SDK

npm version npm downloads license bundle size

Add an AI-powered chatbot to any website in minutes

Installation • Quick Start • Dashboard Setup • Framework Guides • API

✨ Features

🔑 SDK Key Authentication - Manage all settings from a centralized dashboard
🤖 Multi-Provider AI - Supports Groq (fastest), OpenAI, Google Gemini, and OpenRouter
⚡ Universal Compatibility - Works with React, Next.js, Vue, Angular, Svelte, or plain HTML
🎨 Customizable - 7 color presets, custom themes, and full CSS control
💬 Smart Context - Teach the AI about your website with custom context
🎤 Voice Input - Built-in speech recognition support
📊 Analytics Dashboard - View all chat conversations in one place
📱 Responsive - Works on all screen sizes
🖱️ Draggable - Users can move the chat icon anywhere
💾 Persistent - Chat history saved to localStorage

🆕 What's New in v1.1.6

SDK Key Authentication - Use a single SDK key to manage all settings from the dashboard
Centralized Settings - Change bot name, colors, AI provider, and context without code changes
Chat Analytics - All conversations are logged and viewable in the Super Admin Panel
Multi-site Management - Manage multiple websites from one dashboard

📦 Installation

Option 1: npm (Recommended for frameworks)

npm install ask-junkie-sdk

Option 2: CDN (Quick integration)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>

Option 3: unpkg CDN

<link rel="stylesheet" href="https://unpkg.com/ask-junkie-sdk@latest/dist/ask-junkie.css">
<script src="https://unpkg.com/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>

🎯 Dashboard Setup

Step 1: Create an Account

Go to the Ask Junkie Dashboard at https://http://ai.junkiescoder.com
Sign up with Google or Email
Navigate to API Keys section

Step 2: Create an SDK Key

Click "+ Create New Key"
Enter a Name (e.g., "My Website")
Enter your Domain (e.g., "mywebsite.com")
Click "Create Key"
Copy the generated SDK key (starts with ak_...)

Step 3: Configure Settings

Go to Settings in the dashboard
Configure:
- Bot Name - The name shown in the chat header
- AI Provider - Choose Groq, OpenAI, Gemini, etc.
- AI API Key - Your AI provider's API key
- Theme - Choose colors and gradient presets
- Context - Add information about your business
Click Save - Changes apply instantly to all sites using this SDK key!

🚀 Quick Start

Minimal Setup (with SDK Key)

import AskJunkie from 'ask-junkie-sdk';
import 'ask-junkie-sdk/dist/ask-junkie.css';

AskJunkie.init({
    sdkKey: 'ak_your_sdk_key_here'
});

That's it! All settings are loaded from the dashboard.

🖼️ Framework Integration Guides

📌 HTML/CSS/JavaScript (Vanilla)

The simplest way to add the chatbot to any static website.

Method 1: CDN (Recommended)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    
    <!-- Ask Junkie CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Your content here...</p>
    
    <!-- Ask Junkie JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
    <script>
        // Initialize with just your SDK key
        AskJunkie.init({
            sdkKey: 'ak_your_sdk_key_here'
        });
    </script>
</body>
</html>

Method 2: Downloaded Files

Download the SDK files from npm or CDN
Place them in your project:

your-website/
├── css/
│   └── ask-junkie.css
├── js/
│   └── ask-junkie.min.js
└── index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/ask-junkie.css">
</head>
<body>
    <h1>My Website</h1>
    
    <script src="js/ask-junkie.min.js"></script>
    <script>
        AskJunkie.init({
            sdkKey: 'ak_your_sdk_key_here'
        });
    </script>
</body>
</html>

⚛️ React

Step 1: Install the package

npm install ask-junkie-sdk

Step 2: Create a Chatbot component

// src/components/AskJunkieChatbot.jsx
import { useEffect } from 'react';
import AskJunkie from 'ask-junkie-sdk';
import 'ask-junkie-sdk/dist/ask-junkie.css';

function AskJunkieChatbot() {
    useEffect(() => {
        // Initialize with SDK key - all settings from dashboard
        AskJunkie.init({
            sdkKey: process.env.REACT_APP_SDK_KEY
        });

        // Cleanup on unmount
        return () => {
            AskJunkie.destroy();
        };
    }, []);

    return null; // This component renders the chat widget via DOM
}

export default AskJunkieChatbot;

Step 3: Add to your App

// src/App.jsx
import AskJunkieChatbot from './components/AskJunkieChatbot';

function App() {
    return (
        <div className="App">
            <h1>My React App</h1>
            <p>Your content here...</p>
            
            {/* Chatbot will appear as a floating widget */}
            <AskJunkieChatbot />
        </div>
    );
}

export default App;

Step 4: Add environment variable

Create .env file:

REACT_APP_SDK_KEY=ak_your_sdk_key_here

▲ Next.js (App Router)

Step 1: Install the package

npm install ask-junkie-sdk

Step 2: Create a client component

// src/components/AskJunkieChatbot.tsx
'use client';

import { useEffect } from 'react';
import AskJunkie from 'ask-junkie-sdk';
import 'ask-junkie-sdk/dist/ask-junkie.css';

export default function AskJunkieChatbot() {
    useEffect(() => {
        // ============================================
        // SDK KEY AUTHENTICATION
        // All settings (bot name, API key, theme, etc.) 
        // are managed from the dashboard Settings page
        // ============================================
        AskJunkie.init({
            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY!
        });

        return () => {
            AskJunkie.destroy();
        };
    }, []);

    return null;
}

Step 3: Add to layout

// src/app/layout.tsx
import AskJunkieChatbot from '@/components/AskJunkieChatbot';

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                {children}
                <AskJunkieChatbot />
            </body>
        </html>
    );
}

Step 4: Add environment variable

Create .env.local file:

NEXT_PUBLIC_SDK_KEY=ak_your_sdk_key_here

Step 5: Add TypeScript declaration (optional)

// src/types/ask-junkie-sdk.d.ts
declare module 'ask-junkie-sdk' {
    interface AskJunkieConfig {
        sdkKey?: string;
        apiKey?: string;
        provider?: 'groq' | 'gemini' | 'openai' | 'openrouter';
        botName?: string;
        theme?: object;
        context?: object;
    }

    interface AskJunkieStatic {
        init(config: AskJunkieConfig): void;
        destroy(): void;
        open(): void;
        close(): void;
        toggle(): void;
        sendMessage(message: string): void;
    }

    const AskJunkie: AskJunkieStatic;
    export default AskJunkie;
}

▲ Next.js (Pages Router)

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useEffect } from 'react';
import AskJunkie from 'ask-junkie-sdk';
import 'ask-junkie-sdk/dist/ask-junkie.css';

export default function App({ Component, pageProps }: AppProps) {
    useEffect(() => {
        AskJunkie.init({
            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY!
        });

        return () => AskJunkie.destroy();
    }, []);

    return <Component {...pageProps} />;
}

💚 Vue 3

Step 1: Install the package

npm install ask-junkie-sdk

Step 2: Create a composable or component

<!-- src/components/AskJunkieChatbot.vue -->
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import AskJunkie from 'ask-junkie-sdk';
import 'ask-junkie-sdk/dist/ask-junkie.css';

onMounted(() => {
    AskJunkie.init({
        sdkKey: import.meta.env.VITE_SDK_KEY
    });
});

onUnmounted(() => {
    AskJunkie.destroy();
});
</script>

<template>
    <!-- This component renders nothing, the widget is injected into the DOM -->
</template>

Step 3: Add to App.vue

<!-- src/App.vue -->
<script setup>
import AskJunkieChatbot from './components/AskJunkieChatbot.vue';
</script>

<template>
    <div id="app">
        <h1>My Vue App</h1>
        <AskJunkieChatbot />
    </div>
</template>

Step 4: Add environment variable

Create .env file:

VITE_SDK_KEY=ak_your_sdk_key_here

🅰️ Angular

Step 1: Install the package

npm install ask-junkie-sdk

Step 2: Add CSS to angular.json

{
    "projects": {
        "your-app": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "node_modules/ask-junkie-sdk/dist/ask-junkie.css",
                            "src/styles.css"
                        ]
                    }
                }
            }
        }
    }
}

Step 3: Create a service or component

// src/app/ask-junkie.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import AskJunkie from 'ask-junkie-sdk';
import { environment } from '../environments/environment';

@Component({
    selector: 'app-ask-junkie',
    template: '',
    standalone: true
})
export class AskJunkieComponent implements OnInit, OnDestroy {
    ngOnInit(): void {
        AskJunkie.init({
            sdkKey: environment.sdkKey
        });
    }

    ngOnDestroy(): void {
        AskJunkie.destroy();
    }
}

Step 4: Add to app.component.ts

// src/app/app.component.ts
import { Component } from '@angular/core';
import { AskJunkieComponent } from './ask-junkie.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AskJunkieComponent],
    template: `
        <h1>My Angular App</h1>
        <app-ask-junkie />
    `
})
export class AppComponent {}

Step 5: Add environment variable

// src/environments/environment.ts
export const environment = {
    sdkKey: 'ak_your_sdk_key_here'
};

🧡 Svelte

Step 1: Install the package

npm install ask-junkie-sdk

Step 2: Create a component

<!-- src/lib/AskJunkieChatbot.svelte -->
<script>
    import { onMount, onDestroy } from 'svelte';
    import AskJunkie from 'ask-junkie-sdk';
    import 'ask-junkie-sdk/dist/ask-junkie.css';

    onMount(() => {
        AskJunkie.init({
            sdkKey: import.meta.env.VITE_SDK_KEY
        });
    });

    onDestroy(() => {
        AskJunkie.destroy();
    });
</script>

Step 3: Add to your app

<!-- src/App.svelte -->
<script>
    import AskJunkieChatbot from './lib/AskJunkieChatbot.svelte';
</script>

<main>
    <h1>My Svelte App</h1>
    <AskJunkieChatbot />
</main>

🟢 Node.js / Express (Server-Rendered Pages)

For server-rendered pages, inject the CDN scripts into your HTML templates:

// server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>My Express App</title>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
        </head>
        <body>
            <h1>Welcome to My Express App</h1>
            
            <script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
            <script>
                AskJunkie.init({
                    sdkKey: '${process.env.SDK_KEY}'
                });
            </script>
        </body>
        </html>
    `);
});

app.listen(3000);

🎨 WordPress

For WordPress sites, add this to your theme's footer.php:

<!-- Ask Junkie Chatbot -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
<script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
<script>
    AskJunkie.init({
        sdkKey: '<?php echo esc_js(get_option("ask_junkie_sdk_key")); ?>'
    });
</script>

Or use the Ask Junkie WordPress Plugin for easier integration.

📱 React Native / Mobile

The SDK is designed for web browsers. For React Native apps, you can:

Use a WebView to display a web page with the chatbot
Build a custom chat UI and use the AI providers directly

⚙️ Configuration Options

Using SDK Key (Recommended)

AskJunkie.init({
    sdkKey: 'ak_your_sdk_key_here'
});
// All settings loaded from dashboard!

Using Direct Configuration (Legacy)

AskJunkie.init({
    // ═══════════════════════════════════════════════════════════
    // REQUIRED
    // ═══════════════════════════════════════════════════════════
    apiKey: 'gsk_xxx...',  // Your AI provider API key
    
    // ═══════════════════════════════════════════════════════════
    // AI PROVIDER SETTINGS
    // ═══════════════════════════════════════════════════════════
    provider: 'groq',  // 'groq' | 'gemini' | 'openai' | 'openrouter'
    model: null,       // Optional: Override default model
    
    // ═══════════════════════════════════════════════════════════
    // APPEARANCE
    // ═══════════════════════════════════════════════════════════
    botName: 'AI Assistant',
    botAvatar: null,  // URL to custom avatar image
    welcomeMessage: "Hi! 👋 I'm your AI assistant. How can I help you today?",
    position: 'bottom-right',  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
    
    theme: {
        mode: 'gradient',      // 'gradient' | 'solid'
        preset: 1,             // 1-7 for preset gradients
        primary: '#6366f1',    // Primary color (purple)
        secondary: '#ec4899'   // Secondary color (pink)
    },
    
    // ═══════════════════════════════════════════════════════════
    // BEHAVIOR
    // ═══════════════════════════════════════════════════════════
    draggable: false,     // Allow users to drag the toggle button
    persistChat: true,    // Save chat history to localStorage
    voiceInput: true,     // Enable microphone button
    openOnLoad: false,    // Auto-open chat when page loads
    
    suggestions: [        // Quick reply buttons
        'Contact us',
        'Pricing',
        'Help'
    ],
    
    // ═══════════════════════════════════════════════════════════
    // AI CONTEXT (Teach the AI about your website)
    // ═══════════════════════════════════════════════════════════
    context: {
        siteName: 'My Website',
        siteDescription: 'We are a software company that builds amazing products',
        customInfo: `
            - Business hours: 9 AM - 5 PM EST
            - Support email: [email protected]
            - We offer free trials for all plans
        `,
        restrictions: 'Do not discuss competitor pricing'
    },
    
    // ═══════════════════════════════════════════════════════════
    // ANALYTICS
    // ═══════════════════════════════════════════════════════════
    analytics: {
        enabled: true  // Log chats to Firebase for analytics
    }
});

🎨 Theme Presets

| Preset | Colors | Description | |--------|--------|-------------| | 1 | 🟣→🔴 | Purple to Pink (Default) | | 2 | 🔵→🔵 | Blue to Cyan | | 3 | 🟢→🟢 | Green to Teal | | 4 | 🟠→🔴 | Orange to Red | | 5 | 🟣→🔵 | Violet to Blue | | 6 | 🟡→🔴 | Yellow to Red (Sunset) | | 7 | 🔵→🟢 | Blue to Green (Ocean) |

🤖 AI Providers

| Provider | Default Model | Get API Key | Notes | |----------|---------------|-------------|-------| | Groq | llama-3.3-70b-versatile | console.groq.com | ⚡ Fastest, Free tier | | Google Gemini | gemini-1.5-flash | aistudio.google.com | Free tier | | OpenAI | gpt-3.5-turbo | platform.openai.com | Most popular | | OpenRouter | meta-llama/llama-3-8b-instruct | openrouter.ai | Multi-model |

🎮 API Methods

// Open the chat window
AskJunkie.open();

// Close the chat window
AskJunkie.close();

// Toggle chat open/closed
AskJunkie.toggle();

// Send a message programmatically
AskJunkie.sendMessage('Hello, I need help!');

// Update AI context dynamically
AskJunkie.setContext({
    customInfo: 'New information for the AI'
});

// Listen to events
AskJunkie.on('message', (data) => {
    console.log('Message:', data);
});

// Clean up and remove widget
AskJunkie.destroy();

// Get SDK version
console.log(AskJunkie.getVersion());  // "1.1.6"

🎨 Custom Styling

Override default styles with CSS:

/* Custom toggle button */
.ask-junkie-toggle {
    width: 70px !important;
    height: 70px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Custom chat window size */
.ask-junkie-window {
    width: 420px !important;
    height: 600px !important;
}

/* Custom message bubbles */
.ask-junkie-message.user .message-content {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* Custom input styling */
.ask-junkie-input-row input {
    border-radius: 24px !important;
}

🔒 Security Notes

SDK Keys: The SDK key only provides access to your chatbot settings. Your AI provider API keys are stored securely in Firebase and never exposed to the client.
Domain Restriction: Configure allowed domains in the dashboard to prevent unauthorized use of your SDK key.

Data Privacy: Chat analytics are logged to Firebase. Disable with:

AskJunkie.init({
    sdkKey: 'ak_xxx',
    analytics: { enabled: false }
});

📁 Project Structure

ask-junkie-sdk/
├── dist/
│   ├── ask-junkie.min.js    # UMD bundle (script tag)
│   ├── ask-junkie.esm.js    # ES Module bundle
│   └── ask-junkie.css       # Styles
├── src/
│   ├── core/                # Core SDK logic
│   ├── ai/                  # AI provider implementations
│   ├── ui/                  # Chat widget UI
│   ├── analytics/           # Firebase logging
│   └── utils/               # Utilities
├── package.json
└── README.md

🛠️ Development

# Clone the repo
git clone https://github.com/junkiescoder/ask-junkie-sdk.git

# Install dependencies
npm install

# Development mode (watch)
npm run dev

# Build for production
npm run build

📄 License

MIT License - Created by Junkies Coder

🔗 Links

npm: npmjs.com/package/ask-junkie-sdk
CDN: cdn.jsdelivr.net/npm/ask-junkie-sdk
GitHub: github.com/junkiescoder/ask-junkie-sdk
Dashboard: Contact us for dashboard access

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Ask Junkie SDK

✨ Features

🆕 What's New in v1.1.6

📦 Installation

Option 1: npm (Recommended for frameworks)

Option 2: CDN (Quick integration)

Option 3: unpkg CDN

🎯 Dashboard Setup

Step 1: Create an Account

Step 2: Create an SDK Key

Step 3: Configure Settings

🚀 Quick Start

Minimal Setup (with SDK Key)

🖼️ Framework Integration Guides

📌 HTML/CSS/JavaScript (Vanilla)

⚛️ React

▲ Next.js (App Router)

▲ Next.js (Pages Router)

💚 Vue 3

🅰️ Angular

🧡 Svelte

🟢 Node.js / Express (Server-Rendered Pages)

🎨 WordPress

📱 React Native / Mobile

⚙️ Configuration Options

Using SDK Key (Recommended)

Using Direct Configuration (Legacy)

🎨 Theme Presets

🤖 AI Providers

🎮 API Methods

🎨 Custom Styling

🔒 Security Notes

📁 Project Structure

🛠️ Development

📄 License

🔗 Links