AI Code Elements
Vercel releases a set of UI components for building AI-powered IDEs and coding agents, including tools for displaying code blocks, file trees, commit details, environment variables, and API schemas.
Today we're releasing a brand new set of components designed to help you build the next generation of IDEs, coding apps and background agents. A composable component for displaying an AI SDK configuration with model, instructions, tools, and output schema.ToolLoopAgent Building on what we've learned from , we massively improved the code block component with support for a header, icon, filename, multiple languages and a more performant renderer.Streamdown The Commit component displays commit details including hash, message, author, timestamp, and changed files. The EnvironmentVariables component displays environment variables with value masking, visibility toggle, and copy functionality.
The FileTree component displays a hierarchical file system structure with expandable folders and file selection. The PackageInfo component displays package dependency information including version changes and change type badges. The Sandbox component provides a structured way to display AI-generated code alongside its execution output in chat conversations. It features a collapsible container with status indicators and tabbed navigation between code and output views. The SchemaDisplay component…
- vercel.comAI Code Elementsprimary