AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Outputs

Smart Code Blocks

Make fenced code interactive: copy, run, apply, language label, and sometimes diff or open-in-editor. Generated code should be actionable, not inert text.

Interactive demo

Add a typed sum helper.
Here is a small util you can drop into the project:
src/utils/math.ts
export function sum(a: number, b: number) {
  return a + b;
}

Overview

How might we design smart code blocks so people can trust and act on AI output?

When to use

  • Essential for AI-powered development environments, code generation tools, and technical documentation platforms where code snippets need immediate execution or integration.

When to skip

  • Non-code products where fenced blocks are rare.
  • Secure environments that must forbid run-from-chat.
  • Tiny mobile views where run controls would dominate the answer.

Rules

  • Code fences with no copy button.

  • Run that executes without sandbox or confirmation.

  • Apply-to-file that skips a diff review.

  • Wrong language labels that break highlighting and tooling.

Evidence

ProductImplementation
CursorApply and diff flows from chat code blocks into the repo.
ChatGPTCopy, canvas, and code execution affordances on blocks.
ClaudeArtifacts and copy actions for generated code.
ReplitRunnable snippets tied to the project environment.

Real-world examples

See all

FAQ

What makes a code block “smart”?

Beyond syntax highlighting: copy, language tag, optional run or apply, and clear file targeting when writing into a project.

Should every block be runnable?

No. Offer run only when a sandbox exists. Prefer apply-with-diff for repo edits.

How does this relate to chat artifacts?

Artifacts open durable side panels for docs or apps. Smart code blocks upgrade in-message fences; both can coexist.

What is the minimum viable code block UX?

Correct language label, one-click copy, and monospace readability. Add apply/run when your product can do them safely.