Quick Start

1

Create an App in the Console

Open the Console and sign in with Google
Go to "Sites" and create a site with your domain
Go to "Apps" and create an app. Choose a type:
- Chatbot — AI conversation
- ImageGen — AI image generation
- VideoGen — AI video generation
After creation, you'll get an appId and appKey

2

Add the SDK to your page

Place this before </body> in your HTML:

<script src="https://sdk.usite.io/sdk.js"></script>
<script>
  SiteSDK.init({
    appId: 'your_app_id',   // Replace with your App ID
    appKey: 'your_app_key',  // Replace with your App Key
  });
</script>

3

Add the required DOM elements

In fullscreen mode (default), the SDK needs a text input and a send button:

<!-- Landing page content -->
<div id="pageContent">
  <h1>My AI Tool</h1>
  <p>Your SEO content here...</p>

  <!-- SDK needs these two elements -->
  <textarea id="heroInput" placeholder="Type your prompt..."></textarea>
  <button id="heroSend">Send</button>
</div>

DOM Elements:

Element	Default Selector	Required
Text input	`#heroInput`	Yes
Send button	`#heroSend`	Yes
Content wrapper	`#pageContent`	No
Example chips	`.example-chip`	No
Login area	`.usdk-login-bar`	No

4

Done! The SDK handles the rest

1.

Fetches app config from the backend (type, model, theme, etc.)

2.

Dynamically loads the right sub-SDK (chatbot.js / imagegen.js / videogen.js)

3.

Takes over the input and button, handles all AI interaction

4.

User types and sends → landing page fades out → fullscreen AI UI appears

Minimal HTML Template

Save this as an HTML file, replace appId and appKey, and it works:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My AI Tool</title>
</head>
<body>
  <div id="pageContent">
    <h1>My AI Tool</h1>
    <p>Your SEO content here...</p>
    <textarea id="heroInput" placeholder="Type your message..." rows="1"></textarea>
    <button id="heroSend">Send</button>
    <button class="example-chip" data-q="Hello World in Python">Hello World</button>
    <div class="usdk-login-bar"></div>
  </div>
  <script src="https://sdk.usite.io/sdk.js"></script>
  <script>
    SiteSDK.init({ appId: 'your_app_id', appKey: 'your_app_key' });
  </script>
</body>
</html>

Supported App Types