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

# Quickstart: publish your first app

> Build a small web app with the AI builder and publish it to your own noclick.app subdomain.

Workflows can have an interface: a grid of blocks (forms, text, results) that you publish as a standalone web app. In this quickstart you build one and put it live.

<Steps>
  <Step title="Describe the app">
    From the dashboard, click **New Workflow** and describe the app in the chat. For example:

    ```text theme={null}
    A form that takes a topic and generates a tweet draft
    ```

    The builder creates the workflow and the interface blocks that go with it: a form for the topic, and an output area for the draft.
  </Step>

  <Step title="Open the Interface tab">
    Switch to the **Interface** tab in the canvas top bar (shortcut `I`). This is the visual editor for your app.

    <Frame caption="The Interface tab with the generated form and output blocks.">
      <img src="https://mintcdn.com/noclickinc/S0vAQNsUH_SVp_WL/images/getting-started/quickstart-app-1.png?fit=max&auto=format&n=S0vAQNsUH_SVp_WL&q=85&s=aaba3e758ce3b8c94cf146f6299988e8" alt="Interface editor showing blocks arranged on a grid" width="2880" height="1800" data-path="images/getting-started/quickstart-app-1.png" />
    </Frame>
  </Step>

  <Step title="Arrange the blocks">
    Drag blocks around the grid and resize them until the layout looks right. See [Interface blocks](/apps/blocks) for the full set of block types you can add.
  </Step>

  <Step title="Publish">
    Switch back to the **Workflow** tab and click the **Publish** pill at the top right of your app block's header. (A white **Publish** button also appears at the top right of the **Interface** tab.)

    <Frame caption="The Publish pill at the top right of the HTML/React block.">
      <img src="https://mintcdn.com/noclickinc/EkLvaRriDAJ_oGAx/images/apps/publish-button.png?fit=max&auto=format&n=EkLvaRriDAJ_oGAx&q=85&s=adeb3091faa40081c3c2fa38b9d0d749" alt="HTML/React interface block on the canvas with the Publish pill at the top right of its header" width="1002" height="832" data-path="images/apps/publish-button.png" />
    </Frame>

    In the **Publish to Web** dialog, type a subdomain for `https://[subdomain].noclick.app`. Availability is checked as you type. Then click **Publish**.

    <Frame caption="The Publish to Web dialog with the subdomain picker.">
      <img src="https://mintcdn.com/noclickinc/M99Xyd8Ho6Jf17gu/images/getting-started/quickstart-app-2.png?fit=max&auto=format&n=M99Xyd8Ho6Jf17gu&q=85&s=a13fcfaae48fcf09275dd7c28b835af1" alt="Publish to Web dialog showing the subdomain input and availability check" width="880" height="716" data-path="images/getting-started/quickstart-app-2.png" />
    </Frame>
  </Step>

  <Step title="Open your app">
    Your app is live at `https://yoursubdomain.noclick.app`. Share the link with anyone.

    <Frame caption="The published app, live on its noclick.app subdomain.">
      <img src="https://mintcdn.com/noclickinc/M99Xyd8Ho6Jf17gu/images/getting-started/quickstart-app-3.png?fit=max&auto=format&n=M99Xyd8Ho6Jf17gu&q=85&s=55f0658a825d7f684d8a7ff6ba51b2b2" alt="Published app rendered in a browser at its noclick.app URL" width="2880" height="1800" data-path="images/getting-started/quickstart-app-3.png" />
    </Frame>
  </Step>
</Steps>

After publishing, the button changes to **Update** (push your latest changes) and **Unpublish**. Manage all your published apps in **Settings → Published Apps**.

## Next steps

<CardGroup cols={2}>
  <Card title="Publishing" icon="globe" href="/apps/publishing">
    Updating, unpublishing, and managing published apps.
  </Card>

  <Card title="Custom components" icon="code" href="/apps/custom-components">
    Build your own React blocks when the built-in ones aren't enough.
  </Card>
</CardGroup>
