@tesseron/svelte

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

Compatible with Svelte 4 and Svelte 5.

Install

npm install @tesseron/svelte

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

Quick start

<script lang="ts">
  import { tesseron, tesseronAction, tesseronResource, tesseronConnection } from '@tesseron/svelte';
  import { z } from 'zod';

  let todos = $state<{ id: string; text: string; done: boolean }[]>([]);

  // 1. Identify your app
  tesseron.app({ id: 'todo_app', name: 'Todo' });

  // 2. Register actions — removed automatically on component destroy
  tesseronAction('addTodo', {
    input: z.object({ text: z.string().min(1) }),
    handler: ({ text }) => {
      todos = [...todos, { id: crypto.randomUUID(), text, done: false }];
    },
  });

  // 3. Expose readable state as a resource
  tesseronResource('todoStats', {
    read: () => ({ total: todos.length, done: todos.filter((t) => t.done).length }),
  });

  // 4. Connect — returns a Svelte Readable store
  const connection = tesseronConnection();
</script>

{#if $connection.status === 'open'}
  <p>Claim code: <code>{$connection.claimCode}</code></p>
{/if}

<ul>
  {#each todos as todo (todo.id)}
    <li>{todo.text}</li>
  {/each}
</ul>

Every function registers with the active Tesseron client and cleans up on component destroy.

Functions

Subscribable resources

To push state to the agent on every change, wire a subscriber using $effect:

<script lang="ts">
  import { tesseronResource } from '@tesseron/svelte';

  let count = $state(0);
  const subs = new Set<(n: number) => void>();

  $effect(() => {
    const current = count; // reactive dep
    subs.forEach((fn) => fn(current));
  });

  tesseronResource('count', {
    read: () => count,
    subscribe: (emit) => { subs.add(emit); return () => subs.delete(emit); },
  });
</script>

Pair with @tesseron/web

@tesseron/svelte re-exports the public surface of @tesseron/web, so you can mix raw calls with the helper functions. See examples/svelte-todo for a full app.

Docs

License

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

Built and maintained by BrainBlend AI.