flows.md · documentação · Blocos

@audio

Um player para um áudio enviado para este site — um episódio, uma música, uma aula gravada —, com controles, e nada toca sozinho.

Ao vivo

```@audio src:/demo/acorde.mp3 title:"Um acorde de quatro segundos"
```

No seu espaço, src: é o endereço que o arquivo ganhou ao ser enviado: arraste o áudio para a página no editor, ou use o upload do MCP, e o files mostra o markdown pronto.

Argumentos

flows.md · documentação · Blocos

@button

Um link desenhado como botão: o que o leitor deve fazer em seguida. Funciona nas páginas e nos e-mails — numa newsletter, é o botão que todo programa de e-mail desenha.

Ao vivo

```@button to:/@docs/blocks
Ver todos os blocos
```

Para fora do site

to: aceita um caminho deste site ou um endereço https://.

flows.md · documentação · Blocos

@chart

Um gráfico desenhado de um CSV: barras, barras empilhadas, linha, área, pizza, rosca, dispersão (com bolhas), mapa de calor, cascata — ou só a tabela. O leitor aponta um valor para lê-lo e esconde uma série pela legenda.

Barras

title: Encomendas por mês — Ateliê Exemplo
---
mês,canecas,pratos
Jul,42,18
Ago,51,22
Set,63,30
Out,58,41

```@chart type:bar
title: Encomendas por mês — Ateliê Exemplo
---
mês,canecas,pratos
Jul,42,18
Ago,51,22
Set,63,30
Out,58,41
```

A primeira linha do CSV dá nome às colunas; a primeira coluna é o eixo. Os argumentos vão antes do ---, um por linha, ou na linha da cerca.

flows.md · documentação · Blocos

@chat

Uma conversa, como num aplicativo de mensagens: uma mensagem por linha, quem: texto, com a hora depois de um @. As de eu (ou me) ficam à direita.

Ao vivo

title: Atendimento — Café Ladeira
Rafa: Oi! Vocês fazem bolo sem glúten? @ 09:12
eu: Fazemos sim, o de laranja. Precisa encomendar com um dia de antecedência. @ 09:15
Rafa: Perfeito, quero um para sábado. @ 09:16
eu: Anotado! Fica pronto às 10h. @ 09:18

```@chat
title: Atendimento — Café Ladeira
Rafa: Oi! Vocês fazem bolo sem glúten? @ 09:12
eu: Fazemos sim, o de laranja. Precisa encomendar com um dia de antecedência. @ 09:15
Rafa: Perfeito, quero um para sábado. @ 09:16
eu: Anotado! Fica pronto às 10h. @ 09:18
```

Só um title: no começo é lido como argumento; toda outra linha nome: texto é uma mensagem.

flows.md · documentação · Blocos

@checklist

Uma lista de verificação que funciona: conta quanto falta, agrupa sob títulos ## e lembra o que o leitor marcou — no navegador dele, nunca na página. Cada leitor tem a sua.

Ao vivo

Marque um item e recarregue a página: ele continua marcado, só para você.

title: Antes de abrir a loja
## Produtos
- [x] Fotografar as peças
- [x] Escrever as descrições
- [ ] Conferir os preços
## Página
- [ ] Testar o formulário de contato
- [ ] Ler tudo no celular

```@checklist
title: Antes de abrir a loja
## Produtos
- [x] Fotografar as peças
- [x] Escrever as descrições
- [ ] Conferir os preços
## Página
- [ ] Testar o formulário de contato
- [ ] Ler tudo no celular
```

flows.md · documentação · Blocos

@consent

O sim ou o não do leitor, uma linha por finalidade — essenciais, vídeos, estatísticas —, guardado no navegador do leitor, neste site — nunca no servidor. Um bloco com consent: só aparece depois do sim.

Ao vivo

Com duas ou mais finalidades, cada uma ganha um interruptor, e há aceitar tudo, recusar tudo e salvar:

```@consent title:"Sua privacidade" link:/@docs/blocks/consent
essential | Essenciais | Mantêm o site funcionando. | required
videos | Vídeos | Carrega os vídeos desta página.
stats | Estatísticas | Conta as páginas mais lidas, sem identificar você.
```

Cada linha: as opções que ela liga, um |, o nome, um |, o que significa, e | required no fim para a que está sempre ligada.

flows.md · documentação · Blocos

@contact

Uma pessoa ou um lugar para contatar: ligar, abrir o WhatsApp com a mensagem já escrita, mandar e-mail, ver no mapa — e um botão que salva o contato no celular.

Ao vivo

```@contact name:"Marta Exemplo" role:"Atendimento" org:"Ateliê Exemplo" phone:"+55 11 5550-0134" whatsapp:"+55 11 95550-0134" message:"Olá! Vi a página de vocês." email:[email protected] site:https://example.com address:"Rua das Acácias, 120 — Porto Azul"
```

Só o essencial

Cada forma de contato aparece só quando é dada. save:false tira o botão de salvar.

flows.md · documentação · Blocos

@copy

Um valor que o leitor leva embora — uma chave Pix, um cupom, a senha do wi-fi, um comando — impresso, com um botão que copia.

Ao vivo

```@copy label:"Chave Pix" value:[email protected] note:"Qualquer valor ajuda o Ateliê Exemplo"
```

Variações

Um cupom. label: diz o que é o valor; note: diz até quando vale ou onde colar.

flows.md · documentação · Blocos

@countdown

Conta até uma data e uma hora, e diz outra coisa quando o momento chega — um lançamento, uma abertura de portas, o fim das inscrições.

Ao vivo

```@countdown to:2027-03-15T19:00-03:00 label:"A loja do Ateliê Exemplo abre em" done:"A loja está aberta"
```

Depois de 15 de março de 2027, este mesmo bloco diz "A loja está aberta" — é o done:.

Só os dias

flows.md · documentação · Blocos

@data

Mostra as linhas de uma coleção do espaço numa página: uma tabela por padrão, ou a mesma coleção como quadro, lista de tarefas, agenda ou linha do tempo.

Os exemplos leem a coleção tarefas-exemplo, declarada na página do @schema com sete tarefas de uma loja fictícia. Quem lê vê as vistas como estão; quem escreve no espaço arrasta um cartão, marca uma caixa, muda uma data.

Tabela

```@data collection:tarefas-exemplo sort:ordem
@count
@column titulo
@column status format:badge
@column responsavel
@column prazo
```

flows.md · documentação · Blocos

@diff

Uma mudança de código como uma revisão a lê — o que o git diff imprime —, uma seção por arquivo, colorida pela linguagem, empilhada ou lado a lado. Quem pode anotar seleciona uma linha e deixa uma nota nela.

Ao vivo

~~~@diff title:"A saudação ganha uma exclamação e um nome padrão"
--- a/saudacao.rb
+++ b/saudacao.rb
@@ -1,3 +1,3 @@
-def ola(nome)
-  "Olá, #{nome}"
+def ola(nome = "visitante")
+  "Olá, #{nome}!"
 end
--- a/README.md
+++ b/README.md
@@ -1,2 +1,4 @@
 # Saudação
 Diz olá.
+
+Sem nome, cumprimenta o visitante.
~~~

A cerca é de ~~~ e não de crases: assim as crases de dentro de um patch continuam texto.

Argumentos

flows.md · documentação · Blocos

@embed

Um cartão que diz de onde é o conteúdo — YouTube, Spotify, um mapa, uma agenda — e leva até ele. Nunca um quadro: a página não carrega outro site dentro dela, e o leitor não é rastreado por ele só por abrir a página.

Ao vivo

title: Como chegar ao Ateliê Exemplo
note: Na esquina com a padaria

```@embed map:"Rua das Acácias, 120 — Porto Azul"
title: Como chegar ao Ateliê Exemplo
note: Na esquina com a padaria
```

Um vídeo, uma agenda

flows.md · documentação · Blocos

@event

Um momento para pôr na agenda: a data e a hora, quanto dura, onde — impressos, com um link para o Google Agenda e um arquivo .ics para Apple e Outlook.

Ao vivo

```@event to:2027-03-15T19:00-03:00 duration:120 title:"Abertura da loja do Ateliê Exemplo" where:"Rua das Acácias, 120 — Porto Azul" details:"Traga um amigo; tem café." zone:America/Sao_Paulo
```

Uma chamada

Quando o lugar é um endereço https://, ele vira o link da chamada.

flows.md · documentação · Blocos

@faq

Perguntas frequentes, cada uma fechada até o leitor abrir — sem script: cada pergunta é um <details> do próprio navegador.

Ao vivo

title: Perguntas sobre as encomendas
Quanto tempo leva uma encomenda?
De duas a três semanas: cada peça seca, vai ao forno duas vezes e esfria devagar.
---
Vocês entregam?
Em Porto Azul, sim. Para outras cidades, enviamos pelo correio, bem embalado.
---
Posso escolher a cor do esmalte?
Pode. Na página de encomendas há as doze cores que usamos.

```@faq
title: Perguntas sobre as encomendas
Quanto tempo leva uma encomenda?
De duas a três semanas: cada peça seca, vai ao forno duas vezes e esfria devagar.
---
Vocês entregam?
Em Porto Azul, sim. Para outras cidades, enviamos pelo correio, bem embalado.
---
Posso escolher a cor do esmalte?
Pode. Na página de encomendas há as doze cores que usamos.
```

Uma pergunta por bloco, separadas por ---: a primeira linha é a pergunta, o resto a resposta.

flows.md · documentação · Blocos

@flashcards

Um baralho para estudar: um termo e o significado, uma pergunta e a resposta, uma palavra e a tradução — ou um autoteste, com perguntas que o leitor responde e uma pontuação.

Cartões que viram

Um cartão por linha, frente | verso. Vira com um clique ou pelo teclado.

```@flashcards label:"Italiano de viagem"
Buongiorno | Bom dia
Il conto, per favore | A conta, por favor
Dov'è la stazione? | Onde fica a estação?
```

Um autoteste

flows.md · documentação · Blocos

@form

Um formulário que grava cada envio como uma linha de uma coleção do espaço: contato, inscrição, lista de espera, pesquisa.

Ao vivo

Este é o formulário como ele sai numa página, com preview:true: os campos funcionam, mas o botão está desligado e nada é enviado — não há para onde enviar. Ele desenha a coleção contato-exemplo, declarada na página do @schema, que não aceita envios de ninguém mas pode ser lida por qualquer leitor — por isso a prévia aparece para você.

```@form collection:contato-exemplo preview:true submit:"Enviar mensagem"
nome
email required
mensagem
```

Um campo por linha, com o nome que ele tem na coleção. O tipo vem da coleção: um e-mail é conferido como e-mail, um texto longo vira uma caixa grande. No seu espaço, sem preview:true, o mesmo bloco grava cada envio como uma linha da coleção e responde com o texto de success:.

flows.md · documentação · Blocos

:::grid

Uma grade com quantos itens couberem por linha, cada um com uma largura mínima — e um por linha no celular. Os itens se separam por ---.

Cartões

:::grid min:14 items:card
### Feito à mão
Cada peça é torneada e esmaltada no ateliê.
---
### Queima dupla
Duas idas ao forno deixam a peça resistente.
---
### Vai ao micro-ondas
O esmalte não tem chumbo e aguenta o dia a dia.
:::

Números

flows.md · documentação · Blocos

@hours

Quando um lugar abre: a semana impressa, e "aberto agora" pelo relógio do lugar — não pelo do leitor. Para um café, uma loja, uma clínica, uma página de contato.

Ao vivo

```@hours zone:America/Sao_Paulo title:"Café Ladeira" notice:"Fechado no feriado do dia 20"
seg-sex 07:30-18:00
sab 08:00-13:00
dom fechado
```

Dois turnos e depois da meia-noite

Vários horários num dia, separados por vírgula. Um fim antes do começo passa da meia-noite.

flows.md · documentação · Blocos

@links

Botões da largura da página, um por linha — o corpo de uma página de links. Um * na frente destaca um deles.

Ao vivo

* [Encomendar uma peça](https://example.com/encomendas)
[Ver o catálogo](https://example.com/catalogo) 40 peças, com preços
Na feira
[Feira de Porto Azul](https://example.com/feira) sábado, das 9h às 14h
[O forno que eu uso](https://example.com/forno){sponsored}

```@links
* [Encomendar uma peça](https://example.com/encomendas)
[Ver o catálogo](https://example.com/catalogo) 40 peças, com preços
Na feira
[Feira de Porto Azul](https://example.com/feira) sábado, das 9h às 14h
[O forno que eu uso](https://example.com/forno){sponsored}
```

O texto depois do link é a nota embaixo dele. Uma linha só de texto é um título de seção. {sponsored} marca um link pago ou de afiliado, com a palavra visível.

flows.md · documentação · Blocos

@members

As pessoas de um grupo: o nome, uma linha sobre cada uma e quem coordena. É a página "quem está na turma" de um curso, de um clube, de uma equipe.

Por que não está desenhado aqui

A lista de um grupo só aparece para quem o grupo deixa vê-la — quem o coordena, e os membros quando o grupo permite. Para todos os outros, o bloco não mostra nada. Esta página é pública, e você a está lendo de fora de qualquer grupo; um bloco aqui seria um espaço vazio.

O markdown

```@members group:"Clube de Leitura Exemplo" label:"Quem está no clube"
```

flows.md · documentação · Blocos

mermaid

Um diagrama a partir de texto, na gramática do mermaid: fluxograma, sequência, estados, gantt e os outros tipos da documentação do mermaid. É o único bloco sem @: uma cerca mermaid também é desenhada no GitHub, no Obsidian, no Notion e no GitLab, e o diagrama continua funcionando onde a página for exportada.

Fluxograma

flowchart LR
  A[Encomenda] --> B{Tem a peça?}
  B -- sim --> C[Embalar]
  B -- não --> D[Tornear] --> E[Queimar] --> C
  C --> F[Enviar]

```mermaid
flowchart LR
  A[Encomenda] --> B{Tem a peça?}
  B -- sim --> C[Embalar]
  B -- não --> D[Tornear] --> E[Queimar] --> C
  C --> F[Enviar]
```

Sequência

flows.md · documentação · Blocos

@pages

Uma galeria de páginas, cada uma como uma miniatura de si mesma: as páginas de dentro de uma pasta, ou as que você listar. Cada leitor vê só as que pode abrir.

As páginas que você escolhe

Um caminho por linha.

```@pages columns:3
/@docs/blocks/copy
/@docs/blocks/qr
/@docs/blocks/hours
```

As páginas de uma pasta

flows.md · documentação · Blocos

@pdf

Uma página de um PDF enviado para este site, desenhada no meio do texto — a figura 3 de um relatório, o slide 12 de uma aula —, sem cortar a figura do documento. Só os bytes daquela página são baixados, e um clique abre o PDF no visualizador do site, naquela página.

Por que não está desenhado aqui

O @pdf desenha um arquivo que a página guarda: um PDF enviado para este site, com o endereço /f/… que ele ganhou. Estas páginas de documentação não guardam arquivos, então um @pdf aqui não teria o que desenhar.

O markdown

```@pdf src:/f/k3Fq9ZrX2mB7vT1wLp8sYa/relatorio-anual.pdf page:12 title:"Figura 3: vendas por trimestre"
```

flows.md · documentação · Blocos

@posts

As páginas de dentro de uma pasta como uma lista de posts, a mais nova primeiro: título, data e uma linha de cada. É o blog de um espaço.

Ao vivo

Esta página é uma pasta com três posts de exemplo dentro dela. Sem from:, o bloco lista as páginas da página em que está:

```@posts
```

A data é a do date: no ```meta do post — a de um post trazido de outro blog — ou, sem ela, o dia em que a página foi criada. A linha embaixo do título é a description:.

flows.md · documentação · Blocos

@profile

O topo de uma página de links: a foto, o nome, uma linha sobre a pessoa e uma fileira de ícones das redes.

Ao vivo

name: Ateliê Exemplo
bio: Cerâmica feita à mão em Porto Azul. Encomendas abertas toda segunda.
avatar: /demo/layout/person-1.svg
instagram: https://example.com/instagram
youtube: https://example.com/youtube
email: mailto:[email protected]

```@profile
name: Ateliê Exemplo
bio: Cerâmica feita à mão em Porto Azul. Encomendas abertas toda segunda.
avatar: /demo/layout/person-1.svg
instagram: https://example.com/instagram
youtube: https://example.com/youtube
email: mailto:[email protected]
```

Cada linha rede: endereço depois dos argumentos vira um ícone.

flows.md · documentação · Blocos

@qr

Um QR code desta página ou de outro endereço — para uma mesa, um slide, um cartaz, um cartão. Escuro sobre branco qualquer que seja o tema, para a câmera ler.

Ao vivo

Sem to:, o código abre a página em que está:

```@qr label:"Abra esta página no celular"
```

Variações

flows.md · documentação · Blocos

@reviews

Uma fileira de cartões de avaliação, cada um com as estrelas, o nome e o texto.

Ao vivo

title: O que dizem do Café Ladeira
★★★★★ Joana P.
O bolo de laranja é o melhor da cidade, e o café vem sempre na temperatura certa.
---
4/5 Otávio R.
Ambiente tranquilo para trabalhar. Faltam tomadas perto das janelas.
---
★★★★★ Lúcia M.
Encomendei um bolo sem glúten para um aniversário e chegou perfeito.

```@reviews
title: O que dizem do Café Ladeira
★★★★★ Joana P.
O bolo de laranja é o melhor da cidade, e o café vem sempre na temperatura certa.
---
4/5 Otávio R.
Ambiente tranquilo para trabalhar. Faltam tomadas perto das janelas.
---
★★★★★ Lúcia M.
Encomendei um bolo sem glúten para um aniversário e chegou perfeito.
```

Uma avaliação por bloco, separadas por ---: a primeira linha é a nota (★★★★☆ ou 4/5) e o nome; o resto é o texto.

flows.md · documentação · Blocos

:::rows

Uma lista de ajustes ou de fatos, uma linha por item: o título, uma dica embaixo, e na ponta o que a última linha do item tiver — um valor, um botão, um interruptor, um menu, uma etiqueta. É a tela de ajustes de um aplicativo, escrita em markdown.

Ao vivo

:::rows
**Notas dos leitores**

Quem lê pode marcar um trecho e deixar uma nota ao lado.

`switch:on`
---
**Resumo semanal por e-mail**

Toda segunda, o que mudou nas suas páginas.

`switch:off`
---
**Idioma**

`dropdown:Português`
---
**Plano**

`pill:accent:Pro`
---
[**Endereço e domínio**](/@docs/site)

`pill:warn:Esperando o DNS`
:::

Os itens se separam por ---. Uma linha cujo título é um link abre de qualquer ponto dela, com uma seta na ponta. Os controles são desenhados, não ligados a nada: mostram um estado, como numa captura de tela que se pode editar.

flows.md · documentação · Blocos

@schema

Declara os campos de uma coleção do espaço — a tabela que um @data lê e em que um @form grava — numa página, como qualquer outro texto.

Ao vivo

Os dois blocos abaixo estão nesta página e são de verdade: são eles que criam as coleções tarefas-exemplo (lida pelas páginas @data) e contato-exemplo (desenhada pelo @form, que aqui é só uma prévia). Você não vê nada entre esta linha e a próxima seção, e é isso mesmo: um leitor nunca vê a declaração.

Quem edita a página vê cada declaração como um cartão, com o estado da coleção (nova, igual, diferente) e um botão para aplicá-la. Só quem tem as configurações do espaço aplica.

O markdown

flows.md · documentação · Blocos

:::shell

A moldura de um aplicativo: uma coluna lateral — quase sempre um :::sidenav — ao lado da parte principal. Numa tela larga, é um painel com a coluna de largura fixa; no celular, ocupa a tela, a coluna sai, e uma primeira linha da parte principal que seja um link com vira a barra de voltar.

Ao vivo

:::shell
:::sidenav
**Conta**

[`icon:user` Perfil](/@docs/blocks/shell)

[`icon:settings` Preferências](/@docs/blocks/rows)
---
**Espaço**

[`icon:palette` Aparência](/@docs/blocks/tokens)
:::
---
[`icon:chevron-left` Ajustes](/@docs/blocks)

# Perfil

## Público

:::rows
**Nome**

`dropdown:Marta Exemplo`
---
**Aparecer na busca do site**

`switch:on`
:::
:::

O primeiro item é a coluna lateral, o segundo a parte principal. Na parte principal, um # é o título da tela, com uma linha fina embaixo, e um ## é um rótulo pequeno sobre um grupo de linhas, como numa tela de ajustes. O link da página que se está lendo fica marcado no :::sidenav.

flows.md · documentação · Blocos

:::tabs

Painéis que se revezam no mesmo lugar, uma aba cada: Detalhes, Histórico, Notas. Cada item, separado por ---, é uma aba; a primeira linha — um título, ou uma linha só em negrito — dá o nome dela.

Ao vivo

:::tabs
### Detalhes

Cliente: Café Ladeira · 24 canecas, esmalte azul.
---
### Histórico

Pedido feito em 10 mar; em produção desde 12 mar.
---
### Notas

Entregar pela porta dos fundos, antes das 10h.
:::

Sem script, todos os painéis ficam na página, cada um sob o nome dele. Com script, o leitor escolhe a aba (pelas setas do teclado também), e um link para qualquer coisa dentro de um painel abre o painel.

flows.md · documentação · Blocos

:::timeline

Uma sequência de passos ligados por uma linha: o rastreio de um pedido, um passo a passo, um histórico, um começo guiado. Cada item, separado por ---, é um passo.

Ao vivo

:::timeline
**Pedido feito** `state:done`

10 mar 2027 · pelo site
---
**Em produção** `state:current`

Torneando e esmaltando
---
**Enviado** `state:upcoming`

Previsão: 24 mar
:::

A primeira linha é o título; as outras, os detalhes. , current, upcoming, error ou skipped dão o marcador e dizem em palavras onde o passo está.

flows.md · documentação · Blocos

@tokens

Os tokens de um tema, desenhados: as cores como amostras com os códigos, e as fontes como um exemplo de texto. É a vitrine de um design system guardado numa página.

Ao vivo

Sem from:, o bloco desenha o tema que esta página veste — o da documentação:

```@tokens
```

O tema de outra página

flows.md · documentação · Blocos

@use

Um componente do tema que a página veste — um cartão de curso, um cartão de evento, um passo a passo —, preenchido com as palavras desta página. O desenho é do tema; as palavras são da página.

Por que não está desenhado aqui

Um componente mora num tema publicado: cada um é uma página do tema, com o desenho e os espaços (slots) que um @use preenche. O tema destas páginas não tem componentes, então um @use aqui não teria o que desenhar.

O markdown

```@use cartao-de-curso
titulo: Cerâmica para iniciantes
data: Sáb · 14 jun · 10h
link: https://example.com/inscricao
```

flows.md · documentação · Blocos

@video

Um player para um vídeo enviado para este site: com controles, e nada toca sozinho. Ou, com mode:background, o fundo silencioso e em loop de uma abertura.

Ao vivo

```@video src:/demo/gradiente.mp4 title:"Cinco segundos de gradiente" poster:/demo/layout/app-dashboard.svg
```

No seu espaço, src: é o endereço que o arquivo ganhou ao ser enviado: arraste o vídeo para a página no editor, ou use o upload do MCP, e o files mostra o markdown pronto.

De fundo, numa abertura

flows.md · documentação · Blocos

@whatsapp

O botão verde e redondo que abre uma conversa no WhatsApp, com a mensagem já escrita. Num site (uma página independente ou o template dela), fica no canto de baixo enquanto a página rola, acima de um aviso de cookies aberto. Em qualquer outro lugar, e no editor, aparece onde foi escrito.

Ao vivo

```@whatsapp number:"+55 11 95550-0134" message:"Olá! Vi o site e quero mais informações."
```

Aqui ele está com position:inline, para não flutuar sobre esta página. No template de um site, escreva sem position e ele vai para o canto.

Argumentos

flows.md · documentação · Blocos

Uma figura desenhada de uma lista. Cada tipo segue a geometria de referência do diagram-design (uma skill de diagramas editoriais, MIT), desenhada aqui pela própria página: as cores e as fontes vêm do tema, no claro e no escuro; o grid é de 4 px; um item só fica em destaque, na cor de acento; a figura tem nome e descrição para um leitor de tela; e o zoom e a tela cheia são os de qualquer diagrama.

Camadas

Faixas de largura inteira, empilhadas de cima para baixo: uma pilha, o modelo OSI, níveis de abstração. Cada linha é - Nome · detalhe, com uma etiqueta à esquerda ({tag:L5}) e o detalhe em mono à direita. top: e bottom: nomeiam a direção na margem; {focal} marca a camada em destaque; uma linha > citação vira a legenda em itálico.

title: AI app stack · Where the work actually happens
top: Abstraction
bottom: Silicon
- UI surface · chat, editor, canvas {tag:L5}
- Agent harness · tools, memory, loop {focal tag:L4}
- Prompt layer · system, few-shot, caching {tag:L3}
- SDK / client · auth, retries, streaming {tag:L2}
- Model weights · opus, sonnet, haiku {tag:L1}
> The harness is where most product differentiation actually lives — tools, memory, and the loop that stitches model calls into useful work.

```@diagram type:layers
title: AI app stack · Where the work actually happens
top: Abstraction
bottom: Silicon
- UI surface · chat, editor, canvas {tag:L5}
- Agent harness · tools, memory, loop {focal tag:L4}
- Prompt layer · system, few-shot, caching {tag:L3}
- SDK / client · auth, retries, streaming {tag:L2}
- Model weights · opus, sonnet, haiku {tag:L1}
> The harness is where most product differentiation actually lives — tools, memory, and the loop that stitches model calls into useful work.
```

Pirâmide e funil