# Integrate Azion Console & API with Console Kit

Azion **Console Kit** allows you to craft a custom Azion interface to fit your business needs. In this guide, you'll learn how to show more information from the Azion API on the Console.

:::caution[warning]
To follow this guide, you must first [setup your Console Kit project](/en/documentation/devtools/console-kit/#setting-up-a-project) on a forked repository in your account and initialize the project using Azion CLI to run it locally. Then, you can work on changing the forked version of the Azion Console and, once you're done, deliver the project to the edge using the CLI.
:::

To integrate *external APIs* with the Azion Console interface, you can create a new API Axios service under `src/services/axios`, adapt each service as required, and follow the steps below.

---

## Get data from the Azion API and show on the Console interface

In this example, you'll modify a service in the Console to show two additional fields from the Azion API in the cache settings table of the application. 

The goal is to show the TTL values for browser and cache, informed by the `browser_cache_settings_maximum_ttl` and `cdn_cache_settings_maximum_ttl` properties in the [Cache Settings API](https://api.azion.com/#ea84ca72-db97-44fc-88c5-30fb236f8fa6). To do so:

1. Open the Console Kit project in your IDE.
2. Run `azion dev` to initialize a local development server.
3. In the `src/services` folder, locate the `list-cache-settings-service.js` and add the new properties to the map:

```javascript title="src/services/edge-application-cache-settings-services/list-cache-settings-service.js"
const adapt = (httpResponse) => {
  const parseHttpResponse = httpResponse.body.results.map((cacheSettings) => ({
    id: cacheSettings.id.toString(),
    name: cacheSettings.name,
    browserCache: cacheSettings.browser_cache_settings,
    cdnCache: cacheSettings.cdn_cache_settings,
    // initialize the following references based on the API fields
    browserCacheTtl: cacheSettings.browser_cache_settings_maximum_ttl,
    edgeCacheTtl: cacheSettings.cdn_cache_settings_maximum_ttl
  }))

  return {
    body: parseHttpResponse,
    statusCode: httpResponse.statusCode
  }
}
```

4. Now locate the **Cache Settings** list view and modify it as follows:

```javascript title="src/views/EdgeApplicationsCacheSettings/ListView.vue"
  const getColumns = computed(() => {
    return [
      {
        field: 'name',
        header: 'Origin Name'
      },
      {
        field: 'browserCache',
        header: 'Browser Cache'
      },
      // create the browser cache TTL column
      {
        field: 'browserCacheTtl',
        header: 'Browser Cache TTL'
      },
      {
        field: 'cdnCache',
        header: 'Cache'
      },
      // create the edge cache TTL column
      {
        field: 'edgeCacheTtl',
        header: 'Cache TTL'
      }
    ]
  })
```

5. On the browser, access the localhost address and navigate to the **Applications** page.
6. Create an application or select an existing one.
7. Navigate to the **Cache Settings** tab. You should now see the new columns appear in the UI.
8. After you're done, run `azion deploy` to launch the changes to the edge.

You can follow this same process to show additional API values by retrieving the property using the service and adding it to the table.