빠른 시작 가이드
단 몇 분 만에 Moss SDK를 설치하고 실행해 보세요. 이 가이드는 SDK를 설치하고 애플리케이션에서 어시스턴트를 렌더링하는 필수 단계를 안내합니다.
1. SDK 설치하기
선호하는 설치 방법을 선택하세요:
옵션 A: CDN 설치 (React 미사용 앱 권장)
<!-- YOUR_APP_ID를 실제 애플리케이션 ID로 교체하세요 -->
<script src="https://cdn.moss.ai/moss-sdk@latest?applicationId=YOUR_APP_ID"></script>
옵션 B: NPM 설치 (React 앱용)
npm install @principles-first/moss-sdk
2. 설정 (NPM 설치만 해당)
CDN 설치를 사용한 경우 이 단계를 건너뛰세요. SDK가 자동으로 구성되어 사용할 준비가 됩니다.
AgentProvider는 SDK의 심장입니다. 상태를 관리하고 다른 모든 컴포넌트에 컨텍스트를 제공합니다. 애플리케이션의 상위 레벨에서 이를 감싸주세요.
import React from 'react';
import { AgentProvider, FloatingActionBar, MossSDKConfig } from '@principles-first/moss-sdk';
// SDK 설정 정의
const sdkConfig: MossSDKConfig = {
apiUrl: 'YOUR_BACKEND_API_URL',
applicationName: 'YOUR_APP_NAME',
userId: 'CURRENT_USER_ID',
};
function App() {
return (
// AgentProvider로 애플리케이션 감싸기
<AgentProvider config={sdkConfig}>
{/* 애플리케이션 컴포넌트 */}
<h1>My Application</h1>
<p>환영합니다! 이제 Moss 어시스턴트를 사용할 수 있습니다.</p>
{/* 이 컴포넌트는 플로팅 어시스턴트 버튼을 렌더링합니다 */}
<FloatingActionBar />
</AgentProvider>
);
}
export default App;
3. 설정
config prop에 apiUrl, applicationName, userId를 제공해야 합니다.
apiUrl: Moss 백엔드 서비스의 URL입니다.applicationName: 등록한 애플리케이션의 고유 이름입니다.userId: 현재 사용자의 고유 식별자입니다.
이것으로 끝입니다! 이 단계들을 통해 Moss SDK가 통합되었습니다. 플로팅 액션 버튼이 나타나고 사용자는 AI 어시스턴트와 상호 작용을 시작할 수 있습니다. 더 고급 사용자 정의 및 기능에 대해서는 전체 SDK 레퍼런스를 참조하세요.
