# Connect your Hygraph project to Cloudinary
Learn how to connect your Hygraph project to Cloudinary.
Cloudinary empowers companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media.
**Warning:**
The Cloudinary UIX has been deprecated. If you are using it, you need to replace it with the App. Here is a step-by-step guide on how to do it.
## What you can do with the Hygraph-Cloudinary integration
- You can continue to use Cloudinary as your preferred DAM solution for images, videos, and other digital assets, in a similar way that you would [use assets](https://hygraph.com/docs/api-reference/assets/assets-overview) hosted by Hygraph.
## Prerequisites to use this integration
- You must have a Hygraph account. If you don't have one, you can create one [here](https://app.hygraph.com/signup).
- You must have an Cloudinary account. If you don't have one, you can create one [here](https://cloudinary.com/users/register/free).
**Warning:**
**Apps are environment specific**. This means their configuration is applied per environment. Take this into consideration if you're working with a project using more than one environment.
## Install the Cloudinary app
[Click here](https://hygraph.com/marketplace/apps/hygraph-cloudinary-app) to install the Cloudinary App on Hygraph, then follow these steps:
[Video: Cloudinary installation](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9x96hhu4n07vx29st0ju3)
1. In the dropdown, select which project you want to install the app in, then click on the `Add App` button. You should be redirected to the **Configure Cloudinary** section of your Hygraph project.
2. Fill in the `Cloud Name` and `API Key` fields using the information available in the **Account Details** section of [your Cloudinary account](https://cloudinary.com/console/).
3. Click on the `Submit` button. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.
## Add the Cloudinary asset field to a model
[Video: Add the Cloudinary asset field to a model](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9x94gjarj07w58zrzu6bo)
1. Navigate to the **Schema** builder.
2. Select the model that you would like to add the **Cloudinary Asset** field to.
3. Select the **Cloudinary Asset** field from the **Add fields** right sidebar.
4. Complete the `Display name` field, and the `API ID` will be auto-filled by the system. Optionally, you can also add a `Description`. This screen allows you to control different properties of your **Cloudinary asset** field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the `Field options` section of the screen.
5. Click on the `Create` button.
## Use the Cloudinary asset field in Hygraph
To use the Cloudinary asset field in Hygraph, navigate to the **Content Editor** and select the model you added the **Cloudinary Asset** field to.
1. Click on the `Add from Cloudinary` button to select an asset hosted in your Cloudinary account.
2. In the Cloudinary Media Library, select the asset, and then click **Add & close**. You can also click **Upload** to select files from your computer and upload them to the linked Cloudinary account. You can then choose to add those files in the content entry.
If your `Cloudinary asset picker` schema configuration allows multiple values, you will be able to select multiple assets in a content entry as a result. You can use the six-dot handle to reorder these assets by dragging and dropping them in the order you want:
You can also click on the `X` on the right of an asset card to remove it form the list.
**Warning:**
If you wish to link data from an existing Cloudinary account using a script, please read [this document](https://cloudinary.com/documentation/media_library_widget).
## Query your Cloudinary assets
You can query the Cloudinary assets used in your Hygraph project using our [API Playground,](https://hygraph.com/docs/api-reference/basics/api-playground) which you will find on the left side menu of your Hygraph project.
Find additional information on how to query content in Hygraph [here](https://hygraph.com/docs/getting-started/api-playground-queries).
### Update Cloudinary field data
In some cases it can be necessary to update Cloudinary data stored in Hygraph, due to an event that happened in Cloudinary - such as an update to an asset's metadata. You can use the following flow to do this:
1. Create a simple function, such as a lambda, that can catch a webhook from Cloudinary.
2. Using the information in the webhook, such as the asset ID, find the corresponding entries in Hygraph that reference this asset. You can use [`JSON` filters](https://hygraph.com/docs/api-reference/content-api/filtering#json-filtering) to search for IDs in the underlying Cloudinary fields. It's also possible to filter on Cloudinary fields inside components, using the [basic](https://hygraph.com/docs/api-reference/content-api/filtering#basic-component) and [modular component filters](https://hygraph.com/docs/api-reference/content-api/filtering#modular-component).
3. Update the fields in Hygraph using [mutations](https://hygraph.com/docs/api-reference/content-api/mutations).
## How to replace the UIX with the new app
**Warning:**
Before you delete the Cloudinary UIX, make sure that you have the **Cloud Name** and **API Key** in a safe place. You will need them to setup the app.
Here is the step-by-step guide on how to install the Cloudinary app for Hygraph to replace the UIX.
1. Remove the Cloudinary UIX from your project. To do that, go to **Settings > UI Extensions**. Click on the three dots, then click on the `Remove` button.
2. [Click here](https://app.hygraph.com/apps/cloudinary/new) to install the Cloudinary app.
3. Select your project in the dropdown, then click on `Add App`.
4. Enter the `Cloud Name` and `API Key` in the fields, then click `Submit` to save the settings.
5. Now, go to the **Schema** editor and open the model that you are using the **Cloudinary asset** field in.
6. Click on `Edit Field`. On the left top corner of the dialog, click on the dropdown, then click on `Cloudinary asset`. Finally, click on the `Update` button.
## Resources
- Click [here](https://cloudinary.com/documentation) to access Cloudinary's online documentation.