AI Code Elements component library released
Vercel released a new set of composable UI components for building IDEs, coding apps, and AI agents. The library includes components for code display, file trees, terminal output, test results, environment variables, and more—all designed to help developers integrate AI capabilities into their applications.
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 visualizes REST API endpoints with HTTP methods, paths, parameters, and request/response schemas.
The Snippet component provides a lightweight way to display terminal commands and short code snippets with copy functionality. Built on top of shadcn/ui InputGroup, it's designed for brief code references in text.
The StackTrace component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.
The Terminal component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
The TestResults component displays test suite results (like Vitest) including summary statistics, progress, individual tests, and error details.
Not code related, but since attachment were being used in Message, PromptInput and more, we broke it out into its own component - a flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
<Agent />
<CodeBlock />
<Commit />
<EnvironmentVariables />
<FileTree />
<PackageInfo />
<Sandbox />
<SchemaDisplay />
<Snippet />
<StackTrace />
<Terminal />
<TestResults />
Bonus: <Attachments />
Source: original entry ↗
More from Vercel
Follow Vercel to get its new changes in your feed and email digest.
OpenAI Decisions API now available on AI Gateway
OpenAI's Decisions API is now accessible through Vercel's AI Gateway with an OpenAI-compatible endpoint, enabling decision models to answer typed questions and return probabilities, choices, and scores for routing, triage, and guardrails use cases. Support is available across the OpenAI SDK, AI SDK, HTTP API, and CLI with the latest versions.
Timestamp attributes now supported in Vercel Flags
Vercel Flags now supports timestamp attributes for entities, allowing you to create time-based targeting rules. Use this feature to run limited-time campaigns, show content between specific dates, or target users based on registration date.
Glyph Cluster now available in stealth on AI Gateway
Glyph Cluster, a reasoning model for coding and long-context analysis, is now available as a stealth model on Vercel's AI Gateway for Pro and Enterprise plan teams with purchased AI Gateway credits at no cost during the stealth period. The model supports function calling, streams responses, and can be accessed via AI SDK, OpenAI-compatible APIs, and coding agents.