aparté

The complete AI chat UI, for any framework. Drop a ChatGPT-style chat into React, Vue, Svelte, Angular or plain HTML: replies that stream with Markdown and code, a conversation list, tools a person approves, answers drawn as cards. Your own backend or an AG-UI agent behind it, your styles on it, zero dependencies at the core.

Everything an AI chat shows, each piece on its own page with live variants: the conversation, messages with Markdown and code, reasoning, tool calls a human approves, the questions an agent asks, the composer and its model picker — then the layout around it (app shell, sidebar, conversation list) and a UI kit for the rest of your app. Restyle everything with CSS variables.

Begin from a template — an assistant, an agent workshop, a support widget, a research assistant, a shopping assistant, a travel concierge — or see how it compares with assistant-ui, AI Elements, Deep Chat and Loquix.

🚀 1.0 on npm. Every @aparte/* package ships together at one version — npm i @aparte/core (the badge above is the live number). The declared surface follows semver: a frozen name keeps its name, and what its documentation says it does, until 2.0; what changed when is at apartejs.dev/changelog (or CHANGELOG.md here), and the docs live at apartejs.dev.

_{pronounced ah-par-té — French aparté: a line spoken aside, a private word taken "in aparté". Also reads as a part: one composable piece.}

Why aparté

• The whole chat, as components. Conversation, message actions and branches, attachments, reasoning, code blocks, tool calls, artifacts, errors, approvals, questions, suggestions, a model picker, a context gauge — and the shell around them. Each one is documented with its variants running live, not as a screenshot.
• Rich output, not just text. A tool's result can be drawn as an interactive card (weather, products, places, stocks, orders…), and a reply can carry charts, maths, diagrams and citations, drawn while it streams.
• The runtime is included. Streaming, the agent loop (@aparte/engine) and tool calls come with the components — or keep your own loop and stream its replies into the chat.
• Agents, not only models. Put the chat on an AG-UI agent (Agno, LangGraph, Mastra, CrewAI, or a TanStack AI route), on an n8n chat workflow, or on a server-side loop behind your own /api/chat.
• A human in the loop. Mark a tool needsApproval and the user approves or rejects the call; the agent can ask typed questions; and with the server loop an approval survives a reload.
• Safe with what a model writes. Replies go through a built-in sanitizer, and a picture a model or a tool chose waits for the reader's click until you allow where it comes from, because its address alone can carry the conversation to another host. One line loads yours: setImagePolicy(['https://cdn.example.com']) (why).
• Framework-agnostic core. One engine — vanilla Web Components — renders the same chat everywhere. Thin wrappers give React/Vue/Svelte/Angular an ergonomic component; with no framework, use the <aparte-*> custom elements directly.
• Zero third-party dependencies in @aparte/core. Markdown, syntax highlighting, model pickers — all opt-in provider-* / plugin-* packages. The core stays tiny.
• Bring your own model, your way. A transport seam decides where the request goes: AparteDirectTransport (browser-direct — BYOK or a local model) or AparteBackendTransport (your /api/chat, key stays server-side). Providers cover the OpenAI-compatible family, the Vercel AI SDK (25+ vendors), and in-browser Transformers.js.
• Yours to restyle. Theme everything through CSS variables (no forking), swap icons and render hooks, and localise the UI strings (English built-in, nine more languages in @aparte/locales).
• A library, not an app. No routing, settings, or persistence baked in, and backend-agnostic — it's a chat surface you compose, not a product you inherit.

Quick start — no framework

npm install @aparte/core @aparte/provider-openai-compat @aparte/plugin-marked marked

<aparte-chat center-empty placeholder="Ask anything…" style="height: 600px"></aparte-chat>

import '@aparte/core';                 // registers the <aparte-*> custom elements
import '@aparte/core/styles.css';      // theme variables + component styles
import { registerDefaultRenderers, aparteGlobalConfig, AparteClient, AparteDirectTransport } from '@aparte/core';
import { createOpenAICompatProvider, presets } from '@aparte/provider-openai-compat';
import { setupMarkedStreamingProvider } from '@aparte/plugin-marked/streaming';

registerDefaultRenderers();
setupMarkedStreamingProvider();        // Markdown, as it streams — core alone shows the text as written

// A local model (LM Studio / Ollama) needs no key — just enable CORS in the app.
// Swap in presets.OPENAI / .MISTRAL / .OPENROUTER (+ a keyResolver) for a cloud vendor.
aparteGlobalConfig.registerAIProvider(createOpenAICompatProvider(presets.LMSTUDIO));
aparteGlobalConfig.setTransport(new AparteDirectTransport({ byok: true }));
new AparteClient().start();            // listens for sends, shows the user's message, streams the reply

// Retry/edit only work with a host like the client above, so core ships them off:
aparteGlobalConfig.setBubbleActions({ retry: true, edit: true });

A real streaming, bring-your-own-key chat — no backend, no build magic. → Getting started builds the same chat step by step on a scripted model that needs no key, and wires Markdown from two smaller packages (@aparte/plugin-marked and @aparte/plugin-streaming-markdown); this page uses the one-call shortcut and a real model.

Any framework

Same core, a component per framework in its own syntax — props, slots or snippets, a bindable list of messages, your components inside tool calls — and the chat keeps its own thread, so there's even less to wire:

npm install @aparte/react @aparte/core @aparte/provider-openai-compat @aparte/plugin-marked marked react react-dom

import { AparteChat, useAparteClient } from '@aparte/react';
import { aparteGlobalConfig, AparteDirectTransport } from '@aparte/core';
import { createOpenAICompatProvider, presets } from '@aparte/provider-openai-compat';
import { setupMarkedStreamingProvider } from '@aparte/plugin-marked/streaming';
import '@aparte/core/styles.css';

setupMarkedStreamingProvider();
aparteGlobalConfig.registerAIProvider(createOpenAICompatProvider(presets.OPENROUTER));
aparteGlobalConfig.setTransport(new AparteDirectTransport({ byok: true }));

export function Chat() {
  useAparteClient();                   // bridges composer sends to the model
  return <AparteChat centerWhenEmpty />;
}

Framework	Package	Tested in CI with	Rendered on a server, tested in	Guide
React 18 / 19	@aparte/react	React 19	Next 15 App Router	React
Vue 3.5	@aparte/vue	Vue 3.5	Nuxt 3	Vue
Svelte 4 / 5	@aparte/svelte (/runes on Svelte 5)	Svelte 4 and 5	SvelteKit 2	Svelte
Angular 19–21	@aparte/angular	Angular 19 and 21, zoneless	Angular 21 SSR, hydrated	Angular

Each server-rendered page is built for production, served, and hydrated in a browser with no mismatch. Underneath, it is the same Web Components: the chat's markup and its CSS variables are aparté's.

Runnable examples for every framework (plus vanilla) live in apps/examples.

Packages

Package	What
@aparte/core	Vanilla web components — the chat engine, zero third-party dependencies
@aparte/engine	Framework-agnostic agent loop (runStreamAgent)
@aparte/react · /vue · /svelte · /angular	Thin, ergonomic framework wrappers (peer deps)
@aparte/provider-openai-compat	One adapter for every OpenAI-compatible endpoint (OpenAI, Mistral, OpenRouter, Groq, LM Studio, Ollama…)
@aparte/provider-ai-sdk	Vercel AI SDK bridge (Anthropic, Google, 25+ vendors)
@aparte/provider-transformers	In-browser inference via Transformers.js
@aparte/runner-ag-ui	Render an AG-UI agent (Agno, LangGraph, Mastra, CrewAI) or a TanStack AI route
@aparte/runner-n8n	Put the chat on an n8n chat workflow (Chat Trigger + AI Agent), streamed or not
@aparte/provider-scenario	A scripted model — replays turns you wrote, for demos, docs and your own tests
@aparte/docs-mcp	The docs as an MCP server — npx @aparte/docs-mcp lets your coding agent search and read them
@aparte/plugin-marked · -streaming-markdown · -shiki	Markdown rendering + syntax highlighting
@aparte/plugin-katex · -mermaid	Maths and diagrams, drawn while the reply streams
@aparte/plugin-echarts · -chartjs	Charts from a fenced block or a tool's result, on the library you already use
@aparte/plugin-cards	A tool's result drawn as a rich card — weather, products, places… — in variants, from your tool's own fields
@aparte/plugin-model-selector · -ask-user · -approval · -compaction	A provider/model picker; a question-elicitation UI; approval modes (plan / ask / auto-edit / auto); conversation compaction
@aparte/plugin-artifacts	A create_artifact tool the model calls, and the card that shows its result: the code, and a live preview
@aparte/plugin-storage-idb	Keep conversations in the browser: an IndexedDB storage adapter, attachments kept as files, no server
@aparte/plugin-titler	A title for every conversation, from a small model that runs in the browser
@aparte/locales	The UI strings in nine languages — French, Spanish, Portuguese (Brazil), German, Italian, Russian, Japanese, Korean, Chinese (Simplified); English is core's built-in default

Documentation

Live at apartejs.dev — a Starlight site in apps/docs (run pnpm run docs locally):

• Getting started — your first streaming chat, no framework
• Providers — connect a real model (OpenAI-compatible, AI SDK, Transformers.js)
• Theming — restyle everything through CSS variables
• Customization — icons, render hooks, action registries
• Conversations & branching — retry, edit, branches, persistence
• The agent engine — the headless runStreamAgent loop
• Tools & human-in-the-loop — function calling with an approve/reject gate
• Backend transport — your /api/chat, key stays server-side
• Bring your own loop — display-only mode for an external agent loop
• Cards — a tool's result drawn as an interactive card (generative UI)
• Server loop — run the agent loop on your server; approvals survive a reload
• Docs for agents — llms.txt and an MCP server for your coding agent

Status

1.0, built in the open. The core, engine, four wrappers, providers and plugins are on npm, and the runnable examples in apps/examples — vanilla, React, Vue, Svelte 4 and 5, Angular — drive a browser E2E suite (Chromium, WebKit and Firefox, accessibility gated with axe-core) on top of the unit suite. The declared surface is frozen until 2.0; what comes next is on the roadmap.

Every @aparte/* package is released together, at one version — install any of them at the same number. What shipped when: CHANGELOG.md (the aggregate), or a package's own CHANGELOG.md for its detail.

Contributing

Issues and PRs welcome — see CONTRIBUTING.md for conventions and the checks each change must pass. It's a pnpm + NX monorepo:

pnpm install
pnpm build        # all packages
pnpm test         # unit suite (Vitest)
pnpm e2e          # browser smoke E2E (Playwright; run pnpm e2e:install once)
pnpm run docs     # the docs site (bare `pnpm docs` triggers npm's builtin instead)

License

MIT © Paul Richez