Code block

Overview

A code artifact for when the model produces source code. Built on the CodeBlock primitive from @gremorie/rx-ai (Shiki under the hood) with a CodeBlockCopyButton overlay. The model emits { code, language, filename }; the artifact handles highlighting, line wrapping, and the copy affordance.

This is the artifact you want every time the model "writes a snippet" in chat — production-grade markup, accessible copy button, no manual plumbing.

Preview

SaveBar.tsx

Streamed code emitted by the model with Shiki highlighting.

TSX + Shiki

Schema

The LLM returns structured output matching this shape:

{
  type: "code-block",
  code: string,
  language: string,    // "tsx", "ts", "js", "py", "rs", ...
  filename?: string,
}

Anatomy

Card / CardHeader - frame with filename + badge
CodeBlock - the rx-ai primitive that runs Shiki against code
CodeBlockCopyButton - overlay copy-to-clipboard control
Badge (outline) - signals the artifact type

Installation

npx gremorie@latest add artifact-code-block

pnpm dlx gremorie@latest add artifact-code-block

yarn dlx gremorie@latest add artifact-code-block

bunx --bun gremorie@latest add artifact-code-block

Prompt examples

Sample prompts that produce valid output for this artifact:

"Write me a React save-bar component in TSX."
"Show the SQL to create a users table with email + role."
"Give me a Python snippet that calls the OpenAI API."

Code

'use client';

import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@gremorie/rx-display';
import { CodeBlock, CodeBlockCopyButton } from '@gremorie/rx-ai';

const CODE = `import { Button } from "@gremorie/rx-forms";

export function SaveBar() {
  return (
    <div className="sticky bottom-0 flex justify-end gap-3 border-t bg-background/90 p-3 backdrop-blur">
      <Button variant="ghost">Cancel</Button>
      <Button>Save changes</Button>
    </div>
  );
}`;

export function CodeBlockArtifact() {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between gap-3">
          <div>
            <CardTitle>SaveBar.tsx</CardTitle>
            <CardDescription>
              Streamed code emitted by the model with Shiki highlighting.
            </CardDescription>
          </div>
          <Badge variant="outline">TSX + Shiki</Badge>
        </div>
      </CardHeader>
      <CardContent>
        <CodeBlock code={CODE} language="tsx">
          <CodeBlockCopyButton />
        </CodeBlock>
      </CardContent>
    </Card>
  );
}

Angular edition planned for Phase 5h. Star the repo to track progress.

Streaming behavior

This artifact supports partial schema. As the model streams code, Shiki re-highlights on each chunk so the user sees colorized output appear progressively. The copy button stays armed against the latest buffered value.

Code block

On this page