22 AI UI snippets · every one runs live in the editor
AI UI Components
AI UI components are the interface pieces an AI product needs, from chat bubbles to voice indicators. Every snippet here runs live in the editor, so you can change it and copy the result, though the preview cannot use a microphone.
AI UI components by use
Chat and prompt interfaces
These AI UI snippets cover the places where people type to a model and read its replies.
AI Chatbot Popup Widget JSA corner chat widget with suggested questions and typing dots, where one getReplyfunction returns every answer.CSSJS
AI Chatbot Interface Layout JSA complete chat window in flexbox that scrolls to the newest message and sends on Enter.CSSJS
AI Chat Input with File Attachments JSA message box that takes files by button, paste or drag and drop, with thumbnails from URL.createObjectURL.CSSJS
AI Chat Bubble Messages CSSUser and AI message bubbles, with a typing indicator of three dots that bounce in turn.CSS
AI Prompt Input with Glow Effect JSA prompt box that grows with its text, framed by a blurred gradient glow that drifts.CSSJS
Stream AI Response with Fetch JSA reply read from res.bodywith aTextDecoderStream, split into server-sent events and stopped with anAbortController.CSSJS
AI Token Streaming Text Reveal JSA reply that streams in word by word, with a cursor that follows the last word and blinks when the reply ends.CSSJS
Thinking, progress and loading states
These AI UI snippets show that a model or an agent is still working.
AI Thinking Indicator with Reasoning Panel JSA Thinking label with a live timer over streaming reasoning, which folds into a Thought for N seconds toggle when the answer starts.CSSJS
AI Thinking Text Animation CSSA status line with a gradient that sweeps across the letters, made with background-clip: text.CSS
AI Agent Task Timeline JSAgent steps that run in order with a spinner, a tool call and a timer each, plus a failed step with retry.CSSJS
AI Loading Animations CSSSix CSS loaders, from a clip-pathspark to a conic gradient ring and cycling status words.CSS
AI Generative Skeleton Loader CSSSkeleton blocks with a light sweep and shimmering text for content that is still generating.CSS
Voice input and assistant animations
These AI UI snippets take voice input or give visual feedback while an assistant listens or speaks.
Speech to Text Voice Input JSDictation with the Web Speech API that previews partial words and writes only final results into the box.CSSJS
AI Voice Assistant Breathing Ring CSSGlowing rings that breathe out of step, blended with mix-blend-mode: screen.CSS
Morphing Voice Assistant Orb CSSA gradient orb that changes shape by animating an eight-value border-radius.CSS
AI Voice Wave Visualizer JSBars that jump to a random height every 150 ms, the classic voice waveform.CSSJS
AI Voice Command Ripple Canvas JSA hold-to-talk mic button that sends ripples across a canvas and keeps the hold with pointer capture.CSSJS
Vision and image generation
These AI UI snippets suit tools that look at images or make them.
AI Image Generation Loading Animation JSA canvas that sharpens from grain to a finished picture over 30 steps, with a progress bar, cancel and save.CSSJS
AI Object Recognition Scanning Box JSA scan line sweeps an image, then labeled bounding boxes appear one after another.CSSJS
Modern AI Image Generation Gallery JSA prompt box whose conic-gradientborder spins while it generates, and skeleton cards that swap for results.CSSJS
AI buttons and glow effects
These pieces mark the places on a page where AI is available or already working.
All snippets22
More tags
AI Image Generation Loading Animation JS
AI Screen Edge Glow Effect CSS
AI Loading Animations CSS
AI Sparkle Button Animation CSS
AI Chatbot Popup Widget JS
Stream AI Response with Fetch JS
Speech to Text Voice Input JS
AI Chat Input with File Attachments JS
AI Agent Task Timeline JS
AI Thinking Indicator with Reasoning Panel JS
AI Object Recognition Scanning Box JS
AI Voice Assistant Breathing Ring CSS
AI Chat Bubble Messages CSS
AI Voice Command Ripple Canvas JS
Modern AI Image Generation Gallery JS
AI Token Streaming Text Reveal JS
Morphing Voice Assistant Orb CSS
AI Generative Skeleton Loader CSS
AI Thinking Text Animation CSS
AI Voice Wave Visualizer JS
AI Prompt Input with Glow Effect JS
AI Chatbot Interface Layout JS
Frequently Asked Questions
What are AI UI components?
AI UI components are the interface parts of an AI product, such as the chat window, the prompt box and the thinking, streaming and listening states. They cover what a user sees while a model reads, works and replies.
Do these AI UI snippets connect to an AI model?
No, these AI UI snippets are front-end components with simulated states. Replies, streaming, agent steps and voice levels run on timers, CSS animations or a fake server, so you swap in your own model's responses. The one exception is speech to text, which uses the browser's own speech recognition.
How do you make an AI thinking animation in CSS?
Clip a wide linear gradient to the text with background-clip: text and animate its background-position. The AI Thinking Text Animation snippet does this in pure CSS.
How do you show AI text streaming word by word?
Split the reply into words and append one at a time with setInterval, keeping a cursor after the last word. The AI Token Streaming Text Reveal snippet shows the pattern.
How do you stream a real AI response in JavaScript?
Read res.body from fetch through a TextDecoderStream and split the text on the blank line between server-sent events. The Stream AI Response with Fetch snippet shows the loop, with stop and error handling.
