# AI Code Elements
**Published:** January 21, 2026 | **Authors:** Hayden Bleasel
---
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.
## [](https://ai-sdk.dev/elements/components/agent)
A composable component for displaying an AI SDK [ToolLoopAgent](https://ai-sdk.dev/docs/agents/overview) configuration with model, instructions, tools, and output schema.
```bash
npx ai-elements add agent
```
## [](https://ai-sdk.dev/elements/components/code-block)
Building on what we've learned from [Streamdown](https://streamdown.ai/), we massively improved the code block component with support for a header, icon, filename, multiple languages and a more performant renderer.
```bash
npx ai-elements add code-block
```
## [](https://ai-sdk.dev/elements/components/commit)
The Commit component displays commit details including hash, message, author, timestamp, and changed files.
```bash
npx ai-elements add commit
```
## [](https://ai-sdk.dev/elements/components/environment-variables)
The EnvironmentVariables component displays environment variables with value masking, visibility toggle, and copy functionality.
```bash
npx ai-elements add environment-variables
```
## [](https://ai-sdk.dev/elements/components/file-tree)
The FileTree component displays a hierarchical file system structure with expandable folders and file selection.
```bash
npx ai-elements add file-tree
```
## [](https://ai-sdk.dev/elements/components/package-info)
The PackageInfo component displays package dependency information including version changes and change type badges.
```bash
npx ai-elements add package-info
```
## [](https://ai-sdk.dev/elements/components/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.
```bash
npx ai-elements add sandbox
```
## [](https://ai-sdk.dev/elements/components/schema-display)
The SchemaDisplay component visualizes REST API endpoints with HTTP methods, paths, parameters, and request/response schemas.
```bash
npx ai-elements add schema-display
```
## [](https://ai-sdk.dev/elements/components/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.
```bash
npx ai-elements add snippet
```
## [](https://ai-sdk.dev/elements/components/stack-trace)
The StackTrace component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.
```bash
npx ai-elements add stack-trace
```
## [](https://ai-sdk.dev/elements/components/terminal)
The Terminal component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
```bash
npx ai-elements add terminal
```
## [](https://ai-sdk.dev/elements/components/test-results)
The TestResults component displays test suite results (like Vitest) including summary statistics, progress, individual tests, and error details.
```bash
npx ai-elements add test-results
```
## [Bonus: ](https://ai-sdk.dev/elements/components/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.
```bash
npx ai-elements add attachments
```
---
📚 **More updates:** [View all changelog entries](/changelog/sitemap.md) | [Blog](/blog/sitemap.md)