Developer Guide

Installation Guide

Add an AI agent to your website with 3 lines of code.
Works the same way in any framework.

Insert Script Tag

Add it inside the '<'body'>' tag of your HTML.

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 with the Publishable Key issued from your dashboard.

The first <script> is queue initialization. If MyAppClaw() calls are made before the widget loads asynchronously, they are queued.

User IdentificationOptional

To identify logged-in users in the widget, call identifyat the authentication point in your host app. Without calling it, the widget operates in anonymous mode.

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>
}

identifyis called on login, resetis called on logout. Without calling either, the widget operates in anonymous mode.

Customization

Configure everything about the widget from the dashboard.

MyAppClaw Dashboard

Manage theme colors, branding text, quick actions, personas, characters, LLM settings, and connectors (API integrations) in one place.

TypeScript Support

Add type declarations for autocomplete and type checking.

global.d.ts

typescript

// global.d.ts (create at project root)
export {}

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

Or install the npm install @myappclaw/types package to apply types without a separate file.

Having trouble with installation? Support can help.