Integrated RAG Chatbot Developer Skill

When to Use This Skill

User wants to "add an AI chatbot to my website"
User asks to "build a RAG chatbot", "embed a smart assistant", or "make the site answer questions about its own content"
User needs a chatbot that can answer based on selected text on the page
User wants a complete, deployable solution with backend, vector DB, history, and beautiful UI

How This Skill Works

Generate full project structure with FastAPI backend
Create secure .env files with all required keys
Set up Qdrant Cloud collection + Cohere embeddings pipeline
Implement Neon Postgres for conversation history & metadata
Generate OpenAI ChatKit widget with custom styling and selected-text trigger
Add ingestion script to index all site content (Markdown, HTML, PDFs)
Enable "Ask about selected text" feature via context injection
Provide one-click deployment instructions (Vercel / Render / Railway)

Full Deliverables Generated

Complete project folder structure
backend/ – FastAPI server with RAG routes
ingest.py – Script to load and chunk your website/content
chatkit-widget/ – Custom styled OpenAI ChatKit embed code
.env.example and deployment-ready .env
Stylish floating widget with dark/light mode, typing indicators, copy buttons

Output Format

text

Project: RAG-Chatbot-YourSiteName
├── backend/
│   ├── main.py              ← FastAPI server
│   ├── rag.py                ← Cohere + Qdrant retrieval
│   ├── database.py           ← Neon Postgres history
│   └── models.py
├── ingest.py                 ← Run once to index your site
├── chatkit-widget/
│   └── widget.html           ← Copy-paste into <head>
├── .env                      ← Auto-generated with your keys
└── README.md                 ← Full deployment guide

Example Output (Delivered Instantly)

Input:
"Build a RAG chatbot for my personal portfolio at https://john.dev that uses my blog posts and projects page. Make it beautiful, support selected text, and store chat history."

What You Get Immediately:

.env (ready for your keys)

env

# === YOUR SECRETS (User fills these) ===
OPENAI_API_KEY=sk-...
COHERE_API_KEY=...
QDRANT_URL=https://your-cluster.qdrant.cloud:6333
QDRANT_API_KEY=...
NEON_DATABASE_URL=postgresql://user:pass@ep-...pooler.neon.tech/db?sslmode=require

# === AUTO-FILLED BY SKILL ===
CHATKIT_BOT_ID=bot_1234567890
PROJECT_NAME=john.dev Assistant

Beautiful ChatKit Widget (paste into your site)

html

<script src="https://chatkit.openai.com/widget.js"></script>
<div id="chatkit-widget"></div>
<script>
  ChatKit.init({
    botId: "YOUR_BOT_ID",
    title: "Ask me anything about this site",
    subtitle: "I can read selected text!",
    primaryColor: "#6366f1",
    position: "bottom-right",
    welcomeMessage: "Hi! Highlight any text and ask me about it.",
    selectedTextSupport: true,
    apiBase: "https://your-backend.onrender.com"
  });
</script>

FastAPI Backend Snippet (main.py)

python

from fastapi import FastAPI, Request
from rag import retrieve_context, generate_response
from database import save_conversation, get_history

app = FastAPI()

@app.post("/chat")
async def chat(request: Request):
    data = await request.json()
    user_message = data["message"]
    selected_text = data.get("selectedText", "")
    history = get_history(data["sessionId"])

    context = retrieve_context(user_message + selected_text)
    response = generate_response(user_message, context, history)
    
    save_conversation(data["sessionId"], user_message, response)
    return {"response": response}

One-Command Ingestion

bash

python ingest.py --url https://john.dev --recursive
→ Successfully indexed 42 pages into Qdrant with Cohere embeddings

Live Features Included

Answers only from your site content (no hallucinations)
Highlight any text → "Ask about this" button appears
Full conversation history per user (Neon Postgres)
Mobile-responsive, animated, professional design
GDPR-safe session handling

Final Message from Skill:

Your RAG chatbot is 100% ready!
Deploy backend → Run ingestion → Paste widget → Done!
Users can now talk to your website like it’s alive.

Search AI Tools

integrated-rag-chatbot-developer

Install this agent skill to your Project

SKILL.md