AI 代码元素
来源: Vercel News
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.
<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.