Ai Response

Renders streaming assistant text with animated words and a caret. Words fade in as they arrive, and citations appear as pills. Use for real-time text delivery with visual feedback and references.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-response

npx layro-cli add @educlopez/ai-response

npx layro-cli add @educlopez/ai-response

bunx layro-cli add @educlopez/ai-response

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { Fragment, useEffect, useRef } from "react";

const EASE_OUT = [0.23, 1, 0.32, 1] as const;
/**
 * Hoisted and frozen. Motion restarts an animation whenever the transition it is
 * given changes, and this component re-renders on every token — so the object
 * has to be the same reference every time.
 */
const WORD_TRANSITION = { duration: 0.22, ease: EASE_OUT } as const;
const WORD_BLUR_PX = 4;