AI chat Web Components, framework-agnostic — with the agent loop inside

// the whole chat, plus the files the composer collects
import '@aparte/core';
import '@aparte/core/styles.css';

<aparte-chat attachments></aparte-chat>

composer.addEventListener('aparte-send', (e) => {
  const { content, files } = e.detail;
  viewport.appendMessage({ id, role: 'user', content });
  // …then stream your model's reply back in
  viewport.appendToken(id, chunk);
  viewport.completeMessage(id);
});

// a tool that stops the turn until a person decides
aparteGlobalConfig.registerTool({
  name: 'delete_file',
  description: 'Delete a file from the project',
  inputSchema: { /* JSON Schema */ },
  needsApproval: true,
}, async ({ path }) => remove(path));

// AparteClient asks at the composer and resumes for you.
// Ask it yourself the same way — no client, no loop:
const answer = await aparteGlobalConfig.requestUserInput({
  kind: 'approval',
  message: 'Run delete_file?',
  options: [
    { value: 'allow', label: 'Approve', tone: 'affirm' },
    { value: 'deny', label: 'Reject', tone: 'deny' },
  ],
});

// two kinds in one reply, both streamed:
// open empty, append, then settle
viewport.appendMessage({ id, role: 'assistant' });

viewport.addSegment(id, { id: 's1', type: 'thinking',
  content: '', isStreaming: true });
viewport.appendToSegment(id, 's1', chunk);
viewport.updateSegment(id, 's1', { isStreaming: false });
// closed by default: `collapsed` is the reader's
// business, never the model's. You never write
// messageId or index either — the owner stamps
// them, and its measurements land in meta.aparte.

// the model wrote a document; the artifacts plugin renders the card
viewport.addSegment(mid, {
  id: 'a1', type: 'artifact',
  artifactType: 'svg',
  mimeType: 'image/svg+xml',
  title: 'Turn latency by segment',
  content: svgTheModelWrote,
});

// The Preview tab mounts a sandboxed iframe —
// sandbox="allow-scripts", a CSP delivered twice, and
// ONLY on a human press. Reloading a saved thread
// never re-runs what a model wrote.

// only `copy` is on by default — a button nobody
// answers is a lie told to the user
aparteGlobalConfig.setBubbleActions({ retry: true });

// retry forks a sibling instead of overwriting,
// and the ‹1/2› picker appears on its own
document.addEventListener('aparte-retry', (e) => {
  const id = viewport.addSiblingOf(e.detail.messageId, {
    id: next, role: 'assistant', content: '',
  });
  // …then stream the new version into `id`
});