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

# Create an app

> Create an app and find your way around its files.

Create an app against a host product’s contract to use its components, tools, and slots. You need Node.js, a package manager, and the host’s Patchsmith API URL. Start with the Patchsmith command-line interface (CLI):

```sh theme={null}
npx patchsmith@beta init
```

Follow the prompts for your app name and the product's Patchsmith API URL. The CLI reads its contract, creates a starter app, and generates bindings for its capabilities.

## App structure

These are the main files for a host with a `panel` slot and a `/` view:

<Tree>
  <Tree.Folder name="my-app" defaultOpen>
    <Tree.Folder name="src" defaultOpen>
      <Tree.Folder name="slots" defaultOpen>
        <Tree.Folder name="panel" defaultOpen>
          <Tree.File name="index.view.tsx" />
        </Tree.Folder>
      </Tree.Folder>

      <Tree.Folder name="functions" defaultOpen>
        <Tree.File name="greeting.ts" />
      </Tree.Folder>

      <Tree.Folder name="db">
        <Tree.File name="index.ts" />

        <Tree.File name="schema.ts" />

        <Tree.File name="relations.ts" />

        <Tree.Folder name="migrations" />
      </Tree.Folder>

      <Tree.File name="root.tsx" />

      <Tree.File name="server.ts" />

      <Tree.File name="patchsmith.gen.ts" />
    </Tree.Folder>

    <Tree.File name="patchsmith.config.ts" />

    <Tree.File name="vite.config.ts" />

    <Tree.File name="package.json" />

    <Tree.File name="tsconfig.json" />
  </Tree.Folder>
</Tree>

Use these files to add UI, backend logic, and configuration:

| Location | Purpose |
| - | - |
| `src/slots/` | UI views, grouped by slot. |
| `src/root.tsx` | The shared UI shell. |
| `src/functions/` and `src/server.ts` | Backend functions and their registration. |
| `src/db/` | Database schema, connection, and migrations. |
| `src/patchsmith.gen.ts` | Generated components, tools, and types; refreshed by `patchsmith generate`. |
| `patchsmith.config.ts` | The host URL and app logos. |
| `vite.config.ts` | Build configuration. |

Start by [writing UI for a slot](/docs/writing-apps/ui).


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