`The shift from simple web apps to AI-driven interfaces is moving fast. But one of the biggest challenges developers face isn't the backend AI logic—it's building a frontend UI that handles streaming text, tool-calling states, and complex agent interactions without feeling clunky.
When engineering custom B2B web applications at Vectoris, we needed a clean, scalable way to render autonomous agent outputs. Standard chat interfaces weren't cutting it for complex workflows.
Here is the lightweight, production-ready UI architecture we use, built entirely with Next.js, Tailwind CSS, TypeScript, and Lucide React.
The Problem with Standard Chat UIs
Most starter templates treat AI responses as simple strings. But when you are dealing with autonomous agents, the UI needs to handle:
- Thinking states (when the agent is reasoning).
- Tool executions (e.g., "Searching the web...", "Querying database...").
- Markdown rendering for the final output.
The Solution: A Component-Driven Message Interface
Instead of a massive monolithic chat component, break the interface down. Here is a simplified version of our core message component.
1. The Message Type Definition (TypeScript)
First, define a strict type that accounts for agent actions, not just text.
typescript
export type AgentMessage = {
id: string;
role: 'user' | 'agent';
content: string;
status: 'thinking' | 'executing_tool' | 'complete';
toolName?: string;
};
