Skip to content

Code Block

Premium

Code an agent just wrote streams in line by line, then numbered markers tie its notes to the exact lines, with Copy and Apply.

AI Agent UIAI coding agentsCode review toolsDeveloper docs
Writing src/lib/fetch-retry.ts

src/lib/fetch-retry.ts

0 lines

Examples

Streaming code with a note
Writing src/billing/invoice.ts

src/billing/invoice.ts

0 lines
Completed code with notes
Wrote packages/billing-service/src/integrations/payments/providers/webhooks/handlers/subscription-renewal-handler.test.ts, 19 lines, 2 notes

packages/billing-service/src/integrations/payments/providers/webhooks/handlers/subscription-renewal-handler.test.ts

import { z } from 'zod'
const Invoice = z.object({
id: z.string().uuid(),
amountCents: z.number().int().nonnegative(),
currency: z.enum(['EUR', 'USD', 'GBP']),
issuedAt: z.string().datetime({ offset: true }),
})
export type Invoice = z.infer<typeof Invoice>
export function parseInvoice(input: unknown): Invoice | null {
const result = Invoice.safeParse(input)
if (!result.success) {
console.warn('invoice rejected', result.error.flatten().fieldErrors, 'aVeryLongIdentifierWithoutAnySpacesThatMustWrapOrTruncateCleanlyInsideTheCard_0123456789')
return null
}
return result.data
}
Empty file
Wrote src/empty.ts, 0 lines

src/empty.ts

No lines

Add to your projectPremium component

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••
2

For dark mode, add the dark class to your <html> element:

Optional
<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

CodeMarker

PropTypeDefaultDescription
idreqstring-Stable marker identifier that must be unique within the markers list.
linesreq[number, number]-Inclusive one-based line range attached to the note, clamped to the available code.
notereqstring-Annotation text shown for the marked range after streaming ends.

CodePanel

PropTypeDefaultDescription
filenamestring-Sets the path shown in the header and apply hint; left out, the demo uses a sample path and host mode shows no path, while passing it turns the demo off.
languagestring-Sets the language label shown after writing finishes; left out, the demo uses TypeScript and host mode shows no language, while passing it turns the demo off.
codestring-Supplies the displayed source text; left out, the demo streams sample code and host mode shows no lines, while passing it turns the demo off.
markersCodeMarker[]-Supplies annotated line ranges; left out, the demo uses sample notes and host mode shows none, while passing it turns the demo off.
streamingboolean-Keeps the panel in its writing state and hides marker notes when true; left out, the demo animates writing and host code is treated as complete, while passing it turns the demo off.
onCopy(code: string) => void-Receives the code after a successful clipboard copy; left out, copying still works without a notification.
onApply() => void-Handles applying the code and makes the Apply control available outside the demo; left out, host panels have no Apply control.
onUndo() => void-Handles undoing an apply and makes the Undo control available after applying; left out, host panels have no Undo control.
applyLabelstring'Apply'Sets the apply button text.
classNamestring-Adds classes to the outermost root; left out, only the built-in classes are used.
tuningPartial<Tuning>-Overrides panel measurements, timing and motion values; left out, every value in TUNING is used.

About Code Block

Code Panel shows code an agent wrote inside the conversation, with a file header, line numbers, syntax coloring drawn from the palette, and Copy, Apply and Run. While streaming, the panel reserves the announced number of lines so it does not grow line by line, highlighted ranges carry a gutter note and a Jump link cycles through them, Apply names the target file and line, Run shows a spinner and then an exit chip, and long blocks fold with a wrap toggle. Wide code scrolls inside the panel, never the page.

Built with

MotionTailwind CSS

Frequently asked questions

Is Code Block free to use?
Code Block is a Premium AI Canvas component. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.
How do I install Code Block?
Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.
What is Code Block built with?
Code Block is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Code Block?
Common uses include AI coding agents, Code review tools, and Developer docs. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Code Block with AI?
Yes. Open "Remix with AI" on this page to read the setup and the constants Code Block is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact component, install it with the one-command CLI.

Featured in collections

Framer Motion Components for React

More like this

Diff Review

Diff Review

Review an agent's proposed code edits change by change: read the reason, keep or discard each one, then apply only what you kept.

Permission Request

Permission Request

A permission card where an agent asks for access and you allow it once, for this chat or always for a pattern, then revoke it from the receipt.

Agent Status

Agent Status

A status pill that says what the agent is doing, whose move it is, time and cost, and opens to the step history and token bill.