AXIS
Agentic UI/ContextPanel

ContextPanel

AI 대화의 컨텍스트 정보(모델, 프롬프트, 파일, 설정)를 표시하는 접이식 패널입니다.

Installation

bash
npx axis-cli add context-panel --agentic

Interactive Demo

패널 헤더를 클릭하여 접기/펼치기를 시도해 보세요.

📋

컨텍스트

Claude 3.5 Sonnet
▼
모델 정보

이름: Claude 3.5 Sonnet

제공자: Anthropic

버전: 2024-10

시스템 프롬프트
당신은 소프트웨어 아키텍트입니다. 코드 리뷰와 설계 조언을 제공합니다.
첨부 파일 (3개)
  • 📎architecture.md
  • 📎diagram.png
  • 📎requirements.pdf
설정
temperature: 0.3
maxTokens: 8192
topP: 0.9

Variants

Collapsible (기본)

📋

컨텍스트

GPT-4o
▼

Non-collapsible

📋

컨텍스트

GPT-4o
모델 정보

이름: GPT-4o

제공자: OpenAI

시스템 프롬프트
간결하게 답변하세요.

Usage

tsx
import { ContextPanel } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <ContextPanel
      modelInfo={{ name: 'GPT-4o', provider: 'OpenAI', version: '2024-05' }}
      systemPrompt="당신은 유능한 AI 어시스턴트입니다."
      attachedFiles={['data.csv', 'report.pdf']}
      settings={{ temperature: '0.7', maxTokens: '4096' }}
    />
  )
}

Props

modelInfo
Type:ModelInfo
Default:-

모델 정보 객체

systemPrompt
Type:string
Default:-

시스템 프롬프트

attachedFiles
Type:string[]
Default:-

첨부 파일 경로 배열

settings
Type:Record<string, string>
Default:-

설정 키-값 쌍

collapsible
Type:boolean
Default:true

접기/펼치기 가능 여부

defaultExpanded
Type:boolean
Default:false

기본 펼침 상태

className
Type:string
Default:-

추가 CSS 클래스

ModelInfo Type

nameRequired
Type:string

모델 이름

provider
Type:string
Default:-

모델 제공자

version
Type:string
Default:-

모델 버전