KuttlFree Plan

MAIN MENU

ACCOUNT

Quick Start Guide

Getting Started in 3 Steps

1

Add a Website

Go to the Websites section and add your website URL to get a unique tracking key.

2

Install Kuttl

For a plain website, add the widget script with your unique website key just before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/@kuttl/js/dist/kuttl-widget.iife.js" data-website-key="YOUR_WEBSITE_KEY"></script>

Using React? Install @kuttl/react instead and wrap your app in <KuttlProvider> (see the React example below).

3

Start Customizing

Use the Customizations panel to make AI-powered changes to your website using natural language.

Code Examples

Vanilla HTML / JS

Add Kuttl to any website with a single script tag — no build step

<!-- Add this script tag before the closing </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/@kuttl/js/dist/kuttl-widget.iife.js"
        data-website-key="YOUR_WEBSITE_KEY"></script>

React

Install the adapter, wrap your app, and drop in the panel

npm install @kuttl/react

// App.jsx
import { KuttlProvider, KuttlPanel } from '@kuttl/react'

export default function App() {
  return (
    <KuttlProvider persistKey="my-app">
      <div data-uid="page">{/* your app */}</div>
      <KuttlPanel />
    </KuttlProvider>
  )
}

Take a Snapshot via API

Capture website state programmatically

fetch('https://api.kuttl.xyz/api/v1/snapshots', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://example.com',
    include_styles: true,
    include_scripts: false
  })
})

AI Customization Request

Request website changes using natural language

fetch('https://api.kuttl.xyz/api/prompt', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    prompt: "Make the header blue and increase font size by 20%",
    website_key: "YOUR_WEBSITE_KEY",
    apply_changes: true
  })
})

API Reference

Available Endpoints

GET/api/v1/websites
POST/api/v1/snapshots
POST/api/prompt
GET/api/v1/usage/stats

Authentication

All API requests require authentication using API keys. Get your API key from the API Keys section.

Security: Never expose your API keys in client-side code. Use them only in secure server environments.

Common Use Cases

A/B Testing

Create and deploy multiple website variations to test user engagement and conversion rates.

Brand Updates

Instantly update brand colors, fonts, and styling across all your websites with AI assistance.

Performance Monitoring

Track website performance, user interactions, and optimization opportunities in real-time.

Need Help?

Our documentation covers the most common use cases, but if you need additional support or have specific questions about integrating Kuttl with your workflow, we're here to help.

Contact SupportGet API Keys