Skip to content
Tesseron

Quickstart (5 minutes)

Prereqs. Node ≥ 20. Claude Code installed.

  1. Install the Claude Code plugin. It bundles the MCP gateway and auto-registers it as an MCP server.

    /plugin marketplace add BrainBlend-AI/tesseron
    /plugin install tesseron@tesseron

    Restart Claude Code after installation. The gateway now runs whenever the plugin is enabled; no separate process to manage.

  2. Add the SDK to your app.

    Terminal window
    pnpm add @tesseron/web zod
    pnpm add -D @tesseron/vite

  3. Register the Vite plugin (browser apps only). It exposes /@tesseron/ws on the Vite dev server and writes per-tab discovery files the gateway watches.

    vite.config.ts
    import { defineConfig } from 'vite';
    import { tesseron } from '@tesseron/vite';
    

    export default defineConfig({
      plugins: [/* your framework plugin, e.g. vue() or svelte() */, tesseron()],
    });

    Node apps skip this step - @tesseron/server binds and announces automatically.

  4. Declare an app and one action.

    src/main.ts
    import { tesseron } from '@tesseron/web';
    import { z } from 'zod';
    

    tesseron.app({ id: 'notes', name: 'My Notes App' });
    

    tesseron
      .action('createNote')
      .describe('Create a new note with a title and body')
      .input(z.object({
        title: z.string().min(1),
        body: z.string().default(''),
      }))
      .handler(({ title, body }) => {
        const note = { id: crypto.randomUUID(), title, body, createdAt: Date.now() };
        store.add(note);        // whatever "add" means in your app
        return note;
      });
    

    await tesseron.connect();

    In the browser, tesseron.connect() opens a WebSocket to the Vite plugin at <location.origin>/@tesseron/ws, which bridges it to the gateway. In Node, @tesseron/server binds a loopback WS server (or a Unix domain socket if you pass { transport: 'uds' }) and announces itself via ~/.tesseron/instances/; the gateway dials in. Either way, connect() resolves with a welcome that carries the claimCode.

  5. Claim the session from Claude. Open your app - the gateway prints a 6-character claim code to its stderr (and you can surface it in your UI too). Tell Claude:

    "Claim Tesseron session AB3X-7K"

    Claude calls the built-in tesseron__claim_session tool, the gateway marks the session claimed, and a notifications/tools/list_changed event fires.

  6. Call your action. The tool list now contains notes__createNote. Ask Claude:

    "Create a note titled 'Groceries' with body 'eggs, milk, bread'."

    The handler runs inside your tab. The new note appears in your UI, reactively. Claude sees the returned object as the tool result.

Next steps

Section titled “Next steps”