Writing Assistant

AI chat card with a soft gradient glow, suggestions, streaming replies and live voice dictation.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/writing-assistant.json · Import from @/components/ui/writing-assistant

When to use

A small AI helper inside an editor, CRM or sidebar – rewrite, shorten, translate or draft
Landing pages that should show an assistant you can actually try, including voice input

When not to use

Long conversations with files, tools and model settings – use the Chat Composer or the AI Workspace block
When you can't send voice to the browser's speech service – set speech="simulate" or hide the mic

Usage

import { WritingAssistant } from "@/components/ui/writing-assistant";

export function Helper() {
  return (
    <WritingAssistant
      name="Quill"
      tagline="Your writing companion."
      respond={async (message) => {
        const res = await fetch("/api/write", { method: "POST", body: JSON.stringify({ message }) });
        return (await res.json()).text;
      }}
    />
  );
}

Props

Name	Type	Default	Description
`name`	`string`	`"Quill"`	Assistant name on top
`tagline`	`string`	`"Your writing companion."`	Line under the name
`greeting`	`string`	`"What should we write?"`	Big line on the welcome screen
`suggestions`	`string[]`		Chips that send themselves as a message
`placeholder`	`string`	`"Ask anything…"`	Placeholder of the prompt field
`respond`	`(message) => string \| Promise<string>`		Your answer for a message; a sample writer is used by default
`speech`	`"auto" \| "simulate"`	`"auto"`	auto uses the browser's speech recognition when available, simulate always plays a sample take
`dictation`	`string`		Sentence used for simulated dictation
`className`	`string`		Extra class on the root

Keyboard

Enter: Sends what's in the prompt field
Shift / Enter: Starts a new line – the field grows up to four lines, then scrolls
Tab: Moves through the suggestions, the field, Send, the mic and New chat

Accessibility

The mic is a toggle button with aria-pressed and a label that says what it does next
New messages are announced politely; the typing dots carry a label
Everything works with the keyboard; dictation is optional

Responsive

Fills its container up to 380px wide
Dictation uses the Web Speech API (Chrome, Edge, Safari) with the page language; elsewhere a short simulated take plays
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19