Code Block

URL: /components/code-block

title: Code Block description: Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. path: elements/components/code-block

The CodeBlock component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.

Installation

Usage

import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";

<CodeBlock data={"console.log('hello world')"} language="jsx">
    <CodeBlockCopyButton onCopy={() => console.log("Copied code to clipboard")} onError={() => console.error("Failed to copy code to clipboard")} />
</CodeBlock>

Usage with AI SDK

Build a simple code generation tool using the experimental_useObject hook.

Add the following component to your frontend:

"use client";

import { experimental_useObject as useObject } from "@ai-sdk/react";
import { codeBlockSchema } from "@/app/api/codegen/route";
import { Input, PromptInputTextarea, PromptInputSubmit } from "@/components/ai-elements/prompt-input";
import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";
import { useState } from "react";

export default function Page() {
    const [input, setInput] = useState("");
    const { object, submit, isLoading } = useObject({
        api: "/api/codegen",
        schema: codeBlockSchema,
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (input.trim()) {
            submit(input);
        }
    };

    return (
        <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
            <div className="flex flex-col h-full">
                <div className="flex-1 overflow-auto mb-4">
                    {object?.code && object?.language && (
                        <CodeBlock code={object.code} language={object.language} showLineNumbers={true}>
                            <CodeBlockCopyButton />
                        </CodeBlock>
                    )}
                </div>

                <Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
                    <PromptInputTextarea
                        value={input}
                        placeholder="Generate a React todolist component"
                        onChange={(e) => setInput(e.currentTarget.value)}
                        className="pr-12"
                    />
                    <PromptInputSubmit status={isLoading ? "streaming" : "ready"} disabled={!input.trim()} className="absolute bottom-1 right-1" />
                </Input>
            </div>
        </div>
    );
}

Add the following route to your backend:

import { streamObject } from "ai";
import { z } from "zod";

export const codeBlockSchema = z.object({
    language: z.string(),
    filename: z.string(),
    code: z.string(),
});
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
    const context = await req.json();

    const result = streamObject({
        model: "openai/gpt-4o",
        schema: codeBlockSchema,
        prompt: `You are a helpful coding assitant. Only generate code, no markdown formatting or backticks, or text.` + context,
    });

    return result.toTextStreamResponse();
}

Features

Syntax highlighting with react-syntax-highlighter
Line numbers (optional)
Copy to clipboard functionality
Automatic light/dark theme switching
Customizable styles
Accessible design

Examples

Dark Mode

To use the CodeBlock component in dark mode, you can wrap it in a div with the dark class.

Props

`<CodeBlock />`

`<CodeBlockCopyButton />`

<TypeTable type={{ onCopy: { description: 'Callback fired after a successful copy.', type: '() => void', }, onError: { description: 'Callback fired if copying fails.', type: '(error: Error) => void', }, timeout: { description: 'How long to show the copied state (ms).', type: 'number', default: '2000', }, children: { description: 'Custom content for the button. Defaults to copy/check icons.', type: 'React.ReactNode', }, className: { description: 'Additional CSS classes to apply to the button.', type: 'string', }, '...props': { description: 'Any other props are spread to the underlying shadcn/ui Button component.', type: 'React.ComponentProps', }, }} />

5.4 KiB Raw Blame History