API stability data inside Backstage

Installation

Install the Backstage plugin from npm:

# npm
npm install @coderifts/backstage-plugin

# yarn
yarn add @coderifts/backstage-plugin

Add to your Entity Page

Import the CodeRiftsCard component and add it to your Backstage entity page layout:

Do not paste a key here. CodeRiftsCard renders in the browser, so a literal key in JSX ships to every visitor of your Backstage instance. The literal below shows the prop, not a place to put a secret — read it from app config, as the Configuration section does.

// packages/app/src/components/catalog/EntityPage.tsx

import { CodeRiftsCard } from '@coderifts/backstage-plugin';

// Inside your entity page layout:
<CodeRiftsCard
  repo="your-org/your-repo"
  apiKey="cr_live_..."
/>

Dynamic Repo Detection

Automatically detect the repo from the Backstage entity annotations:

import { useEntity } from '@backstage/plugin-catalog-react';
import { CodeRiftsCard } from '@coderifts/backstage-plugin';

const { entity } = useEntity();
const repo = entity.metadata.annotations?.['github.com/project-slug'] || '';

<CodeRiftsCard repo={repo} apiKey={apiKey} />

Configuration

For production, store the API key in your Backstage app config:

# app-config.yaml
coderifts:
  apiKey: ${CODERIFTS_API_KEY}

Then read it in your component:

import { configApiRef, useApi } from '@backstage/core-plugin-api';

const config = useApi(configApiRef);
const apiKey = config.getString('coderifts.apiKey');

Props Reference

What the card shows