@edebbyi/assistant-bot

A reusable AI assistant bot with React chat UI for Anatomie applications.

Installation

npm install @edebbyi/assistant-bot

Quick Start

1. Create a Knowledge Base

Create a JSON file with your bot's knowledge:

{
  "features": {
    "create_project": {
      "name": "Create Project",
      "description": "Start a new project",
      "keywords": ["new", "start", "create"],
      "steps": [
        "Click the + button in the top right",
        "Enter your project name",
        "Click Create"
      ],
      "tips": ["Use descriptive names for easy searching"]
    }
  },
  "faq": {
    "what_is_this": "This is your awesome app for managing projects."
  },
  "apps": {
    "myapp": {
      "name": "My App",
      "description": "The main application"
    }
  }
}

2. Set Up the Server

import { createBot } from '@edebbyi/assistant-bot/server';
import express from 'express';

const app = express();
app.use(express.json());

// Create the bot
const bot = createBot({
  name: 'S-bot',
  knowledgePath: './knowledge.json',
  openaiKey: process.env.OPENAI_API_KEY,
  model: 'gpt-4o',
});

// Add the chat endpoint
app.post('/api/chat', bot.createHandler());

app.listen(3000);

3. Add the Chat UI (React)

import { ChatBot } from '@edebbyi/assistant-bot/client';

function App() {
  return (
    <div>
      <h1>My App</h1>

      <ChatBot
        botName="S-bot"
        apiEndpoint="/api/chat"
        welcomeMessage="Hi! I'm S-bot. How can I help?"
        quickQuestions={[
          'How do I create a project?',
          'What can I do here?',
        ]}
        theme={{
          primary: '#4F46E5',
          userBubble: '#4F46E5',
        }}
      />
    </div>
  );
}

Server API

createBot(config)

Creates a bot instance.

| Option | Type | Default | Description | |--------|------|---------|-------------| | name | string | 'Assistant' | Bot display name | | knowledgePath | string | required | Path to knowledge JSON | | systemPrompt | string | auto-generated | Custom system prompt | | openaiKey | string | process.env.OPEN_AI_KEY | OpenAI API key | | model | string | 'gpt-4o' | OpenAI model |

Returns:

• chat(messages) - Process messages and get a reply
• createHandler() - Express-compatible route handler

React Component Props

<ChatBot />

| Prop | Type | Default | Description | |------|------|---------|-------------| | botName | string | 'Assistant' | Bot display name | | apiEndpoint | string | '/api/chat' | Chat API URL | | theme | object | stone colors | Custom colors | | position | string | 'bottom-right' | Widget position | | quickQuestions | string[] | [] | Suggested questions | | welcomeMessage | string | auto | Welcome text | | placeholder | string | 'Type a message...' | Input placeholder |

Theme Options

{
  primary: string;        // Button/accent color
  background: string;     // Main background
  surface: string;        // Card backgrounds
  border: string;         // Border color
  text: string;           // Primary text
  textSecondary: string;  // Secondary text
  userBubble: string;     // User message background
  userBubbleText: string; // User message text
  botBubble: string;      // Bot message background
  botBubbleText: string;  // Bot message text
}

Knowledge Base Structure

{
  features: {
    [key: string]: {
      name: string;
      description: string;
      keywords?: string[];
      steps: string[];
      tips?: string[];
    }
  },
  faq: {
    [key: string]: string;
  },
  apps: {
    [key: string]: {
      name: string;
      description: string;
    }
  },
  brand?: {
    name: string;
    description: string;
  }
}

Environment Variables

| Variable | Description | |----------|-------------| | OPEN_AI_KEY | OpenAI API key | | OPENAI_MODEL | Model override (default: gpt-4o) |

License

MIT