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

# Creating an app

> Learn how to build your first app with the App SDK

<Steps>
  <Step title="Create a developer account">
    Head over to our [Developer console](https://build.attio.com) and sign in with your Attio account.

    <img className="dark:hidden" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/build-attio-screenshot.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=1b83eb3812e896c7f7f445a510729fdd" data-path="images/build-attio-screenshot.png" />

    <img className="hidden dark:block" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/build-attio-screenshot-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=b5388afeb4036738dd61910bccd21b59" data-path="images/build-attio-screenshot-dark.png" />

    Then, create a developer account. You should set the name of your account to the name of your company
    or organization.

    <img className="dark:hidden" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/developer-account-creation.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=92ee26865339c13468b279d52e3b3098" data-path="images/developer-account-creation.png" />

    <img className="hidden dark:block" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/developer-account-creation-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=67ecee55a5c3518db59255adb9a59a68" data-path="images/developer-account-creation-dark.png" />
  </Step>

  <Step title="Create a new app">
    Now that you've created a developer account, let's create an app.

    Fill in the app's name and ensure it has a unique slug.
  </Step>

  <Step title="Initialize your app">
    Now that you've created your app, let's download your app's starter code. You can do this by following the quickstart instructions in the Developer console's app information tab, or follow these instructions:

    Fire up your favorite terminal and enter:

    ```bash theme={"system"}
    npm create attio@latest [your-app-slug]
    ```

    For example, if your app slug is `my-first-app` you would enter:

    ```bash theme={"system"}
    npm create attio@latest my-first-app
    ```

    <Note>
      Always include `@latest` when creating a new app. Without it, npm may use an older, cached
      version of the `attio` package. To update the `attio` package in an existing app, run
      `npm install attio@latest`.
    </Note>

    <Tip>Your app slug can be found on the app details page in our [Developer console](https://build.attio.com).</Tip>
  </Step>

  <Step title="Install dependencies">
    Next you need to `cd` into the newly created project folder and run:

    ```bash theme={"system"}
    npm install
    ```
  </Step>

  <Step title="Start development server">
    Now that's complete, all that's left to do is start running your app locally. To do this run:

    ```bash theme={"system"}
    npm run dev
    ```

    It will ask you to choose a workspace to develop your app in. Once you choose a workspace you will be redirected to install the app.

    <Tip>
      We recommend creating a separate workspace for development that isn't your main production Attio
      workspace.
    </Tip>
  </Step>

  <Step title="Install your app">
    Once you've chosen a workspace, you'll be asked to press `i` to be directed to the install app page where you can install your app in the chosen workspace.
  </Step>

  <Step title="Try out your app">
    Now that your app is installed, let's take a look at the example action we've added to Attio.

    Head over to any record page. Click the three dots overflow menu button and you should see your app's name listed as an option.

    <img className="dark:hidden" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/app-action-button.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=27a3165a94691fa038b6d269141bbd80" data-path="images/app-action-button.png" />

    <img className="hidden dark:block" width="640" height="450" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/app-action-button-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=57f3ce71bc66c1242a4f7e7acda573c4" data-path="images/app-action-button-dark.png" />

    Click it, and it will reveal a dialog.

    Congratulations! Your app is now running inside Attio.
  </Step>

  <Step title="Make changes">
    Let's try editing the dialog code. The example action lives in its own folder under `src/app/extensions/`. Open it and head over to the dialog component next to `extension.tsx`. Try changing some of the code in the dialog.

    Hit save. Head back to Attio, close your dialog and re-open it by clicking the action button again. You should see your changes live.

    Well done! You're now well on your way to building apps in Attio.
  </Step>
</Steps>

## Next steps

Your new app is organized by folder convention: every UI extension lives in its own folder under `src/app/extensions/`. Read [App structure](../extensions/overview) to see how the pieces fit together, then explore what you can build in the [App SDK overview](../overview).
