AI Code Block

Rich code output block with syntax highlighting, language detection, copy button, and 'Apply to file' action. Inspired by Cursor's code output.

components/greeting.tsx

1interface GreetingProps {
2  name: string;
3  emoji?: string;
4}
5 
6export function Greeting({ name, emoji = "👋" }: GreetingProps) {
7  return (
8    <div className="flex items-center gap-2">
9      <span>{emoji}</span>
10      <h1 className="text-2xl font-bold">
11        Hello, {name}!
12      </h1>
13    </div>
14  );
15}

Terminal Output

$ npm run build

✓ Compiled successfully ✓ Linting passed ✓ Type checking passed Route (app) Size ┌ ○ / 5.2 kB └ ○ /dashboard 8.1 kB ✓ Build completed in 3.2s