SLOP: A protocol for AI to observe and interact with application state

Diego Carlino — Fri, 03 Apr 2026 15:32:38 +0000

AI agents interact with apps through two bad options today:

Screenshots — expensive, lossy, fragile. The AI parses pixels to recover information the app already had in structured form.
Tool calls (MCP, function calling) — the AI can act, but it's flying blind. No awareness of what the user sees or what state the app is in.

I built SLOP (State Layer for Observable Programs) to fix this.

How it works

Apps expose a semantic state tree — structured, meaning-level data about what they currently are. Not pixels. Not DOM elements. Not database rows. Meaning.

An email app doesn't expose <div class="row"> — it exposes messages with subjects, senders, and read status.

AI subscribes to the parts of the tree it cares about and gets pushed incremental updates (JSON Patch). No polling, no redundant full reads.

Contextual actions, not global tools

This is the key difference from MCP.

MCP gives AI a flat list of tools: send_email(), merge_pr(), create_task(). The tools exist whether or not they make sense right now.

SLOP actions live on the nodes they affect. A "reply" action lives on the message it replies to. A "merge" action appears on a PR node — but only when the PR is actually mergeable. Actions come and go as state changes.

The AI always sees exactly what it can do, in context.

What ships

13-doc spec covering state trees, transport (WebSocket, Unix socket, stdio, postMessage), affordances, attention/salience, scaling, and limitations
14 SDK packages — TypeScript (core, client, server, consumer, React, Vue, Solid, Svelte, Angular, TanStack Start), Python, Rust, Go
Chrome extension that connects to any SLOP-enabled app
Desktop app (Tauri) and CLI inspector
Working examples across 4 languages and 5 frontend frameworks

Quick example

Adding SLOP to an app takes a few lines:

import { createSlopServer } from "@slop-ai/server";

const slop = createSlopServer({ id: "my-app", name: "My App" });

// Expose state
slop.register("inbox", {
  type: "collection",
  props: { unread: 3 },
  children: messages.map(m => ({
    id: m.id,
    type: "message",
    props: { subject: m.subject, from: m.from, read: m.read },
    affordances: [
      { id: "reply", label: "Reply", params: { type: "object", properties: { body: { type: "string" } } } },
      ...(m.read ? [] : [{ id: "mark-read", label: "Mark as read" }])
    ]
  }))
});

An AI agent connecting to this sees the inbox, its messages, and exactly which actions are available on each message right now.

Use MCP for general-purpose tools. Use SLOP when AI needs awareness of application state.

Try it

Or find out more

Website: https://slopai.dev
Docs: https://docs.slopai.dev
GitHub: https://github.com/devteapot/slop

All MIT licensed. Feedback welcome — especially on the spec design and whether the contextual affordance model makes sense for how you're building agents.

DEV Community: Diego Carlino

SLOP: A protocol for AI to observe and interact with application state

How it works

Contextual actions, not global tools

What ships

Quick example