@tesseron/react

React hooks adapter for Tesseron. Register actions, expose resources, and observe connection state from inside your components — no manual lifecycle wiring. Wraps @tesseron/web.

Install

npm install @tesseron/react

Requires react ≥ 18. You also need the @tesseron/mcp gateway running locally — bundled inside the Claude Code plugin.

Quick start

import { useTesseronAction, useTesseronResource, useTesseronConnection } from '@tesseron/react';
import { z } from 'zod';
import { useState } from 'react';

export function TodoApp() {
  const [todos, setTodos] = useState<{ id: string; text: string; done: boolean }[]>([]);
  const { status, claimCode } = useTesseronConnection({ appId: 'todo_app', appName: 'Todo' });

  useTesseronAction('addTodo', {
    input: z.object({ text: z.string().min(1) }),
    handler: ({ text }) => {
      setTodos((t) => [...t, { id: crypto.randomUUID(), text, done: false }]);
    },
  });

  useTesseronResource('todoStats', {
    read: () => ({ total: todos.length, done: todos.filter((t) => t.done).length }),
  });

  return (
    <>
      {status === 'ready' && <p>Claim code: <code>{claimCode}</code></p>}
      <ul>{todos.map((t) => <li key={t.id}>{t.text}</li>)}</ul>
    </>
  );
}

Every hook tracks its registration with the active Tesseron client and cleans up on unmount. Handlers are held in refs, so closing over fresh state on every render works without re-registering.

Hooks

| Hook | Purpose | |---|---| | useTesseronConnection({ appId, appName }) | Connects (or attaches to) a client, exposes status, claimCode, welcome, and reconnect helpers. | | useTesseronAction(name, options) | Registers an action for the component's lifetime. options mirrors the fluent builder (input, output, annotations, timeoutMs, strictOutput, handler). | | useTesseronResource(name, options) | Registers a readable and/or subscribable resource. Pass read, subscribe, or both. |

Pair with @tesseron/web

@tesseron/react re-exports the public surface of @tesseron/web, so you can mix raw calls (e.g. inside a module-level setup file) with the hooks. See examples/react-todo for a full app.

Docs

| | | |---|---| | Main repo | https://github.com/BrainBlend-AI/tesseron | | SDK reference | https://brainblend-ai.github.io/tesseron/sdk/typescript/react/ | | Protocol spec | https://brainblend-ai.github.io/tesseron/protocol/ | | Example app | https://github.com/BrainBlend-AI/tesseron/tree/main/examples/react-todo |

License

Reference implementation — Business Source License 1.1 (source-available). Each release auto-converts to Apache-2.0 four years after publication.