Skip to content

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.jsIIFE<script> 태그 (전역 MSAPChat 노출)
msap-ai-chat.esm.jsES Moduleimport / <script type="module">
msap-ai-chat.jsUMD번들러 / 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가 이 타입을 자동으로 찾지 못하므로, 타입 파일을 애플리케이션 소스에 복사해 사용하세요.

  1. SDK를 호스팅하는 경로의 msap-ai-chat.d.tssrc/types/msap-ai-chat.d.ts로 복사합니다.
  2. tsconfig.jsonincludesrc가 포함되어 있는지 확인합니다. 일반적인 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 태그 / 자체 호스팅 방식과 로컬 타입 파일을 함께 사용해야 합니다.

다음 단계