Full-viewport agent app start screen: sidebar, prompt box and task cards. The pointer uncovers ASCII glyphs that fade toward the edge of its lens; clicking empty space drops a ripple of glyphs that spreads like water.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/ascii-workspace
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Bot, CalendarClock } from "lucide-react";4import { AsciiWorkspace } from "@/components/pages/ascii-workspace";56export function Workspace() {7return (8<AsciiWorkspace9assistant="Nova"10subtitle="Ask for a feature, a fix or a design."11cards={[12{ icon: CalendarClock, kicker: "Scheduled task", title: "Weekly changelog", meta: "Every Monday" },13{ icon: Bot, kicker: "Agent session", title: "Nova", meta: "Online" },14]}15onSubmit={(request) => console.log(request)}16onCardClick={(card) => console.log(card.title)}17/>18);19}
| Prop | Type | Default | Description |
|---|---|---|---|
| assistant | string | "Atlas" | Assistant name in the breadcrumb, headline and model chip |
| title | string | "What should we build with {assistant} today?" | Headline |
| subtitle | string | "Start from an idea, write the code, or explore a design." | Line under the headline |
| placeholder | string | "Describe what you want to build, change or design…" | Prompt box placeholder |
| agents | WorkspaceAgent[] | 3 sample agents | Sidebar agents: name, status, time and an optional online dot |
| threads | WorkspaceThread[] | 5 sample threads | Recent threads in the sidebar; the first is shown as current |
| cards | WorkspaceCard[] | 3 sample cards | Icon, kicker, title and meta cards under the prompt box |
| onSubmit | (request: string, event: FormEvent) => void | – | Called with the typed request |
| onCardClick | (card: WorkspaceCard) => void | – | A card was clicked |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.