Getting Started

This guide will walk you through setting up a simple Antispace app with a widget that echoes back the user's input.

Project Setup

Before we createa new project, let's install Antispace CLI that will help us develop our app.

Install Antispace CLI

Install the Antispace CLI using the following command:

  bun install -g @antispace/cli

This will install the CLI globally and give you access to the antispace command (or anti, if you hate typing).

Log in with the CLI

To log in with the Antispace CLI, you'll need a CLI token. You can find one in your Antispace dashboard under Settings > App Developer. Once you enable Developer Mode, you can copy the token from the page.

Next, run the following command to log in with the CLI and paste the token you copied from the dashboard:

anti login

Create a new project

Now that the CLI is authenticated, you can create a new project using the following command:

anti create

This will create a new project in the specified directory, set up the project scaffold and create an app. The project will have the following structire

.
├── package.json
├── tsconfig.json
├── types.d.ts // Type definitions for the app
└── src
    ├── ai // AI actions
    │   ├── actions
    │   │   └── index.ts // Individual function handlers
    │   └── index.ts // Main handler
    ├── manifest
    │   ├── functions.ts // (Optional) extracted function JSON definitions
    │   └── index.ts // Main manifest file
    └── ui
        ├── page.tsx // Page UI
        └── widget.tsx // Widget UI

You can now install dependencies and run the app using the following command:

anti dev

Viewing your widget

Since Antispace cannot access the endpoints running in your local environment, you will need to set up a tunnel so that Antispace can make requests to your local server.

Create a tunnel

There are multiple tools that can be used to create a tunnel, such as ngrok or cloudflared.

We recommend using cloudflared as it is free and easy to use.

To install cloudflared, run the following command or follow the instructions on the cloudflared page:

  brew install cloudflared

Once you have cloudflared installed, run the following command to create a tunnel:

cloudflared tunnel --url http://localhost:6100

This will create a tunnel and print out the URL that can be used to make requests to your local server.

In order to have Antispace make requests to your tunnel, you need to update your developer mode endpoint to use the tunnel URL. You can do this in your Antispace dashobard by clicking Settings > App Developer and entering the tunnel URL in the Endpoint field. If the field is not available, make sure you have Developer Mode enabled.

Handling User Interactions

Now that we have our app running, let's add some user interactions.

We will add a simple widget that echoes back the user's input.

Open src/ui/widget.tsx in your preferred code editor and make the following changes:

export default async function widgetUI(anti: AntispaceContext<MyAppUIActions>) {
  const { action, values, meta } = anti

  return (
    <Anti.Column align="center" justify="center">
      <Anti.Text align="center">
        ▼ {action === "run_echo" && values.textToEcho || "Antispace"}
      </Anti.Text>

      <Anti.Row justify="space-between">
        <Anti.Input name="textToEcho" placeholder="To echo or not to echo..." />
        <Anti.Button action="run_echo" text="Echo" />
      </Anti.Row>
    </Anti.Column>
  )
}

Once the user clicks the "Echo" button, the UI function will be called with the following values:

{
  "action": "run_echo",
  "values": {
    "textToEcho": "<input value>"
  },
  "meta": {
    "user": {
      "id": "<user id>",
      "name": "<user name>"
    }
  }
}

The UI function should always check the action and values properties and adjust the returned UI accordingly.

Building and Deploying

To build and deploy your app, you can use the Antispace CLI.

anti build

This will check for errors and build your app into an artifact that can be deployed to Antispace. To deploy your app, simply run:

anti deploy

After a few seconds, your app will be deployed and ready for private use or publishing.

Publishing

Once your app is deployed, you can publish it to the Antispace app directory. To do this, open the Manage URL provided by the CLI after the deployment, fill out missing details about your app, and click Publish.