# AI Code Elements By Steven Van · 2026-01-21 Vercel adds ten new AI Elements components, plus a rebuilt CodeBlock, for building IDEs, coding tools, and background agents. [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]() Vercel The platform for frontend developers — deploy, preview, and scale web apps and AI agents with zero config. [View Vercel →]() [Original source]() [Read AI Code Elements on Creators Toolbox]() --- Canonical source: https://creatorstoolbox.com/blog/vercel-ai-code-elements