How to change Chainlit UI component

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, JavaScript 및 React 기반 UI 개발자

난이도: 중급 (패키지 설치 및 코드 수정 경험이 필요)

핵심 요약

• pnpm install 명령어를 통해 chainlit 프로젝트의 의존성 설치
• chainlit/frontend/src/components 경로의 UI 컴포넌트 수정
• pnpm run buildUi 명령어로 변경된 UI 컴포넌트 빌드

섹션별 세부 요약

1. 환경 설정

• chainlit 프로젝트의 루트 디렉토리로 이동
• pnpm install 또는 yarn install 실행 (프로젝트 설정에 따라 선택)
• node_modules 폴더 생성 (의존성 설치 완료)

2. UI 컴포넌트 수정

• chainlit/frontend/src/components 디렉토리 내의 원하는 UI 컴포넌트 파일 열기
• JSX/React 코드 수정 (예: Button.jsx, Card.jsx 등)
• 변경된 코드를 저장

3. UI 빌드 및 적용

• chainlit/backend 디렉토리로 이동
• pnpm run buildUi 명령어 실행 (UI 컴포넌트 빌드)
• 빌드 결과를 기반으로 변경된 UI 적용

결론

• *pnpm install → UI 컴포넌트 수정 → pnpm run buildUi** 순서로 작업해 UI를 변경하고, 변경 사항을 빌드하여 적용해야 합니다.