multiAI Summary Pending

chatbot-implementation

Details of the RAG Chatbot, including UI and backend logic.

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/chatbot-implementation/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/abdulsamad94/chatbot-implementation/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/chatbot-implementation/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How chatbot-implementation Compares

Feature / Agent	chatbot-implementation	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Details of the RAG Chatbot, including UI and backend logic.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Chatbot Logic

## Overview
A specialized RAG (Retrieval Augmented Generation) chatbot that helps users learn from the textbook content.

## Backend
- **Route**: `app/api/chat/route.ts`
- **Logic**:
    1.  Receives `query` and `history`.
    2.  Embeds query using Gemini or OpenAI embedding model.
    3.  Searches Qdrant (vector DB) for relevant textbook chunks.
    4.  Constructs context from matches.
    5.  Generates response using Gemini Flash/Pro.

## Vector Search (Qdrant)
We use Qdrant for storing embeddings of the textbook.
- Collection: `textbook_chunks` (or similar).
- Fields: `text`, `source`, `chunk_id`.

## UI Component
- **Location**: `textbook/src/components/Chatbot/index.tsx`.
- **Features**:
    - Floating chat window.
    - Size controls (Small, Medium, Large).
    - Markdown rendering of responses.
    - Context selection (highlight text to ask about it).
    - Mobile responsive design.
    - Auth awareness (personalizes answer based on user profile).

## Styling
- **CSS**: `styles.module.css` (Premium animations, shadow effects).
- **Themes**: Dark/Light mode compatible (using `--ifm` variables).