Documentation for the visitor-facing chat app of AI Bot Studio, a platform for building AI chat bots that answer from a business's own content. This is the part customers see: a full chat page, a popup widget and an embeddable script that a business drops into its own website. Bots are built in AI-Bot-Studio-Frontend and answered by AI-Bot-Studio-Backend.
The source code is not included in this repository. This is client work and the code is proprietary. This repo only holds documentation: this README, a reverse-engineered product spec (PRD.md), and screenshots and two diagrams in
screenshots/. Everything here was written from a read-through of the actual codebase. Hostnames, credentials and security specifics are left out on purpose.
Full chat page. Logo sidebar, greeting, input and quick answer buttons. The recent conversations list is empty because chat history is not finished.
Popup widget. The widget on a blank host page, with header, logo, headline and input.
Welcome gate. A lead form over the chat with a first name, an email and a newsletter checkbox.
A business builds a bot in the studio and gets a link and an embed snippet. This app loads that bot's settings from the server and turns them into a chat experience for visitors. It shows the bot's colors, logo and greeting, asks for lead details if the owner wants them, streams answers as they are generated, and can switch to a voice conversation. One codebase builds both the hosted app and the script that other sites embed.
- Hosted app. A Vue 3 single-page app with three views of the same chat: a full page, a popup widget and an iframe-friendly page.
- Embed script. The same components are also built as a library that registers two custom elements,
<ai-bot-page>and<ai-bot-bubble>. A site adds one script tag and the element, and the widget renders inside a shadow root so the host page's styles do not leak in. - No sign-in. Everything is public. A visitor is identified by a session ID kept in the browser and the bot's ID.
- Finding the bot. By ID in the URL, by a URL slug, or by custom domain. On a custom domain, the root address looks up the domain and shows its default bot, or redirects.
- Answers over a socket. The question goes to the server over HTTP, and the answer streams back in chunks through Socket.IO.
- Voice. A separate raw WebSocket carries microphone audio to the server and plays the reply.
| Area | Tools |
|---|---|
| Framework | Vue 3, Vue Router 4, Pinia |
| Build | Vite 5, plain JavaScript, a second Vite config for the embed library (ES, CommonJS and UMD) |
| Styling | Tailwind CSS 3 with a Tailwind starter kit |
| HTTP and realtime | Axios, Socket.IO client, a raw WebSocket for voice |
| Forms | vee-validate, Yup |
| Other | Lucide icons, SweetAlert2 toasts, Web Audio API |
- Full-page chat with desktop and mobile layouts, driven by the bot's page styling.
- Popup widget with a floating launcher, a header with logo and headline, and a full-screen mode on phones.
- Embed options. Script tag with custom elements, or an iframe page.
- Styling from the bot's settings. Colors, logos, icons, greeting and page title and favicon all come from the server.
- Welcome gate. An optional form for first name, last name, email and phone, with each field switchable and the headline editable.
- Quick answers. Buttons the owner defines, shown under the greeting and the last answer.
- Call-to-action button that appears after a few messages when the owner turns it on.
- Streaming answers with basic link and bold formatting.
- Voice mode in the widget: microphone capture, streamed audio to the server and playback of the reply, with a speaking indicator.
- Custom domains. A visitor on a customer's own domain lands on that domain's default bot.
- Optional style injection for the embed, through an attribute that points to a stylesheet or holds inline CSS.
- Chat history is unfinished. The call is stubbed out with a TODO, so the "recent conversations" list stays empty.
- Feedback buttons are local only. Thumbs up and down toggle on screen but nothing is sent to the server.
- Voice is widget-only, and it sends audio as large arrays of numbers, which is wasteful.
- No query-string options for the embed or the page.
- Dead code. A tracked backup file, large commented-out blocks, unused stores and services copied from the studio app, two identical stub root components, an unused audio library and a duplicate dialog component.
- A few visible bugs. An undefined variable in one condition, a misspelled directive and event name in the desktop view, a broken multi-build script, and chat listeners registered in each view without being removed.
- One JavaScript chunk. The build forces everything into a single file.
- Security and hardening review needed. The details are not published here.
- No tests, no linting, no CI. Deployment is a manual build and copy.
- Environment files are tracked in git.
- Placeholder copy. The README of the project is still the template's, and the privacy route shows terms and conditions text.
Ammad Sarfraz
This repository contains documentation only. The AI Bot Studio platform and its source code belong to the client.