개발자 가이드

설치 가이드

3줄의 코드로 AI 에이전트를 웹사이트에 추가하세요.
어떤 프레임워크에서든 동일하게 작동합니다.

스크립트 태그 삽입

HTML의 '<'body'>' 태그 안에 추가합니다.

index.html

html

<!-- MyAppClaw Widget -->
<script>
  window.MyAppClaw = window.MyAppClaw || function() {
    (window.__MYAPPCLAW_Q__ = window.__MYAPPCLAW_Q__ || []).push(arguments);
  };
</script>
<script
  src="https://cdn.myappclaw.com/widget/loader.js"
  data-api-key="YOUR_PUBLISHABLE_KEY"
  defer>
</script>

YOUR_PUBLISHABLE_KEY를 대시보드에서 발급받은 Publishable Key로 교체하세요.

첫 번째 <script> 는 큐 초기화입니다. 위젯이 비동기로 로드되기 전에 MyAppClaw() 호출이 발생해도 큐에 보관합니다.

사용자 식별선택

로그인 사용자를 위젯에서 식별하려면, 호스트앱의 인증 시점에 identify를 호출합니다. 호출하지 않으면 익명(anonymous) 모드로 동작합니다.

App.tsx

typescript

import { useEffect } from 'react'
import { supabase } from './lib/supabase'

function App() {
  useEffect(() => {
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        if (session?.access_token) {
          MyAppClaw('identify', { token: session.access_token })
        } else {
          MyAppClaw('reset')
        }
      }
    )
    return () => subscription.unsubscribe()
  }, [])

  return <div>...</div>
}

identify는 로그인 시, reset은 로그아웃 시 호출합니다. 호출하지 않으면 익명(anonymous) 모드로 동작합니다.

커스터마이제이션

대시보드에서 위젯의 모든 것을 설정합니다.

MyAppClaw 대시보드

테마 색상, 브랜딩 텍스트, 퀵 액션, 페르소나, 캐릭터, LLM 설정, 커넥터(API 연동)를 한 곳에서 관리합니다.

TypeScript 지원

타입 선언을 추가하면 자동완성과 타입 검사를 사용할 수 있습니다.

global.d.ts

typescript

// global.d.ts (프로젝트 루트에 생성)
export {}

declare global {
  interface MyAppClawFunction {
    (command: 'identify', data: { token: string }): void
    (command: 'reset'): void
    (command: string, data?: Record<string, unknown>): void
  }
  const MyAppClaw: MyAppClawFunction
}

또는 npm install @myappclaw/types 패키지를 설치하면 별도 파일 없이 타입이 적용됩니다.

설치에 문제가 있으신가요? 고객지원에서 도움을 받으세요.