diff --git a/plugins/api-docs/README-alpha.md b/plugins/api-docs/README-alpha.md
index 0f19f51b23..a4c3979787 100644
--- a/plugins/api-docs/README-alpha.md
+++ b/plugins/api-docs/README-alpha.md
@@ -1,8 +1,6 @@
-# Api Docs
+# Api Docs - Extension Reference
-> [!WARNING]
-> This documentation is made for those using the experimental new Frontend system.
-> If you are not using the new frontend system, please go [here](./README.md).
+This page contains detailed documentation for all extensions provided by the `@backstage/plugin-api-docs` plugin. For general information about the plugin, see the [README](./README.md).
This is an extension for the catalog plugin that provides components to discover and display API entities.
APIs define the interface between components, see the [system model](https://backstage.io/docs/features/software-catalog/system-model) for details.
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index 139a97d4c8..f6f52cbcae 100644
--- a/plugins/api-docs/README.md
+++ b/plugins/api-docs/README.md
@@ -1,8 +1,5 @@
# API Documentation
-> Disclaimer:
-> If you are looking for documentation on the experimental new frontend system support, please go [here](./README-alpha.md).
-
This is an extension for the catalog plugin that provides components to discover and display API entities.
APIs define the interface between components, see the [system model](https://backstage.io/docs/features/software-catalog/system-model) for details.
They are defined in machine readable formats and provide a human readable documentation.
@@ -28,77 +25,32 @@ To link that a component provides or consumes an API, see the [`providesApis`](h
> The plugin is already added when using `npx @backstage/create-app` so you can skip these steps.
-1. Install the API docs plugin
-
```bash
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-api-docs
```
-2. Add the `ApiExplorerPage` extension to the app:
+Once installed, the plugin is automatically available in your app through the default package discovery. For more details and alternative installation methods, see [installing plugins](https://backstage.io/docs/frontend-system/building-apps/installing-plugins).
-```tsx
-// In packages/app/src/App.tsx
+You can enable entity cards and tabs on the catalog entity page through configuration:
-import { ApiExplorerPage } from '@backstage/plugin-api-docs';
-
-} />;
+```yaml
+# app-config.yaml
+app:
+ extensions:
+ - entity-card:api-docs/providing-components:
+ config:
+ filter:
+ kind: api
+ - entity-card:api-docs/consuming-components:
+ config:
+ filter:
+ kind: api
+ - entity-content:api-docs/definition
+ - entity-content:api-docs/apis
```
-3. Add one of the provided widgets to the EntityPage:
-
-```tsx
-// packages/app/src/components/catalog/EntityPage.tsx
-
-import {
- EntityAboutCard,
- EntityApiDefinitionCard,
- EntityConsumingComponentsCard,
- EntityProvidingComponentsCard,
-} from '@backstage/plugin-api-docs';
-
-const apiPage = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-// ...
-
-export const entityPage = (
-
- // ...
-
- // ...
-
-);
-```
-
-There are other components to discover in [`./src/components`](./src/components) that are also added by the default app.
+For the full list of available extensions and their configuration options, see the [README-alpha.md](./README-alpha.md).
## Customizations
@@ -388,6 +340,75 @@ import { ApiExplorerPage } from '@backstage/plugin-api-docs';
/>;
```
+## Old Frontend System
+
+If your Backstage app uses the old frontend system, you need to manually wire the plugin into your app.
+
+1. Add the `ApiExplorerPage` extension to the app:
+
+```tsx
+// In packages/app/src/App.tsx
+
+import { ApiExplorerPage } from '@backstage/plugin-api-docs';
+
+} />;
+```
+
+2. Add one of the provided widgets to the EntityPage:
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import {
+ EntityAboutCard,
+ EntityApiDefinitionCard,
+ EntityConsumingComponentsCard,
+ EntityProvidingComponentsCard,
+} from '@backstage/plugin-api-docs';
+
+const apiPage = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+// ...
+
+export const entityPage = (
+
+ // ...
+
+ // ...
+
+);
+```
+
+There are other components to discover in [`./src/components`](./src/components) that are also added by the default app.
+
## Links
- [The Backstage homepage](https://backstage.io)