Svelte

import { loushoAgent } from '@lousho/build-ai-agent/svelte';

// In a component's <script lang="ts">, or a module that several components share:
export const agent = loushoAgent({ url: '/api/agent' }, { approvalsUrl: '/api/approvals' });

export async function submit(text: string): Promise<void> {
  if (text.trim()) await agent.send(text);
}

{#each $agent.messages as message (message.id)}
  <article>
    <header>{message.role}</header>
    <p>{message.text}</p>
    {#each message.toolCalls ?? [] as call (call.id)}
      <code>{call.name}: {call.status}</code>
    {/each}
  </article>
{/each}
{#if $agent.pendingApproval}
  <p>
    Run {$agent.pendingApproval.toolName}?
    <button on:click={() => agent.approve()}>Approve</button>
    <button on:click={() => agent.reject('Not now')}>Reject</button>
  </p>
{/if}
{#if $agent.status === 'streaming'}<button on:click={agent.stop}>Stop</button>{/if}