Dabber AI chat widget embedded on a retail site

Dabber: An AI Agent for Your Website

An embeddable AI chat widget and an agent-creation dashboard, built on RAG and MCP tool integrations.

RoleProduct Designer & Front-End Developer
Client / ContextSenior capstone, B.S. Computer Science, Qatar University
Year2025–2026
ToolsFigma, [ADD: e.g. React, Next.js, TypeScript, Tailwind]

The idea

Dabber lets a business put an AI agent on its website that answers using the business's own information (retrieval-augmented generation) and can take real actions through MCP tool integrations. [ADD: the problem you wanted to solve]

Two surfaces, one product

There are two sides: the widget that website visitors talk to, and the dashboard where a business creates and configures its agent. I designed and built both, from Figma to the front-end code.

Dabber AI chat widget on a retail site
The chat widget on a retail site

Designing the chat widget

[ADD: decisions, e.g. keeping it unobtrusive, fitting any brand, how it handles loading and errors]

Dabber agent creation dashboard
The agent creation dashboard

Designing the dashboard

[ADD: how you made configuring an AI agent understandable for non-technical users]

Building it

[ADD: front-end challenges, e.g. embedding the widget on other sites, streaming responses]

Outcome

Built as my senior capstone project. [ADD: grade, demo, feedback, or next steps]

What I learned

[ADD]