Documentation

Add AI chat to your app in minutes

Quick Start

Get AI chat running on your website in 2 steps:

1

Register your domain

Sign up at /register to whitelist your domain.

2

Add the widget

Paste this before </body>:

<script src="https://sparkbrain.app/chat.js"></script>

That's it! The widget auto-detects your site's favicon and name.

Registration

Before using SparkAI, register your domain to get access:

  1. Go to /register
  2. Enter your email and production domain
  3. Verify your email with the 6-digit code
  4. You're ready to go!

Localhost is automatically allowed for development.

Widget Installation

Add the chat widget to any website with a single script tag:

HTML
<script src="https://sparkbrain.app/chat.js"></script>

The widget will appear as a floating button in the bottom-right corner.

Widget Configuration

Customize the widget with data attributes:

<script
  src="https://sparkbrain.app/chat.js"
  data-primary-color="#6366f1"
  data-title="My App"
  data-subtitle="AI Assistant"
  data-position="bottom-right"
  data-greeting="Hi! How can I help?"
></script>

Options

Attribute Default Description
data-primary-color #74749b Theme color (hex)
data-title Page title Header title
data-subtitle AI Assistant Header subtitle
data-position bottom-right bottom-right or bottom-left
data-greeting Time-based Initial greeting message
data-user-email - User email for context
data-user-name - User display name
data-auto-hide 0 Auto-hide after X seconds (0 = disabled)

Framework Integration

React

import { useEffect } from 'react';

export function ChatWidget({ user }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://sparkbrain.app/chat.js';
    script.async = true;
    if (user?.email) script.dataset.userEmail = user.email;
    if (user?.name) script.dataset.userName = user.name;
    document.body.appendChild(script);
    return () => script.remove();
  }, []);
  return null;
}

Next.js

'use client';
import Script from 'next/script';

export function ChatWidget({ user }) {
  return (
    <Script
      src="https://sparkbrain.app/chat.js"
      strategy="lazyOnload"
      data-user-email={user?.email}
      data-user-name={user?.name}
    />
  );
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({ user: Object });
let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://sparkbrain.app/chat.js';
  if (props.user?.email) script.dataset.userEmail = props.user.email;
  document.body.appendChild(script);
});

onUnmounted(() => script?.remove());
</script>

REST API

For server-side integration, use the chat endpoint directly:

POST https://sparkbrain.app/api/chat

Request Body

{
  "messages": [
    { "role": "user", "content": "Hello!" }
  ],
  "userEmail": "user@example.com",  // optional
  "userName": "John"                 // optional
}

Response

{
  "message": "Hi! How can I help you today?"
}

API Examples

JavaScript (fetch)

const response = await fetch('https://sparkbrain.app/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    messages: [{ role: 'user', content: 'Hello!' }]
  })
});
const data = await response.json();
console.log(data.message);

cURL

curl -X POST https://sparkbrain.app/api/chat \
  -H "Content-Type: application/json" \
  -d '{"messages":[{"role":"user","content":"Hello!"}]}'

Python

import requests

response = requests.post(
    'https://sparkbrain.app/api/chat',
    json={'messages': [{'role': 'user', 'content': 'Hello!'}]}
)
print(response.json()['message'])

Playground

Try the chat widget right here! Click the button in the bottom-right corner.

Customize

Live Preview

The chat widget is active on this page. Try it out!

Rate Limits

Tier Requests/day
Free 25 per domain
Pro 1,000 per domain

Limits reset at midnight UTC.