AI Prompt Playground Hero

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat20.tsx instead.

Usage

The file also exports chat20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat20, chat20Demo } from "@/components/blocks/chat/chat20";

export default function Page() {
  return <Chat20 {...chat20Demo} />;
}

Props

Types

export interface PlaygroundExample {
  id: string;
  prompt: string;
  response: string;
}

Behavior notes

• Real client state: clicking an example chip sets the active response from a fixed prompt/response lookup array via useState.
• Typing a custom prompt and submitting the form shows the generic fallbackResponse (also real useState), it does not call any actual AI model.
• The response panel only renders once a response has been set (defaults to the first example's response on load), matching a realistic playground first-impression.
• Full split-screen framing (grid lg:grid-cols-2 min-h-[700px]), same pattern as the Auth split-screen blocks.