AI Code Elements

Vercel has released a set of new AI Elements components for building IDEs, coding apps, and background agents. Alongside them, the existing CodeBlock component has been rebuilt, drawing on lessons from Streamdown, with a header, icon, filename support, multiple languages, and a more performant renderer.

• Agent: displays an AI SDK ToolLoopAgent configuration, including model, instructions, tools, and output schema.
• Commit: shows commit hash, message, author, timestamp, and changed files.
• EnvironmentVariables: displays environment variables with value masking, a visibility toggle, and copy functionality.
• FileTree: renders a hierarchical file structure with expandable folders and file selection.
• PackageInfo: shows package dependency information, including version changes and change type badges.
• Sandbox: pairs AI-generated code with its execution output in a collapsible container with status indicators and tabbed views.
• SchemaDisplay: visualizes REST API endpoints with HTTP methods, paths, parameters, and request and response schemas.
• Snippet: shows terminal commands and short code snippets with copy functionality, built on shadcn/ui's InputGroup.
• StackTrace: displays formatted JavaScript/Node.js error stack traces with clickable file paths and collapsible content.
• Terminal: displays console output with ANSI color support.

Vercel

The platform for frontend developers — deploy, preview, and scale web apps and AI agents with zero config.

View Vercel →

Original source