Features Architecture Roadmap Docs
Beta testing

Your users shouldn't
all see the same interface

Kuttl is an AI-powered UI customization layer. One FAB, one prompt, and your users can reshape any web application to fit exactly how they think — without touching the codebase

↓ Watch it in action
app.yourproduct.com — powered by Kuttl
✦
✦ "Make this look like a task list"
See a demo →
The Problem

Softwares ship one interface.
Users have a million different needs.

Netflix, Gmail, Notion... every user in the world sees the same layout. Enterprise companies pay engineers hundreds of thousands of dollars to customize interfaces per client. We're giving that power to every user.

How It Works

One layer between your code
and the DOM

Kuttl intercepts at the right layer for each framework — sitting between source and render so changes are instant, persistent, and reversible.

01

Install the SDK

Drop in a single script tag or npm package. Works without modifying your existing codebase.

02

The FAB appears on your app

A floating action button surfaces in your UI. Fully styled to match your brand — or fully customizable.

03

User types a prompt

Natural language: "Make this sidebar smaller", "Give me a calendar view", "Dark mode with more contrast."

04

Kuttl rewrites the interface

The AI agent rewrites DOM structure, styles, and component logic in real-time. Changes persist across sessions.

html — vanilla install 
<script
  src="https://cdn.kuttl.dev/v1.js"
  data-key="pk_your_key"
></script>

// That's it. Kuttl injects automatically.
npm — react install 
npm install @kuttl/react

// In your root component:
import { KuttlProvider } from '@kuttl/react'

export default App() {
  return (
    <KuttlProvider apiKey="pk_...">
      <YourApp />
    </KuttlProvider>
  )
}
Architecture

Deep framework integration,
not a chrome extension

We intercept at the right layer. For Vanilla JS, we sit between your code and the DOM. For React, we hook into the runtime. This gives us full control without source code access.

User
Natural Language Prompt
↓
Kuttl AI
Intent Parser
DOM Analyser
Change Planner
↓
Adapters
Vanilla JS
React Runtime
Vue (soon)
Astro (soon)
↓
Output
DOM Mutation
Style Injection
Persistence Layer
Features

Everything you need to ship
adaptive interfaces

Real-time DOM Interception

We intercept DOM operations at the lowest level, applying user transformations before paint. Zero flicker, zero jank.

AI Change Planner

Our intent parser understands structural intent — not just CSS. "Make this a calendar" triggers component-level rewiring.

Persistent Sessions

Changes survive page reloads, browser restarts, and device switches. Every user's interface is remembered.

React Runtime Hooks

For React apps, we hook into the fiber reconciler — not the DOM. This means we can modify component props, state, and structure.

Brand-matched FAB

The floating action button adapts to your design system. Custom colors, positioning, and trigger behavior via config.

Primitive Exports

Ship your own design primitives that users can compose. Define what can and can't be changed at the component level.

Permission Scoping

Define which DOM regions are modifiable. Lock pricing tables, legal text, or critical UI while freeing everything else. Soon

Transformation Analytics

See which UI changes your users make most. Use that signal to inform your next product sprint. Soon

Team Sharing

Users can share their UI configurations with teammates. One person customizes, everyone benefits. Soon

"In the future, software companies will ship shared primitives with the full intention that users will heavily modify the final interfaces" — Y combinator

We are building that future today

Roadmap

Where we're going — fast

We move at startup speed. Here's what's shipped and what's coming next.

✓ Shipped

Vanilla JS Interception Layer

Full DOM interception for plain HTML/JS projects. Persistent sessions via localStorage.

vanilla-js dom persistence
✓ Shipped

React Runtime Integration

Hooks into the React fiber reconciler. Modifies component props and structure above the DOM level.

react fiber reconciler
In Progress

Vue.js & Astro Adapters

Extending the adapter pattern to Vue's reactivity system and Astro's island architecture.

vuejs astro adapters
Q3 2026

Cloud Persistence & Sync

User UI preferences sync across devices and browsers via Kuttl's persistence API.

cloud sync
Q3 2026

Transformation Analytics Dashboard

Real-time visibility into how your users are customizing your interface — your next product roadmap, written by your users.

analytics insights
Q4 2026

Permission Scoping API

Define exact DOM regions that are modifiable. Ship your primitives with intent, not accidents.

permissions api
Q4 2026

Kuttl Marketplace

A library of community-built transformation templates. Install a "Kanban view" for any task list with one click.

marketplace templates community
2026

Middleware Modifications

Beyond the frontend — enabling AI to restructure data queries and API calls, not just visual elements.

middleware api-layer

The future of software is personal.
Build it with us.

We're accepting early access partners who want to give their users the power to reshape their own experience.

Read the Docs →
Getting Started
Overview Quick Start Core Concepts
Frameworks
Vanilla HTML / JS React Vue.js (coming soon) Astro (coming soon)

Kuttl Documentation

Kuttl is an AI-powered UI customization layer that lets your users reshape the interface of any web application through natural language prompts — without touching your codebase.

What is Kuttl?

Kuttl adds a floating action button (FAB) to your web application. When a user clicks it and types a prompt like "make the sidebar smaller" or "show this as a calendar," Kuttl's AI engine parses the intent and applies real-time, persistent transformations to the interface.

It currently works with Vanilla HTML/JS and React, with Vue.js, Astro, Next.js, and Svelte adapters in development.

Choose Your Framework

Select the guide that matches your project:

📄

Vanilla HTML / JS →

No build step required. Script tag install.

⚛️

React →

npm package. Provider component. Fiber hooks.

Vanilla HTML / JavaScript

The fastest way to get started. Add one script tag — Kuttl injects the FAB and intercepts DOM operations automatically.

Installation

Add the Kuttl script to your HTML file, just before the closing </body> tag:

html 
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- Your existing HTML -->
  <script
    src="https://cdn.kuttl.dev/v1.js"
    data-key="pk_live_your_key_here"
    data-fab-position="bottom-right"
  ></script>
</body>
</html>

Configuration Options

html 
<script>
  Kuttl.init({
  root: document.getElementById("page"),
  persistKey: "maison-voss",
  });
</script>

Setup

js — main.jsx 
        return React.createElement(KuttlProvider, {
          persistKey: "maison-voss-react",
        },
          React.createElement("div", { "data-uid": "page" }),
          // Drop the Kuttl panel in — it reads from context automatically
          React.createElement(KuttlPanel, {
            defaultProvider: "anthropic",
          })
        );

Other Frameworks

We're actively building adapters for Vue.js, Astro, Next.js, Svelte, and more.

🚧

Coming Soon

Vue.js and Astro adapters are currently in development.

Permission Scoping

Define which parts of your application users can and cannot modify.

Permission Scoping — Coming Soon

Lock pricing tables, legal text, and critical UI while freeing everything else. Available Q3 2026.

Persistence

Kuttl stores user transformations so they persist across sessions, devices, and browsers.

Local Persistence (Default)

By default, transformations are stored in the user's browser via localStorage. This requires no configuration and works on all plans.

Cloud Persistence (Pro+)

With cloud persistence, transformations are stored in Kuttl's backend and tied to a userId. This enables cross-device sync.

html 
<script
  src="https://cdn.kuttl.dev/v1.js"
  data-key="pk_live_..."
  data-user-id="{{ current_user.id }}"
  data-persist="cloud"
></script>

Core Concepts

Understanding the mental model behind Kuttl.

Transformation Sessions

A session is the complete set of UI transformations a user has applied. Sessions are tied to a userId (if provided) or fingerprinted to the browser.

Intercept Layers

Kuttl intercepts at the highest appropriate level for each framework — not at the network layer, not in a browser extension, but in the rendering pipeline itself.

The FAB

The FAB is the user's entry point into Kuttl. Everything about it is configurable — you can also trigger Kuttl programmatically without the FAB if you want to build your own UI.

Quick Start

Get Kuttl running in under 5 minutes.

Step 1: Install for your framework

Step 2: Open your app

Load your app in the browser. You should see the Kuttl FAB (✦ icon) in the bottom-right corner. Click it, type a prompt, and watch your interface transform.

ℹ First prompt ideas

Try: "Make the sidebar narrower", "Use a dark color scheme", "Show this as a table instead of cards", "Make the font larger"