Ant Design X: Ant Group의 AI 챗봇 UI 구축 오픈소스 툴킷
Ant Design X는 앤트그룹(Ant Group)에서 오픈소스로 공개한 ai 채팅 인터페이스를 빠르게 구축할 수 있는 툴킷으로, ChatGPT와 유사한 대화 인터페이스를 빠르게 만들 수 있습니다. Ant Design X는 AI 모델을 손쉽게 연동할 수 있으며, 코드를 처음부터 작성할 필요 없이 미리 완성된 인터페이스 디자인을 그대로 활용하면 됩니다. 스타일 커스터마이징도 지원하며, Ant Design X는 스마트 고객 서비스 시스템, AI 어시스턴트, 스마트 질의응답 시스템 등 AI와 대화가 필요한 다양한 애플리케이션 시나리오에서 사용됩니다. 풍부한 컴포넌트와 디자인 패턴을 제공함으로써 개발자는美观하고 스마트한 사용자 인터페이스를 빠르게 개발할 수 있습니다.

Ant Design X 특성:
엔터프라이즈급 AI 제품의 베스트 프랙티스에서 비롯됨:RICH 인터랙션 패러다임을 기반으로 탁월한 AI 인터랙션 경험 제공
유연하고 다양한 원자(atomic) 컴포넌트:대부분의 AI 대화 시나리오를 커버하여 개성 있는 AI 인터랙션 페이지의 빠른 구축을 지원
즉시 사용 가능한 모델 연동 능력:OpenAI 표준을 준수하는 모델 추론 서비스를 손쉽게 연동
효율적인 대화 데이터 흐름 관리:사용하기 편한 데이터 흐름 관리 기능을 제공하여 개발 효율성 향상
풍부한 템플릿 지원:다양한 템플릿을 제공하여 LUI 애플리케이션 개발을 빠르게 시작
TypeScript 완전 커버리지:TypeScript로 개발되어 완전한 타입 지원을 제공하며, 개발 경험과 안정성 향상
깊이 있는 테마 커스터마이징 능력:세밀한 스타일 조정을 지원하여 다양한 시나리오의 개성화된 요구사항 충족
Ant Design X 설치 및 사용
Ant Design X를 설치하려면 npm 명령어를 사용할 수 있습니다: npm install @ant-design/x --save
브라우저에서 사용할 때는 script 및 link 태그를 추가하여 도입하고, 전역 변수 antd를 사용할 수 있습니다.

Ant Design X 컴포넌트
Bubble:메시지 버블은 채팅을 위한 버블 컴포넌트입니다.
Conversations:세션 관리는 여러 세션을 관리하고 과거 세션 목록을 확인해야 할 때 사용됩니다.
Welcome:환영 인터페이스는 사용자에게 구현 가능한 의도 범위와 예상 기능을 명확히 전달합니다.
Prompts:프롬프트 세트는 현재 컨텍스트와 관련된 미리 정의된 질문이나 제안을 표시하는 데 사용됩니다.
Sender:송신 박스는 대화 시나리오의 입력 박스를 구성해야 할 때 사용됩니다.
Attachment:첨부 파일은 일련의 첨부 파일 정보 집합을 표시해야 하는 시나리오에 사용됩니다.
Suggestion:빠른 명령은 대화 시나리오의 입력 박스를 구성하고 사용자에게 빠른 힌트를 제공하는 컴포넌트입니다.
ThoughtChain:사고 사슬은 복잡한 Agent System에서 호출 사슬을 디버그하고 추적하는 데 사용됩니다.
Ant Design X는 React 생태계에 특화된 첨단 AI 컴포넌트 라이브러리로, 인공지능 통합 개발 과정을 간소화하는 것을 목표로 합니다. UI 컴포넌트 라이브러리에는高度하게 커스터마이징된 AI 컴포넌트가 포함되어 있어, 개발자는 대화형 AI를 자신의 애플리케이션에 손쉽게 통합할 수 있습니다. 풍부한 UI 컴포넌트 외에도 Ant Design X는 일괄적인 API 솔루션을 제공하며, 개발자는 토큰 인증을 통해 기존 AI 서비스에 직접 연동하여 AI와의 대화 및 상호작용을 매끄럽게 이어갈 수 있습니다. 스마트 채팅 애플리케이션을 구축하거나, 사용자 인터랙션 경험을 향상시키거나, AI 기능 통합을 가속화하는 데 있어 Ant Design X는 React 개발자가 AI 세계로 진입하기 위한 이상적인 파트너입니다.
Ant Design X Github:https://github.com/ant-design/x
Ant Design X 데모:https://x.ant.design/docs/playground/independent-cn
대본 기획 도우미▸
AI 앱
AI 뉴스 