# A chat where agent replies become working interfaces.

> A thread whose replies paint validated blueprints.

Language: en
Canonical: https://texuli.com/solutions/agent-chat/
Markdown: https://texuli.com/solutions/agent-chat.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

Solution · Agent chat

Stream replies people can stop, render their Markdown safely, autocomplete mentions and commands, and attach blueprints that are validated before the player paints them. The demo uses fixture replies, no live model.

Status: in development

[Try the agent chat demo](https://texuli.com/solutions/agent-chat/#demo)[Start with the thread](https://texuli.com/solutions/agent-chat/#quickstart)

## Ask the demo agent

Try this

- Run “Support triage” and press Stop before the reply ends: the text so far stays, marked as stopped.
- Run “Weekly report”, open the report preview, and read why the forecast attachment was refused.
- Type @, / or : and a letter in the composer, choose with the arrow keys and press Enter.
- Copy the last reply as Slack, Discord, Teams or WhatsApp text.

Use Reset to return to the starting example.

 Nov 12, 2026

Ari (demo agent) 9:00 AM

 Hi! 👋 I answer from fixtures, with no live model. Pick a scenario, or type `/` for a command, `@` to mention a teammate and `:` for an emoji.

 Message

 Press Enter to send. Press Shift+Enter for a new line.

### Copy the last reply for another chat

 Format

```
Hi! 👋 I answer from fixtures, with no live model. Pick a scenario, or type `/` for a command, `@` to mention a teammate and `:` for an emoji.
```

Every construct has a direct spelling in this format.

If the interactive demo cannot load, use the static preview above.

## From a request in the thread to an interface people can use.

### Watch the reply arrive, and stop it.

Replies stream into the thread without reading out every token: the finished message is announced once. Stop keeps what was written and marks it as stopped.

- Thread

in development

### Mention people and run commands from the composer.

Type @ to mention a teammate, / for a command or : for an emoji. The list follows the combobox pattern: arrows choose, Enter inserts, Escape closes.

- Composer autocomplete

in development

### Paint only what validates.

A reply can attach a blueprint. The card validates it with the catalog validator first and paints it with the player; one that fails is shown as refused, with the reasons.

- Blueprint attachments

## From a streamed reply to a painted blueprint.

- ### Stream the reply Apply start, delta and end events to the message list. Plain text only; Stop ends the stream and keeps the partial text.Package: `@texuli/chat`
- ### Read the Markdown Message text is read by the shared CommonMark parser and filtered to safe nodes: no HTML, links through the untrusted URL policy.Package: `@texuli/core`
- ### Validate the attachment Check an attached blueprint against the agent catalog at the untrusted tier before anything paints.Package: `@texuli/catalog`
- ### Paint it Hand the validated value to the player; a refused one shows its reasons instead.Package: `@texuli/player`
- ### Share it elsewhere Write a reply in another chat dialect (Slack, Discord, Teams, WhatsApp) and see what had to be adapted.Package: `@texuli/core`

Agent chat is built from @texuli/player, @texuli/catalog, @texuli/chat and @texuli/core, on @texuli/blocks, @texuli/charts, @texuli/data, @texuli/media, @texuli/workflows, texuli, @texuli/tokens, @texuli/primitives and @texuli/spec.

Solution

Agent chat

Packages

- L7[`@texuli/player`](https://www.npmjs.com/package/@texuli/player) Paints a validated blueprint attachment. Subpaths: .
- L6[`@texuli/catalog`](https://www.npmjs.com/package/@texuli/catalog) Validates an attachment against the agent catalog before it paints. Subpaths: ./validate
- L4[`@texuli/chat`](https://www.npmjs.com/package/@texuli/chat) Thread, message list, composer, streaming events and the attachment card; on npm, with autocomplete, stopped replies and ChatAttachment released in 0.18.0. Subpaths: .
- L0[`@texuli/core`](https://www.npmjs.com/package/@texuli/core) Reads message Markdown into safe nodes and writes a reply in chat dialects (subpaths released in 0.18.0). Subpaths: ./markdown · ./markdown-dialects

Built on

- L5 `@texuli/blocks` (Content blocks)
- L4 `@texuli/charts` (Charts)
- L4 `@texuli/data` (Data views)
- L4 `@texuli/media` (Media)
- L4 `@texuli/workflows` (Workflow graphs)
- L3 `texuli` (Styled components)
- L2 `@texuli/tokens` (Theme tokens)
- L1 `@texuli/primitives` (Headless primitives)
- L0 `@texuli/spec` (Blueprint contract)

Build with Agent chat

## Start with a thread

### Install

```
pnpm add @texuli/chat@0.18.0
```

### Stream a reply

```
<script lang="ts">
import { applyChatStreamEvent, type ChatMessage, ChatThread } from '@texuli/chat';

let messages = $state<ChatMessage[]>([]);
const agent = { id: 'agent', name: 'Example agent' };

function onSend(body: string) {
  messages = [...messages, { id: crypto.randomUUID(), author: { id: 'me', name: 'Me' }, at: Date.now(), body }];
  const id = crypto.randomUUID();
  messages = applyChatStreamEvent(messages, { type: 'start', id, author: agent, at: Date.now() });
  messages = applyChatStreamEvent(messages, { type: 'delta', id, text: 'Hello from **example.com**.' });
  messages = applyChatStreamEvent(messages, { type: 'end', id });
}
</script>

<ChatThread {messages} currentUserId="me" {onSend} />
```

### Attach a blueprint (in development, released in 0.18.0)

```
<script lang="ts">
import { validateDraft } from '@texuli/catalog/validate';
import { ChatAttachment } from '@texuli/chat';
import { createPlayerCatalog, Player } from '@texuli/player';

let { blueprint }: { blueprint: unknown } = $props();
const catalog = createPlayerCatalog();
const check = (artifact: unknown) => {
  const result = validateDraft(artifact, { catalog, tier: 'untrusted' });
  return result.ok && result.draft
    ? { ok: true as const, value: result.draft }
    : { ok: false as const, reasons: result.diagnostics.map((d) => d.message) };
};
</script>

<ChatAttachment artifact={blueprint} title="Report" {check}>
  {#snippet preview(value)}<Player blueprint={value} label="Report" />{/snippet}
</ChatAttachment>
```

Verified by `tests/e2e/site-solution-agent-chat.spec.ts`

## Keep building

- ### [Build an agent thread](https://texuli.com/guides/solutions/agent-chat/) Stream replies, add composer autocomplete and attach validated blueprints.
- ### [See the thread example](https://texuli.com/examples/chat-thread/) The package example with grouping, streaming and the reading position.

## For agents

An agent writes plain text and blueprints. The host validates every blueprint against the catalog before it paints, and message text never becomes HTML. This demo replays fixtures; it calls no model.

- [MCP server](https://texuli.com/mcp-server/)
- [Agent skill](https://texuli.com/skill/)
- [Building with agents](https://texuli.com/agents-page/)

- `@texuli/chat` @texuli/chat: In developmentThread, message list, composer and streaming events; published on npm.
- `Composer autocomplete, stopped replies and ChatAttachment` Composer autocomplete, stopped replies and ChatAttachment: PlannedReleased in 0.18.0 (pre-1.0).

## Platforms

- ### Web Web: In developmentSvelte 5 packages published on npm (pre-1.0).
- ### Compose Desktop Compose Desktop: PlannedKotlin Multiplatform renderer on the JVM, built in this repository.
- ### Android Android: PlannedNative renderer target.
- ### iOS iOS: PlannedNative renderer target.

[How the native renderer works](https://texuli.com/native/)

## Start building with Agent chat

A thread whose replies paint validated blueprints.

[Build an agent thread](https://texuli.com/guides/solutions/agent-chat/)[Chat thread example](https://texuli.com/examples/chat-thread/)[@texuli/chat on npm](https://www.npmjs.com/package/@texuli/chat)

 ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp)

## For agents

Ask the demo agent: the live Agent chat demo runs in the browser on fixture data. Fixture replies, no live model and no network: every reply is replayed from the page. Composer autocomplete, stopped replies and ChatAttachment were released in 0.18.0. Emoji render as Unicode: Texuli emoji art is still landing. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

Limits today:

- @texuli/chat is on npm; composer autocomplete, stopped replies and ChatAttachment were released in 0.18.0, and Texuli emoji art is still landing.
- The demo replays fixture replies: there is no live model.
- Pre-1.0: a new minor version may break the API.

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `catalog.search`: Search the component catalog.
- `component.get`: Read a component manifest.
- `blueprint.validate`: Validate a blueprint draft.

Docs:

- [Agent chat docs](https://texuli.com/guides/solutions/agent-chat/)
- [@texuli/chat README](https://github.com/DailybotHQ/texuli/blob/main/packages/chat/README.md)
- [@texuli/player README](https://github.com/DailybotHQ/texuli/blob/main/packages/player/README.md)
- [@texuli/catalog README](https://github.com/DailybotHQ/texuli/blob/main/packages/catalog/README.md)
- [@texuli/core README](https://github.com/DailybotHQ/texuli/blob/main/packages/core/README.md)