Generative AI Chat Interface

01 — Context

Summary

Before writing a single line of code, I spent a day on the call center floor. What I saw was 25 open memo windows — agents copying and pasting their way through every shift. That image shaped this project from the start: a standalone AI chat platform, built first to prove the interaction pattern before integrating it anywhere. It's since been folded into the CRM, with other platforms next in line.

02 — Challenge

Problem

Agents were managing dozens of memo windows across their screens, manually copying and pasting responses throughout every shift. This was the core inefficiency. With no planner involved and no existing reference for this kind of AI interface internally, the development team had to define and anticipate every possible use case ourselves — developer and designer working together to cover the unknowns, treating this as a pattern to validate before deciding where it belonged.

03 — Approach

What I Did

• Disabled input during active streaming with a responding placeholder — giving agents an unambiguous signal of system state.
• Built markdown rendering using react-markdown, remark-gfm, github-markdown-css, and DOMPurify. Customized visual elements including link colors to match the platform's design theme.
• Maintained session-based conversation history to preserve context throughout a shift.
• Designed dedicated error and timeout UI states, ensuring agents could recover gracefully without confusion.
• Architected the system to be platform-agnostic from the start — the same interaction model is now live inside the CRM, with structure in place to extend to additional platforms.

04 — Outcome

Result

Shipped in one month as a standalone platform, the interface proved its value quickly enough to be folded directly into the CRM — agents no longer need to leave their primary workspace to access AI assistance, with the same pattern now under consideration for additional platforms.