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 ToolLoopAgent configuration with model, instructions, tools, and output schema.
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.
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.
Read more
Continue reading...
<Agent />
A composable component for displaying an AI SDK ToolLoopAgent configuration with model, instructions, tools, and output schema.
<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.
<Commit />
The Commit component displays commit details including hash, message, author, timestamp, and changed files.
<EnvironmentVariables />
The EnvironmentVariables component displays environment variables with value masking, visibility toggle, and copy functionality.
<FileTree />
The FileTree component displays a hierarchical file system structure with expandable folders and file selection.
<PackageInfo />
The PackageInfo component displays package dependency information including version changes and change type badges.
<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.
<SchemaDisplay />
The SchemaDisplay component visualizes REST API endpoints with HTTP methods, paths, parameters, and request/response schemas.
<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.
<StackTrace />
The StackTrace component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.
<Terminal />
The Terminal component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
<TestResults />
The TestResults component displays test suite results (like Vitest) including summary statistics, progress, individual tests, and error details.
Bonus: <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.
Read more
Continue reading...