Svelte

npm install @aiconnect/core

import { createSubscriber } from 'svelte/reactivity';
import { AiConnect } from '@aiconnect/core';
import type { ConnectionState } from '@aiconnect/core';

// One client for the page. In a browser it looks for AI Wallet right away.
export const client = new AiConnect();

// Svelte listens to the client while a component or an effect reads the state.
const track = createSubscriber((update) => client.subscribe(update));

export const connection = {
  get state(): ConnectionState {
    track();
    return client.state;
  },
};

<script lang="ts">
  import { client, connection } from './aiConnect.svelte';

  const current = $derived(connection.state);
</script>

{#if current.status === 'checking'}
  <p role="status">Looking for AI Wallet</p>
{:else if current.status === 'noWallet'}
  <p role="status">
    Add AI Wallet to your browser, then reload this page.
    <a href={client.installUrl} target="_blank" rel="noreferrer">Install AI Wallet</a>
  </p>
{:else if current.status === 'connecting'}
  <p role="status">Approve this site in the AI Wallet window.</p>
{:else if current.status === 'connected'}
  <p role="status">
    Connected with {current.providerName}
    <button type="button" onclick={() => client.disconnect()}>Disconnect</button>
  </p>
{:else}
  <p role="status">
    {current.status === 'error' ? current.message : 'Use your own AI on this site.'}
    <button type="button" onclick={() => client.connect()}>Connect your AI</button>
  </p>
{/if}

import { finalAnswer, runConversation } from '@aiconnect/core';
import type { ChatMessage, ProviderSession, ToolCall, ToolSource } from '@aiconnect/core';

// A conversation on the visitor's AI. It keeps the transcript and shows the last answer with its tool calls.
export class Chat {
  answer = $state('');
  toolCalls = $state<ToolCall[]>([]);
  busy = $state(false);
  error = $state('');
  #tools: ToolSource;
  #transcript: ChatMessage[];

  constructor(system: string, tools: ToolSource) {
    this.#tools = tools;
    this.#transcript = [{ role: 'system', content: system }];
  }

  async ask(session: ProviderSession, question: string) {
    const asked: ChatMessage = { role: 'user', content: question };
    this.answer = '';
    this.toolCalls = [];
    this.error = '';
    this.busy = true;
    try {
      const added = await runConversation({
        session,
        tools: this.#tools,
        messages: [...this.#transcript, asked],
        onText: (delta) => {
          this.answer += delta;
        },
        onToolCall: (call) => {
          this.toolCalls.push(call);
        },
      });
      this.#transcript = [...this.#transcript, asked, ...added];
      // The streamed text covers every step of the loop; the final answer is the model's last message.
      this.answer = finalAnswer(added)?.content ?? this.answer;
    } catch (failure) {
      this.error = failure instanceof Error ? failure.message : String(failure);
    } finally {
      this.busy = false;
    }
  }
}

<script lang="ts">
  import { McpToolSource } from '@aiconnect/core';
  import { connection } from './aiConnect.svelte';
  import { Chat } from './chat.svelte';

  const SYSTEM = 'You recommend books from this site\'s catalog. Always search the catalog before recommending.';

  // Built once: the source keeps its MCP connection and the tool list it read.
  const chat = new Chat(SYSTEM, new McpToolSource('/api/mcp', 'Bookshop'));
  const current = $derived(connection.state);
  let question = $state('');

  function submit(event: SubmitEvent) {
    event.preventDefault();
    const text = question.trim();
    if (current.status !== 'connected' || !text) {
      return;
    }
    question = '';
    chat.ask(current.session, text);
  }
</script>

{#if current.status === 'connected'}
  <form onsubmit={submit}>
    <label for="question">Your question</label>
    <input id="question" bind:value={question} autocomplete="off" placeholder="A calm book for tonight" />
    <button type="submit" disabled={chat.busy}>Ask</button>
    {#each chat.toolCalls as call (call.id)}
      <p class="tool">{call.name} {JSON.stringify(call.arguments)}</p>
    {/each}
    <p class="answer">{chat.answer}</p>
    {#if chat.error}
      <p role="alert">{chat.error}</p>
    {/if}
  </form>
{:else}
  <p>Connect your AI to ask for a book that fits your mood.</p>
{/if}

<script lang="ts">
  import BookChat from './lib/BookChat.svelte';
  import ConnectButton from './lib/ConnectButton.svelte';
</script>

<main>
  <h1>Bookshop</h1>
  <ConnectButton />
  <BookChat />
</main>