AI Code Elements

오늘 우리는 차세대 IDE, 코딩 앱 및 백그라운드 에이전트를 구축하는 데 도움을 주기 위해 설계된 완전히 새로운 컴포넌트 세트를 출시합니다. 모델, 지시사항, 도구, 출력 스키마를 표시하기 위한 AI SDK 구성을 보여주는 합성 가능한 컴포넌트입니다.

ToolLoopAgent
우리가 배운 것들을 바탕으로 코드 블록 컴포넌트를 대폭 개선하여 헤더, 아이콘, 파일명, 여러 언어 지원 및 더 성능이 좋은 렌더러를 추가했습니다.

Streamdown
Commit 컴포넌트는 해시, 메시지, 작성자, 타임스탬프, 변경된 파일 등을 포함한 커밋 세부 정보를 표시합니다. EnvironmentVariables 컴포넌트는 값 마스킹, 가시성 토글, 복사 기능을 갖춘 환경 변수를 표시합니다. FileTree 컴포넌트는 확장 가능한 폴더와 파일 선택을 가진 계층적 파일 시스템 구조를 표시합니다. PackageInfo 컴포넌트는 버전 변경 및 변경 유형 배지 등을 포함한 패키지 의존성 정보를 표시합니다.

Sandbox 컴포넌트는 채팅 대화에서 AI 생성 코드와 그 실행 출력을 함께 표시하는 구조화된 방법을 제공합니다. 상태 표시기 및 코드와 출력 뷰 간의 탭 네비게이션을 갖춘 확장 가능한 컨테이너를 특징으로 합니다.

SchemaDisplay 컴포넌트는 HTTP 메서드, 경로, 매개변수, 요청/응답 스키마를 포함한 REST API 엔드포인트를 시각화합니다.

Snippet 컴포넌트는 복사 기능을 갖춘 터미널 명령어 및 짧은 코드 스니펫을 표시하는 경량화된 방법을 제공합니다. shadcn/ui InputGroup 위에 구축되어 텍스트 내의 간략한 코드 참조용으로 설계되었습니다.

StackTrace 컴포넌트는 클릭 가능한 파일 경로, 내부 프레임 어둡게 처리, 확장 가능한 콘텐츠를 갖춘 포맷된 JavaScript/Node.js 오류 스택 추적을 표시합니다.

Terminal 컴포넌트는 ANSI 색상 지원, 스트리밍 표시기, 자동 스크롤 기능을 갖춘 콘솔 출력을 표시합니다.

TestResults 컴포넌트는 Vitest와 같은 테스트 스위트 결과를 포함하여 요약 통계, 진행 상황, 개별 테스트, 오류 세부 정보를 표시합니다.

코드와 관련은 없지만, 첨부 파일이 Message, PromptInput 등에서 사용되므로 이를 자체 컴포넌트로 분리했습니다. 파일, 이미지, 비디오, 오디오 및 소스 문서를 표시하는 유연한 합성 가능한 첨부 파일 컴포넌트입니다.

자세히 보기 <Agent /> <CodeBlock /> <Commit /> <EnvironmentVariables /> <FileTree /> <PackageInfo /> <Sandbox /> <SchemaDisplay /> <Snippet /> <StackTrace /> <Terminal /> <TestResults />

보너스: <Attachments />