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

# Architektura

> How Twenty apps work — sandboxing, lifecycle, and the building blocks.

Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.

## How apps work

An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.

```
your-app/
├── src/
│   ├── application-config.ts    ← defineApplication (required, one per app)
│   ├── roles/                   ← defineRole
│   ├── objects/                 ← defineObject
│   ├── fields/                  ← defineField
│   ├── logic-functions/         ← defineLogicFunction
│   ├── front-components/        ← defineFrontComponent
│   ├── skills/                  ← defineSkill
│   ├── agents/                  ← defineAgent
│   ├── views/                   ← defineView
│   ├── navigation-menu-items/   ← defineNavigationMenuItem
│   └── page-layouts/            ← definePageLayout
├── public/                      ← Static assets (images, icons)
└── package.json
```

<Note>
  **File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>

## Entity types

| Entita                   | Účel                                      | Dokumentace                                                       |
| ------------------------ | ----------------------------------------- | ----------------------------------------------------------------- |
| **Application**          | App identity, permissions, variables      | [Data Model](/l/cs/developers/extend/apps/data-model)             |
| **Role**                 | Permission sets for objects and fields    | [Data Model](/l/cs/developers/extend/apps/data-model)             |
| **Objekt**               | Custom data tables with fields            | [Data Model](/l/cs/developers/extend/apps/data-model)             |
| **Pole**                 | Extend existing objects, define relations | [Data Model](/l/cs/developers/extend/apps/data-model)             |
| **Logic Function**       | Server-side TypeScript with triggers      | [Logické funkce](/l/cs/developers/extend/apps/logic-functions)    |
| **Front Component**      | Sandboxed React UI in Twenty's page       | [Front Components](/l/cs/developers/extend/apps/front-components) |
| **Skill**                | Reusable AI agent instructions            | [Skills & Agents](/l/cs/developers/extend/apps/skills-and-agents) |
| **Agent**                | AI assistants with custom prompts         | [Skills & Agents](/l/cs/developers/extend/apps/skills-and-agents) |
| **View**                 | Pre-configured record list views          | [Layout](/l/cs/developers/extend/apps/layout)                     |
| **Navigation Menu Item** | Custom sidebar entries                    | [Layout](/l/cs/developers/extend/apps/layout)                     |
| **Page Layout**          | Custom record page tabs and widgets       | [Layout](/l/cs/developers/extend/apps/layout)                     |

## Sandboxing

* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.

## App lifecycle

```
┌─────────────────────────────────────────────────────────┐
│ Development                                             │
│   npx create-twenty-app → yarn twenty dev (live sync)   │
├─────────────────────────────────────────────────────────┤
│ Build & Deploy                                          │
│   yarn twenty build → yarn twenty deploy                │
├─────────────────────────────────────────────────────────┤
│ Install flow                                            │
│   upload → [pre-install] → metadata migration →         │
│   generate SDK → [post-install]                         │
├─────────────────────────────────────────────────────────┤
│ Publish                                                 │
│   npm publish → appears in Twenty marketplace           │
└─────────────────────────────────────────────────────────┘
```

* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/cs/developers/extend/apps/logic-functions) for details.

## Další kroky

<CardGroup cols={2}>
  <Card title="Datový model" icon="database" href="/l/cs/developers/extend/apps/data-model">
    Define objects, fields, roles, and relations.
  </Card>

  <Card title="Logické funkce" icon="bolt" href="/l/cs/developers/extend/apps/logic-functions">
    Server-side functions with HTTP, cron, and event triggers.
  </Card>

  <Card title="Frontendové komponenty" icon="window-maximize" href="/l/cs/developers/extend/apps/front-components">
    Sandboxed React components inside Twenty's UI.
  </Card>

  <Card title="Rozvržení" icon="table-columns" href="/l/cs/developers/extend/apps/layout">
    Views, navigation items, and record page layouts.
  </Card>

  <Card title="Dovednosti a agenti" icon="robot" href="/l/cs/developers/extend/apps/skills-and-agents">
    AI skills and agents with custom prompts.
  </Card>

  <Card title="CLI & Testing" icon="terminal" href="/l/cs/developers/extend/apps/cli-and-testing">
    CLI commands, testing, assets, remotes, and CI.
  </Card>

  <Card title="Publikování" icon="rocket" href="/l/cs/developers/extend/apps/publishing">
    Deploy to a server or publish to the marketplace.
  </Card>
</CardGroup>