# Remote actions: trigger an API request with a UI element
{% hint style="info" %}
[Upgrade your free account](/get-started/unlock-power-features-to-create-interactive-apps.md) to the **Solo Plan** to use this feature.
{% endhint %}
**Remote actions** allow you to trigger an API request as an action.
This tutorial is a continuation after you have set up an API request. If you haven't done that yet, check out:
👉 [Connect to any API: GET request](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md)\
👉 [Connect to any API: DELETE request](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-delete-request.md)\
👉 [What are remote actions (a.k.a. CRUD operations)?](https://www.codecademy.com/articles/what-is-crud)
💡 We're using [this design file](https://www.figma.com/file/Qnj8dA7J3bFwUl5Al73ATL/To-Do-app?node-id=0%3A1) and [this Airtable](https://airtable.com/shrWs599TQVT14tCJ) for the tutorial.
## How to add remote actions to your design
This is part of the **Data** **Binding** of an app project. *Binding* is the action of connecting data sources (content, API request, etc.) to app UI (text, button, etc.)
1\. In your design, **add the remote action Tag** `[action:remote]` to a UI element. This Tag will allow you to connect an API request to an element.\
(The sample design file already included the tag in the layer name of the checkmark icon.)
{% hint style="info" %}
**Pro tip**: You can add custom variables that can be used later in your API requests, by adding them in the tag in the following way:\
\ `[action:remote:var1=value1;var2=value2;var3:value3]`
\*Note this only works with strings, not booleans or any other data type.\
\
[Learn more about variables](/connect-api/request-url-variables.md)
{% endhint %}
2\. In your app project page, click on the app screen with the remote action Tag to **enter Data Binding mode**.
3\. In order to use remote action, you must have remote data. So first, we will connect a list of content to this app screen. Select the **collection** and **GET request** you previously created in the Data Library.
4\. **Bind the content** to your app UI. ([Check out the tutorial here](/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable.md))\
In this example, we're binding the list of tasks from Airtable to the "task item" container.
5\. Check **Bravo Vision** to see if you have correctly bound the data.
6\. Now we will bind the remote action that will affect the remote data. **Select the UI element with the remote action Tag.**\
In the example, we are binding the DELETE request to the checkmark icon.
7\. In the Remote action dropdown, **select the API request** you want to perform. In this example, we are using a DELETE request to delete the task from the database after completing it.
8\. \[OPTIONAL] **Set up a confirmation message** that will display as an alert dialog when the user clicks the response action element. The dialog button will always be `Yes` and `Cancel`.
9\. Set up the **Response Actions**, which is feedback to let the user know if the remote action is successful or not.
**Show Alert**: Display a pop-up message.\
**Go To Page**: Redirects user to another page in the app.\
**Open URL**: Opens the web browser on the phone with the specified URL.\
**Refresh**: Refreshes the current page
10\. Test out your remote action in Bravo Vision! 📱
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.bravostudio.app/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.