Cost Insights logo

Backstage Cost Insights Plugin

Visualize, understand and optimize your cloud costs.

Created by Spotify

Set up Backstage in minutes with Roadie

Charts showing cloud costs over time and compared to other services.

Installation steps

Install the plugin into your Backstage instance.

yarn add @backstage/plugin-cost-insights

Create a CostInsights client which implements the CostInsightsApi interface.

Cost Insights currently does not provide a CostInsightsApi client out of the box, but there are templates and examples in the Backstage repo. Here's an exploration into Cost Insights for AWS.

// path/to/CostInsightsClient.ts
import { CostInsightsApi } from '@backstage/plugin-cost-insights';

export class CostInsightsClient implements CostInsightsApi { ... }

Import the client and the CostInsights plugin API to your Backstage instance.

// packages/app/src/api.ts
import { createApiFactory } from '@backstage/core';
import { costInsightsApiRef } from '@backstage/plugin-cost-insights';
import { CostInsightsClient } from './path/to/file';

export const apis = [
    api: costInsightsApiRef,
    deps: {},
    factory: () => new CostInsightsClient(),

Add the CostInsightsPage extension to your App.tsx file.

// packages/app/App.tsx
import { CostInsightsPage } from '@backstage/plugin-cost-insights';

  <Route path="/cost-insights" element={<CostInsightsPage />} />

Add plugin to your sidebar.

// packages/app/src/sidebar.tsx
export const AppSidebar = () => (
    <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />

Found a mistake? Update these instructions.

Things to know

To learn more about the Cost Insights plugin and how it is used inside Spotify, check out this RedMonk interview with Cost Insights product manager Janisa Anandamohan and her engineering colleague Tim Hansen. We also have brief notes from the video in this edition of our newsletter.

Set up Backstage in minutes with Roadie