AI SaaS · 2026 Live

Portfolio Bot

Embeddable RAG chatbot grounded on atifali.pages.dev, with inline citations, streaming responses, and prompt-injection protection.

GitHub Live

Tech stack

TypeScript Cloudflare Workers Cloudflare Workers AI Cloudflare Vectorize Astro Vanilla JS Markdown ingestion

The problem

Most low-cost chatbot offerings are bare LLM wrappers with no retrieval, no citations, no abuse protection, and no embed story. A buyer searching for a chatbot for their own website wants to see a chatbot embedded in a real website, talking about that website's actual content, and they want to verify it themselves before paying.

Goals

Ship a chatbot embedded on atifali.pages.dev that talks about the portfolio itself
Ground every answer in the project READMEs and case studies behind the site
Surface inline citations that link back to the source case study
Keep the embed footprint small: no framework runtime on the host page
Add abuse protection (rate limiting, prompt-injection guard) before any production embed

The solution

Cloudflare Worker exposes ingestion, query, and chat endpoints
Markdown ingestion pipeline chunks and embeds the case studies, upserts into Vectorize
Retrieval pulls top matches from Vectorize, generation runs on Workers AI with Claude as an option
Vanilla JS widget mounts via a single script tag from Layout.astro, no React or framework runtime on the host
Streaming responses for fast first-token feedback, conversation history persists in localStorage
Inline citation pills attach to each answer, linking back to the relevant /projects/ page
Per-IP rate limiting and a prompt-injection guard sit in front of the generation endpoint

My role

→ Solo architect and engineer, ingestion pipeline to embed
→ Cloudflare Worker design, Vectorize binding, and ingestion pipeline
→ Vanilla JS chat widget with streaming and citation rendering
→ Layout.astro embed wiring on atifali.pages.dev
→ Rate limiting and prompt-injection guard layer

UI direction

Floating chat bubble pinned bottom-right on every page. Expands to a focused chat surface with suggested starters. Citation pills are clickable and link straight to the source case study.

User flows

Visitor ask flow

1 Visitor opens the chat bubble on any page of atifali.pages.dev
2 Question goes to the Worker query endpoint, which retrieves the top chunks from Vectorize
3 Worker streams a grounded answer back over Server-Sent Events
4 Citation pills render alongside the answer, linking to the /projects/ pages that supplied the context
5 Conversation history persists in localStorage so the visitor picks up where they left off on the next page

Screenshots

Click any image to open at full size.

Portfolio homepage with the chat bubble and Ask about my projects tooltip pinned to the bottom-right.

Chat widget expanded with the empty state and four suggested starter questions.

Q&A view: What is Axon? returns a grounded answer with three citation pills linking to the Axon case study and services page.

Streaming response mid-flight with the blinking cursor and a green streaming indicator.

Key learnings

Grounding a chatbot in the host site's own content is a faster trust signal than any landing-page copy
Citation pills that link back to the source case study turn skeptical visitors into clickers on the rest of the portfolio
Cloudflare Workers AI + Vectorize on the free tier is a viable production path for a small embed when latency and cost both matter
Vanilla JS for the widget keeps the embed compatible with any host framework and avoids dragging a runtime into someone else's page

Want something like Portfolio Bot?

I'm open to senior contract work. Let's talk about what you're building.

Get in touch