Skip to content
(aparté)
v0.19.3 · beta

How aparté fits together

What sits between your framework and your model — the elements, the client and its loop, the transport, the provider — and which package holds each.

On this page
React, Vue, Svelte, Angular or vanilla JS render the same aparté elements. From the browser, a request goes straight to a model running in the page, an OpenAI-compatible API or a Vercel AI SDK model, with your key or a local server. Through your server, it reaches an OpenAI-compatible API or an AI SDK model with the key kept there, or an agent that runs its own loop: AG-UI agents and TanStack AI. Your framework aparté Transport Models and agents React Vue Svelte Angular Vanilla JS (aparté) 51 components and the agent loop npm i @aparte/core In the browser your key, or a local model Your server keeps your key, runs agents Scripted replies In-browser models OpenAI-compatible Vercel AI SDK AG-UI agents TanStack AI Your framework React Vue Svelte Angular Vanilla JS (aparté) 51 components and the agent loop In the browser your key, or a local model Your server keeps your key, runs agents Models and agents Scripted replies In-browser models OpenAI-compatible Vercel AI SDK OpenAI-compatible Vercel AI SDK AG-UI agents TanStack AI

One message, from send to reply

Section titled “One message, from send to reply”
  1. The person sends. The composer fires aparte-send with the text and any files.
  2. The client, AparteClient, adds the message to the conversation and builds the request: the history, the tools you registered, the system prompt.
  3. The loop, @aparte/engine, sends it and reads the reply as it streams. When the model calls a tool, the loop runs it — once the person approves, if the tool asks for that — sends the result back, and goes on until the model is done.
  4. The transport carries each request: from the browser straight to the model, or through your server.
  5. The provider speaks the model’s format: an OpenAI-compatible API, the Vercel AI SDK, a model running in the page.
  6. The reply comes back as segments — text, reasoning, code, tool calls, errors — and the message draws each one as it streams.

Where the request goes

Section titled “Where the request goes”
TransportThe request goesThe key
AparteDirectTransport, the defaultfrom the browser to the modelthe person’s own, or none for a local model
AparteBackendTransportto your endpoint, which calls the modelstays on your server

The chat is the same either way. Keep the key server-side has the endpoint, ready-made as createAparteChatHandler.

Where the loop runs

Section titled “Where the loop runs”
WhereWhat you useGuide
In the pageAparteClient, the defaultInstallation and first chat
On your servercreateAparteAgentHandler on the server, createAgentStreamRunner in the pageRun the loop on your server
In an agent framework@aparte/runner-ag-ui, for an agent served over AG-UI: Agno, LangGraph, Mastra, CrewAI, TanStack AIAG-UI, TanStack AI
In your own codethe chat alone: you stream into itUse your own loop

The client, both transports and both server handlers come from @aparte/core, in the page and on the server alike.

What the chat is made of

Section titled “What the chat is made of”

Three kinds of parts, all in the components:

  • Elements — tags you put on the page, such as <aparte-chat>, <aparte-composer> or <aparte-conversation-list>. They hold the behaviour: streaming, scrolling, focus, keyboard.
  • Segments — what a message is made of, as data: text, reasoning, code, a tool call, an error, or a view of your own. Each kind has a renderer, and you can register yours.
  • The kit — CSS classes for the controls around the chat: buttons, fields, menus, dialogs, in the same theme.

51 components in all: 24 for the chat, 5 for the page around it, 22 in the kit.

In your framework

Section titled “In your framework”

The framework packages wrap the same elements: a chat component for React, Vue, Svelte and Angular, with typed properties and events for every element. They depend on @aparte/core alone: the provider and the transport are set up the same way in every framework, and each package starts the client for you — useAparteClient in React, AparteAiService in Angular.

Which package does what

Section titled “Which package does what”
Package What it is
The library
@aparte/core AI chat and agent UI components as Web Components, with the agent loop inside
@aparte/engine The agent loop on its own: runStreamAgent streams a model's turns and runs its tools, in the browser or in Node
Frameworks
@aparte/angular Angular 19 wrapper for aparté
@aparte/react React 18+ wrapper for aparté
@aparte/svelte Svelte wrapper for aparté
@aparte/vue Vue 3 wrapper for aparté
Models
@aparte/provider-ai-sdk Bridge any Vercel AI SDK model into aparté
@aparte/provider-openai-compat One OpenAI-compatible chat-completions adapter for any /v1 endpoint
@aparte/provider-scenario A scripted model for aparté
@aparte/provider-transformers Run LLMs 100% in the browser via Transformers.js (WebGPU/WASM)
Agent frameworks
@aparte/runner-ag-ui Render an AG-UI agent in aparté
Plugins
@aparte/plugin-approval Approval modes for aparté tool calls
@aparte/plugin-artifacts Artifacts for aparté
@aparte/plugin-ask-user The ask_user tool for aparté
@aparte/plugin-compaction Conversation compaction for aparté
@aparte/plugin-marked Markdown rendering for aparté via marked
@aparte/plugin-model-selector Provider + model selector web component (<aparte-model-selector>) for aparté
@aparte/plugin-shiki Syntax highlighting for aparté via shiki
@aparte/plugin-streaming-markdown Incremental (token-by-token) Markdown rendering for aparté via streaming-markdown, with a live URL-scheme guard
@aparte/plugin-titler Auto-title conversations with an aparte-titler model
Translations
@aparte/locale-fr French locale for aparté
Tools
@aparte/docs-mcp The aparté documentation as an MCP server

Next

Section titled “Next”