Ant Design X: 모델 통합 및 데이터 흐름 관리를 지원하여 AI 채팅 인터페이스를 빠르게 구축할 수 있는 툴킷입니다.
일반 소개
Ant Design X는 개발자가 AI 기반 대화 인터페이스를 빠르게 구축할 수 있도록 설계된 Ant Group의 오픈소스 툴킷입니다. 풍부한 구성 요소와 템플릿 세트를 제공하고 OpenAI 표준과 호환되는 모델 통합을 지원하며 지능형 고객 서비스 및 AI 어시스턴트와 같은 다양한 애플리케이션 시나리오에 적합합니다. 개발자는 Ant Design X를 사용하여 개인화된 AI 대화 인터페이스를 쉽게 만들고 개발 효율성을 향상시킬 수 있습니다.

데모 주소: https://x.ant.design/docs/playground/independent-cn
기능 목록
- 유연하고 다양한 원자 구성 요소AI 인터페이스는 대부분의 AI 대화 시나리오를 포괄하도록 설계되어 개인화된 AI 상호작용을 빠르게 구축할 수 있습니다.
- 즉시 사용 가능한 모델 통합OpenAI 호환 추론 서비스에 쉽게 연결할 수 있습니다.
- 효율적인 데이터 흐름 관리데이터 흐름을 관리하고 개발 효율성을 개선할 수 있는 강력한 도구를 제공합니다.
- 다양한 템플릿 지원: LUI 애플리케이션 개발을 빠르게 시작할 수 있는 다양한 템플릿을 제공합니다.
- 완전한 타입스크립트 지원유형 적용 범위를 보장하여 개발 환경과 안정성을 개선합니다.
- 고급 테마 사용자 지정다양한 사용 시나리오와 개인화된 요구 사항을 충족할 수 있도록 세분화된 스타일 조정을 지원합니다.
도움말 사용
마운팅
Ant Design X는 npm, yarn 또는 pnpm을 사용하여 설치할 수 있습니다:
npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x
소개
브라우저에 스크립트 및 링크 태그를 추가하고 전역 변수를 사용합니다. antd
npm 패키지의 dist 디렉토리에 이 파일을 제공했습니다. 우리는 antdx.js
및antdx.min.js
노래로 응답 antdx.min.js.map
.
원자 구성 요소 사용
풍부한 상호 작용 패러다임에 기반하여 AI 대화 애플리케이션을 유연하게 구축할 수 있도록 여러 가지 원자 구성 요소를 제공합니다:
- 범용 구성 요소예: 버블, 대화
- 모닝콜 구성 요소예: 환영, 프롬프트.
- 프레젠테이션 구성 요소예: 발신자, 첨부파일, 제안.
- 확인 구성 요소예: ThoughtChain.
다음은 Atom 컴포넌트를 사용하여 간단한 채팅 인터페이스를 만드는 예제입니다:
import React from 'react';
import { Bubble, Sender } from '@ant-design/x';
const messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];
const App = () => (
<div>
<Bubble.List items={messages} />
<Sender />
</div>
);
export default App;
커넥티드 모델 추론 서비스
활용 useXAgent
런타임 도구를 사용하면 OpenAI 호환 모델 추론 서비스에 쉽게 연결할 수 있습니다. 사용 방법은 다음과 같습니다. useXAgent
예시:
import React from 'react';
import { useXAgent, Sender } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
function chatRequest(text) {
agent.request({
messages: [{ content: text, role: 'user' }],
stream: true,
});
}
return <Sender onSubmit={chatRequest} />;
};
export default App;
데이터 흐름의 효율적인 관리
활용 useXChat
AI 대화 애플리케이션에서 데이터 흐름을 쉽게 관리할 수 있는 런타임 도구:
import React from 'react';
import { useXChat, useXAgent } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
const { onRequest, messages } = useXChat({ agent });
return (
<div>
<Bubble.List items={messages} />
<Sender onSubmit={onRequest} />
</div>
);
};
export default App;
모듈식 앤디 사용
@ant-design/x
ES 모듈 트리 흔들기는 기본적으로 지원됩니다.
타입스크립트 지원
@ant-design/x
내장된 타입스크립트 정의를 제공합니다.
비-React 구현
리액트가 아닌 구현도 자유롭게 기여해 주세요!
© 저작권 정책
기사 저작권 AI 공유 서클 모두 무단 복제하지 마세요.
관련 문서
댓글 없음...