2 min read
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
