다크 모드
Installation
위젯 SDK를 설치하는 방법을 안내합니다.
script 태그로 설치 (권장)
가장 간단한 방법은 <script> 태그로 SDK를 로드하는 것입니다.
html
<script src="https://sdk.turacocloud.com/msap-ai-chat.min.js"></script>사내/폐쇄망 배포
공개 CDN 대신 SDK 번들을 사내 nginx로 직접 호스팅할 수 있습니다. 이 경우 위 주소를 자체 호스트로 바꾸고, 위젯 iframe origin도 함께 지정해야 합니다. 사설 네트워크 / 내부 호스팅 문서를 참고하세요.
번들 포맷
빌드 산출물은 세 가지 포맷으로 제공되며, 같은 디렉터리에서 서빙됩니다.
| 파일 | 포맷 | 용도 |
|---|---|---|
msap-ai-chat.min.js | IIFE | <script> 태그 (전역 MSAPChat 노출) |
msap-ai-chat.esm.js | ES Module | import / <script type="module"> |
msap-ai-chat.js | UMD | 번들러 / AMD 환경 |
ES Module로 로드하려면:
html
<script type="module">
import MSAPChat from 'https://sdk.turacocloud.com/msap-ai-chat.esm.js';
MSAPChat.init({ applicationKey: 'your-key' });
</script>TypeScript 타입
타입 정의(msap-ai-chat.d.ts)가 JavaScript 번들과 함께 서빙됩니다. <script> 태그만 추가해서는 TypeScript가 이 타입을 자동으로 찾지 못하므로, 타입 파일을 애플리케이션 소스에 복사해 사용하세요.
- SDK를 호스팅하는 경로의
msap-ai-chat.d.ts를src/types/msap-ai-chat.d.ts로 복사합니다. tsconfig.json의include에src가 포함되어 있는지 확인합니다. 일반적인 React, Vue, Angular 프로젝트의 기본 설정에서는 별도 변경이 필요하지 않습니다.
typescript
const options: MSAPChat.Options = {
applicationKey: 'your-key',
};
const widget: MSAPChat.Instance | undefined = window.MSAPChat?.init(options);타입 파일에는 window.MSAPChat 전역 선언과 MSAPChat 타입 네임스페이스가 포함되어 있으므로 애플리케이션 코드에서 별도의 타입 import가 필요하지 않습니다. SDK 런타임은 계속 <script> 태그로 로드됩니다.
npm 패키지
현재 SDK는 npm에 배포되지 않습니다. 따라서 from 'msap-chat-sdk' 형태로 가져올 수 없으며, script 태그 / 자체 호스팅 방식과 로컬 타입 파일을 함께 사용해야 합니다.
다음 단계
- Initialization - 초기화 방법
- Options - 설정 옵션
- 사설 네트워크 / 내부 호스팅 - 내부망 배포