Ant Design X: 모델 통합 및 데이터 흐름 관리를 지원하여 AI 채팅 인터페이스를 빠르게 구축할 수 있는 툴킷입니다.

12.3K 00

일반 소개

Ant Design X는 개발자가 AI 기반 대화 인터페이스를 빠르게 구축할 수 있도록 설계된 Ant Group의 오픈소스 툴킷입니다. 풍부한 구성 요소와 템플릿 세트를 제공하고 OpenAI 표준과 호환되는 모델 통합을 지원하며 지능형 고객 서비스 및 AI 어시스턴트와 같은 다양한 애플리케이션 시나리오에 적합합니다. 개발자는 Ant Design X를 사용하여 개인화된 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

소개

브라우저에 스크립트 및 링크 태그를 추가하고 전역 변수를 사용합니다. antdnpm 패키지의 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;