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.

Link to heading<Agent />

A composable component for displaying an AI SDK ToolLoopAgent configuration with model, instructions, tools, and output schema.

npx ai-elements add agent

Link to heading<CodeBlock />

Building on what we've learned from Streamdown, we massively improved the code block component with support for a header, icon, filename, multiple languages and a more performant renderer.

npx ai-elements add code-block

Link to heading<Commit />

The Commit component displays commit details including hash, message, author, timestamp, and changed files.

npx ai-elements add commit

Link to heading<EnvironmentVariables />

The EnvironmentVariables component displays environment variables with value masking, visibility toggle, and copy functionality.

npx ai-elements add environment-variables

Link to heading<FileTree />

The FileTree component displays a hierarchical file system structure with expandable folders and file selection.

npx ai-elements add file-tree

Link to heading<PackageInfo />

The PackageInfo component displays package dependency information including version changes and change type badges.

npx ai-elements add package-info

Link to heading<Sandbox />

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.

npx ai-elements add sandbox

Link to heading<SchemaDisplay />

The SchemaDisplay component visualizes REST API endpoints with HTTP methods, paths, parameters, and request/response schemas.

npx ai-elements add schema-display

Link to heading<Snippet />

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.

npx ai-elements add snippet

Link to heading<StackTrace />

The StackTrace component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.

npx ai-elements add stack-trace

Link to heading<Terminal />

The Terminal component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.

npx ai-elements add terminal

Link to heading<TestResults />

The TestResults component displays test suite results (like Vitest) including summary statistics, progress, individual tests, and error details.

npx ai-elements add test-results

Link to headingBonus: <Attachments />

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.

npx ai-elements add attachments