Most AI demos live in a terminal. Ours didn't.
We built SupportMind AI with a full web chat interface — customer switching, real-time responses, auto ticket creation — all in one night using Flask and vanilla JavaScript.
Here's how we did it.
Why UI Matters for AI Demos
A terminal output can show that your agent works. A UI shows that your agent is a product.
Judges at hackathons see dozens of terminal demos. A working web interface with a chat bubble UI immediately signals that you've thought beyond the proof of concept.
The Stack
- Flask for the backend and API routes
- Vanilla HTML/CSS/JS for the frontend (no React, no build step)
- Served as a single-file template using Flask's render_template_string
The Key Features
Customer switching — judges can switch between customer IDs and see how the agent responds differently based on each customer's history.
Real-time chat — messages send on Enter or button click, responses stream back from the Flask API.
Auto ticket creation — when the agent detects a complex issue, a "Create Support Ticket" button appears automatically. One click creates the ticket and shows a confirmation.
The Ticket Detection Logic
python
def needs_ticket(reply):
keywords = ["broken", "refund", "urgent", "damaged", "investigate",
"sorry", "issue", "problem", "fix", "replace", "assist"]
return any(k in reply.lower() for k in keywords)
When the agent's reply contains these keywords, the frontend renders a ticket button. Clean separation between backend logic and UI behavior.
What I Learned
Keep the UI simple and the demo flow obvious. Every button should do exactly one thing. Every interaction should have a visible result. Judges aren't reading code — they're watching a demo. Make the demo tell the story.
Links
Top comments (0)