Moon Chat sectionsAI thinking and typing indicator in HTML

AI thinking and typing indicator in HTML

AI thinking and typing indicator for products where a model works on something and the person is left waiting. The chat typing indicator and the AI status line in one surface. It narrates what the agent is doing while it does it, which is what turns a long pause into something a user will sit through. Built for teams vibe coding AI products in Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor.

Chat Cards0 copies

About this vibe coding template

AI agent activity template for developers and designers building products where a model runs a job that takes real time. An agent that thinks for thirty seconds behind a blank screen reads as broken, and the user reaches for the back button long before the answer lands. Showing the work as it happens is what buys that time, and it does something else too: a person who watched the reasoning trusts the answer more than a person handed a result. Research tools, coding agents, data analysis products, and anything doing multi-step work all need this surface and it is the piece most AI builds leave until last. Plain HTML and CSS, no libraries and no build step.

Build a full AI chat product or AI SaaS app with this template design

An AI chat product repeats one surface at different sizes, from a full chat interface to a chat widget and a copilot panel, so one AI chat template can set the standard for every screen after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.

Plain HTML and CSS with no framework and no build step. To use it in React, Next.js, or Tailwind, paste it in and ask your AI coding tool to convert.

Paste into Claude Code, Replit, Lovable, Bolt, or Cursor

Common questions about this template

What is an AI agent activity panel?

The surface that shows what a model is doing while it works, so nobody is left in front of a blank screen. It reports progress as the job runs and settles into the finished answer.

Why show an agent's work at all?

Two reasons. A visible process makes a long wait bearable, so people stay. And someone who saw how an answer was reached trusts it more than someone handed a result with no working.

What kind of AI products use this?

Research assistants, coding agents, data analysis tools, and any product where a model runs several steps before it can answer. The longer the job, the more this surface earns its place.

Which tools work with this AI agent activity template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and describe the steps your agent actually runs.