Overview
How might we design smart code blocks so people can trust and act on AI output?
When this pattern fits
- Essential for AI-powered development environments, code generation tools, and technical documentation platforms where code snippets need immediate execution or integration.
When to skip or lighten it
- 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.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
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.
How products use it
| Product | Implementation |
|---|---|
| Cursor | Apply and diff flows from chat code blocks into the repo. |
| ChatGPT | Copy, canvas, and code execution affordances on blocks. |
| Claude | Artifacts and copy actions for generated code. |
| Replit | Runnable snippets tied to the project environment. |
Real-world examples
How shipped products implement smart code blocks, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Smart Code Blocks" AI interface design pattern.
Pattern Definition:Frequently asked questions
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.