chatbot-implementation
Details of the RAG Chatbot, including UI and backend logic.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
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:
- Receives
queryandhistory. - Embeds query using Gemini or OpenAI embedding model.
- Searches Qdrant (vector DB) for relevant textbook chunks.
- Constructs context from matches.
- Generates response using Gemini Flash/Pro.
- Receives
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
--ifmvariables).
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-28
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!