Part 1 - Making it Work

I’m gonna keep this as brief as possible. For reference, the starting point of this discussion is https://vercel.slack.com/archives/C050WU03V3N/p1747848130955979.

• Basically no one but React benefits from the "subscriber" architecture -- signal-based frameworks can just put state directly in the chat and then share that chat instance everywhere it's needed
  • Think of it this way: If getChat(id).messages is a signal, anyone anywhere can just call getChat(id).messages and have it be reactive when it's updated, no subscriber / event system required
• React needs the events because it needs to be able to use useSyncExternalStore's update method to tell React to invalidate the data for a specific chat. (:old-man-yells-at-rules-of-hooks: or something)
• So, for other frameworks, it makes a lot more sense to be able to embed their own state in ChatStore. How? A StateManager. The StateManager is basically Readonly<Chat> plus methods to update the chat properties — each implementing library can create a StateManager that is then used for that library’s ChatStore. I initially toyed around with some sort of abstract class architecture but the best version I could come up with was actually just an argument to the constructor of ChatStore.

Here’s what it looks like in practice:

React

Svelte

It’s a little bit of boilerplate, but it pays huge dividends in the simplicity of implementing any given framework: The framework declares a StateManager and its own extension of ChatStore, and then the framework’s hook (useChat, Chat, whatever) just proxies getChat(id).property using getters and setters.

Here’s the PR implementing this pattern (ignore the examples, they’re just updating imports):

feat: Better multi-framework support for fine-grained / signal-based reactivity systems by elliott-with-the-longest-name-on-github · Pull Request #2 · iteratetograceness/ai

Part 2 - Where Svelte says “y tho”

Okay, okay, Svelte is working now — and there’s a clear and simple path for Vue and Solid support. But… don’t kill me, okay?

I think this library is overcomplicating what Svelte needs. Let me lead with an example — the ideal API for Svelte is:

<script lang="ts">
  const chat = new Chat({ id, messages, ...rest });
</script>

…where Chat is basically a single-member ChatStore. (Basically, the arguments to new Chat should be roughly the union of the arguments supplied to useChat and ChatStore).

To draw a little more of this owl, here’s how a 100% complete, SSR-compatible, client-hydrated Svelte app would look:

/[id]/+layout.server.ts