> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tutorial: Gerador de Documentos

> Crie um aplicativo Twenty real que gera documentos personalizados a partir dos seus dados de CRM.

Neste tutorial, você vai criar o **Gerador de Documentos** — um aplicativo que transforma modelos reutilizáveis
em documentos personalizados usando os dados que você já tem no seu CRM.

Escreva um modelo uma vez com `{{placeholders}}` e, em seguida, gere um documento preenchido para qualquer Pessoa ou Empresa com um clique — a partir do menu de comandos, de um agente de IA ou de um fluxo de trabalho.

<Frame caption="Um modelo, gerado para uma pessoa específica, aberto como uma página para impressão.">
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/07-rendered-document.png?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=8b99ef8465512b51a2f7233518a869d2" alt="Um documento de proposta de vendas gerado" width="1600" height="1178" data-path="images/docs/developers/extends/apps/document-generator/07-rendered-document.png" />
</Frame>

## O que você vai aprender

Cada capítulo adiciona uma capacidade. Ao final, você terá usado a maior parte do SDK.

| Capítulo                                                                                                   | Capacidade                                                                                                                 | Referência                                                                    |
| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| [1. Modelo de Dados](/l/pt/developers/extend/apps/tutorials/document-generator/data-model)                 | Objetos, campos e uma relação                                                                                              | [Dados](/l/pt/developers/extend/apps/data/overview)                           |
| [2. Geração de documentos](/l/pt/developers/extend/apps/tutorials/document-generator/generating-documents) | Uma função lógica (ferramenta de IA + ação de fluxo de trabalho) que preenche um modelo Markdown e anexa um PDF finalizado | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions)         |
| [3. Rotas HTTP](/l/pt/developers/extend/apps/tutorials/document-generator/http-routes)                     | Servindo JSON e uma página HTML compartilhável a partir de rotas                                                           | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions)         |
| [4. Criando a UI](/l/pt/developers/extend/apps/tutorials/document-generator/building-the-ui)               | Vistas, navegação, menu de comandos e componentes de front-end que pré-visualizam um documento e editam um modelo          | [Layout](/l/pt/developers/extend/apps/layout/overview)                        |
| [5. Um agente de IA](/l/pt/developers/extend/apps/tutorials/document-generator/ai-agent)                   | Agente + habilidade                                                                                                        | [Habilidades e Agentes](/l/pt/developers/extend/apps/logic/skills-and-agents) |
| [6. Publicação](/l/pt/developers/extend/apps/tutorials/document-generator/publishing)                      | Envie-o para o marketplace                                                                                                 | [Publicação](/l/pt/developers/extend/apps/operations/publishing)              |

## Pré-requisitos

Você deve ter concluído o [Quick Start](/l/pt/developers/extend/apps/getting-started/quick-start):
um servidor Twenty local em execução na porta `2020` e o CLI autenticado nele.

Se não, gere a estrutura e inicie um agora:

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest document-generator
cd document-generator
yarn twenty dev
```

<Note>
  Prefere ler o código finalizado? O aplicativo completo está em
  [`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator).
  Cada trecho abaixo foi copiado de lá.
</Note>

## Como o aplicativo se encaixa

<Frame>
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/how-it-fits.svg?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=5a4ecd9077a5d8a07d46ae5c1dee1439" alt="Um modelo com placeholders é transformado em um documento finalizado com um PDF, acionado a partir do menu de comandos, de um agente de IA, de um fluxo de trabalho ou de um link compartilhável" width="900" height="380" data-path="images/docs/developers/extends/apps/document-generator/how-it-fits.svg" />
</Frame>

Você escreve um **modelo** uma vez em um editor de texto rico, com `{{placeholders}}`. Escolher um
modelo e um registro de CRM preenche os placeholders e armazena um
**documento** finalizado (com um arquivo PDF). Todo o resto — o menu de comandos, o agente de IA, a etapa do fluxo de trabalho, o link compartilhável — é apenas uma forma diferente de acionar aquele único gerador.

## Mantenha este ciclo em execução

Deixe `yarn twenty dev` rodando em um terminal durante todo o tutorial. Toda vez que
você adicionar ou editar um arquivo em `src/`, ele será ressíncronizado com o seu servidor em alguns
segundos, para que você possa ver cada capacidade aparecer na UI conforme a constrói.

<Card title="Comece a construir →" icon="database" href="/l/pt/developers/extend/apps/tutorials/document-generator/data-model">
  Capítulo 1: modele documentos e modelos de documento.
</Card>