> ## 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.

# Tutoriel : Document Generator

> Créez une véritable application Twenty qui génère des documents personnalisés à partir des données de votre CRM.

Dans ce tutoriel, vous allez créer **Document Generator** — une application qui transforme des modèles réutilisables
en documents personnalisés en utilisant les données déjà présentes dans votre CRM.

Rédigez un modèle une seule fois avec `{{placeholders}}`, puis générez un document rempli
pour n’importe quelle personne ou entreprise en un clic — depuis le menu de commande, depuis un
agent IA ou depuis un workflow.

<Frame caption="Un modèle, généré pour une personne spécifique, ouvert comme une page imprimable.">
  <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="Un document de proposition commerciale généré" width="1600" height="1178" data-path="images/docs/developers/extends/apps/document-generator/07-rendered-document.png" />
</Frame>

## Ce que vous apprendrez

Chaque chapitre ajoute une capacité. À la fin, vous aurez utilisé la plupart du SDK.

| Chapitre                                                                                                      | Capacité                                                                                                         | Référence                                                                     |
| ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| [1. Modèle de données](/l/fr/developers/extend/apps/tutorials/document-generator/data-model)                  | Objets, champs et une relation                                                                                   | [Données](/l/fr/developers/extend/apps/data/overview)                         |
| [2. Générer des documents](/l/fr/developers/extend/apps/tutorials/document-generator/generating-documents)    | Une fonction logique (outil IA + action de workflow) qui remplit un modèle Markdown et y joint un PDF soigné     | [Fonctions logiques](/l/fr/developers/extend/apps/logic/logic-functions)      |
| [3. Routes HTTP](/l/fr/developers/extend/apps/tutorials/document-generator/http-routes)                       | Servir du JSON et une page HTML partageable depuis des routes                                                    | [Fonctions logiques](/l/fr/developers/extend/apps/logic/logic-functions)      |
| [4. Créer l’interface utilisateur](/l/fr/developers/extend/apps/tutorials/document-generator/building-the-ui) | Vues, navigation, menu de commandes et composants frontaux qui prévisualisent un document et modifient un modèle | [Mise en page](/l/fr/developers/extend/apps/layout/overview)                  |
| [5. Un agent IA](/l/fr/developers/extend/apps/tutorials/document-generator/ai-agent)                          | Agent + compétence                                                                                               | [Compétences et agents](/l/fr/developers/extend/apps/logic/skills-and-agents) |
| [6. Publication](/l/fr/developers/extend/apps/tutorials/document-generator/publishing)                        | Publiez-la sur la place de marché                                                                                | [Publication](/l/fr/developers/extend/apps/operations/publishing)             |

## Prérequis

Vous devez avoir terminé le [démarrage rapide](/l/fr/developers/extend/apps/getting-started/quick-start) :
un serveur Twenty local en cours d’exécution sur le port `2020` et le CLI authentifié dessus.

Sinon, générez-en un et lancez-le maintenant :

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

<Note>
  Vous préférez lire le code finalisé ? L’application complète se trouve dans
  [`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator).
  Chaque extrait ci-dessous en est tiré.
</Note>

## Comment l’application s’assemble

<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="Un modèle avec des espaces réservés est transformé en un document soigné avec un PDF, déclenché depuis le menu de commandes, un agent IA, un workflow ou un lien partageable" width="900" height="380" data-path="images/docs/developers/extends/apps/document-generator/how-it-fits.svg" />
</Frame>

Vous rédigez un **modèle** une seule fois dans un éditeur de texte enrichi, avec `{{placeholders}}`. Choisir un
modèle et un enregistrement CRM remplit les espaces réservés et stocke un
**document** soigné (avec un fichier PDF). Tout le reste — le menu de commandes, l’agent IA,
l’étape de workflow, le lien partageable — n’est qu’une façon différente de déclencher ce
même générateur.

## Gardez cette boucle en marche

Laissez `yarn twenty dev` s’exécuter dans un terminal pendant tout le tutoriel. Chaque fois que
vous ajoutez ou modifiez un fichier sous `src/`, il est resynchronisé avec votre serveur en quelques
secondes, afin que vous puissiez voir chaque capacité apparaître dans l’interface utilisateur au fur et à mesure que vous la construisez.

<Card title="Commencez à construire →" icon="database" href="/l/fr/developers/extend/apps/tutorials/document-generator/data-model">
  Chapitre 1 : modéliser des documents et des modèles.
</Card>