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

# Tutorial: Document Generator

> Build a real Upshift app that generates personalized documents from your data.

In this tutorial you'll build **Document Generator** — an app that turns reusable
templates into personalized documents using the data already in Upshift.

Write a template once with `{{placeholders}}`, then generate a filled-in
document for any Person or Company in one click — from the command menu, from an
AI agent, or from a workflow.

![A generated Sales proposal document](https://mintcdn.com/exceev-group/1cFKDdENVawzNm26/images/docs/developers/extends/apps/document-generator/07-rendered-document.png?fit=max\&auto=format\&n=1cFKDdENVawzNm26\&q=85\&s=9f3cea5581fa05694f7b4e92f194d675)

One template, generated for a specific person, opened as a printable page.

## What you'll learn

Each chapter adds one capability. By the end you'll have touched most of the SDK.

| Chapter | Capability | Reference |
| - | - | - |
| [1. Data model](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/data-model.md) | Objects, fields, and a relation | [Data](https://docs.upshiftcloud.com/en/developers/extend/apps/data/overview.md) |
| [2. Generating documents](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/generating-documents.md) | A logic function (AI tool + workflow action) that fills a Markdown template and attaches a polished PDF | [Logic functions](https://docs.upshiftcloud.com/en/developers/extend/apps/logic/logic-functions.md) |
| [3. HTTP routes](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/http-routes.md) | Serving JSON and a shareable HTML page from routes | [Logic functions](https://docs.upshiftcloud.com/en/developers/extend/apps/logic/logic-functions.md) |
| [4. Building the UI](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/building-the-ui.md) | Views, navigation, command menu, and front components that preview a document and edit a template | [Layout](https://docs.upshiftcloud.com/en/developers/extend/apps/layout/overview.md) |
| [5. An AI agent](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/ai-agent.md) | Agent + skill | [Skills & agents](https://docs.upshiftcloud.com/en/developers/extend/apps/logic/skills-and-agents.md) |
| [6. Publishing](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/publishing.md) | Ship it to the marketplace | [Publishing](https://docs.upshiftcloud.com/en/developers/extend/apps/operations/publishing.md) |

## Prerequisites

You should have finished the [Quick Start](https://docs.upshiftcloud.com/en/developers/extend/apps/getting-started/quick-start.md):
a local Upshift server running on port `2020` and the CLI authenticated to it.

If not, scaffold and start one now:

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

> [!NOTE]
>
> Prefer to read the finished code? The complete app lives in
> [`packages/twenty-apps/examples/document-generator`](https://github.com/exceev-technology/upshift/tree/main/packages/twenty-apps/examples/document-generator).
> Every snippet below is copied from it.

## How the app fits together

![A template with placeholders is generated into a polished document with a PDF, triggered from the command menu, an AI agent, a workflow, or a shareable link](https://mintcdn.com/exceev-group/1cFKDdENVawzNm26/images/docs/developers/extends/apps/document-generator/how-it-fits.svg?fit=max\&auto=format\&n=1cFKDdENVawzNm26\&q=85\&s=170a865069715e9dc919739bafb20f04)

You write a **template** once in a rich-text editor, with `{{placeholders}}`. Picking a
template and a record fills the placeholders and stores a polished
**document** (with a PDF file). Everything else — the command menu, the AI agent,
the workflow step, the shareable link — is just a different way to trigger that
one generator.

## Keep this loop running

Leave `yarn twenty dev` running in a terminal for the whole tutorial. Every time
you add or edit a file under `src/`, it re-syncs to your server within a few
seconds, so you can watch each capability appear in the UI as you build it.

> **[Start building →](https://docs.upshiftcloud.com/en/developers/extend/apps/tutorials/document-generator/data-model.md)**
>
> Chapter 1: model documents and templates.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.