diff --git a/plugins/graphiql/api-report.md b/plugins/graphiql/api-report.md
index a879bd6489..c96966c585 100644
--- a/plugins/graphiql/api-report.md
+++ b/plugins/graphiql/api-report.md
@@ -72,10 +72,8 @@ export class GraphQLEndpoints implements GraphQLBrowseApi {
   static github(config: GithubEndpointConfig): GraphQLEndpoint;
 }
 
-// Warning: (ae-missing-release-tag) "GraphiQLPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export function Router(): JSX.Element;
+export const Router: () => JSX.Element;
 
 // (No @packageDocumentation comment for this package)
 ```
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
new file mode 100644
index 0000000000..0b4399948a
--- /dev/null
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/lib/useAsync';
+import 'graphiql/graphiql.css';
+import { graphQlBrowseApiRef } from '../../lib/api';
+import { GraphiQLBrowser } from '../GraphiQLBrowser';
+import { Typography } from '@material-ui/core';
+import {
+  Content,
+  Header,
+  HeaderLabel,
+  Page,
+  Progress,
+} from '@backstage/core-components';
+
+/** @public */
+export const GraphiQLPage = () => {
+  const graphQlBrowseApi = useApi(graphQlBrowseApiRef);
+  const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints());
+
+  let content: JSX.Element;
+
+  if (endpoints.loading) {
+    content = (
+      <Content>
+        <Progress />
+      </Content>
+    );
+  } else if (endpoints.error) {
+    content = (
+      <Content>
+        <Typography variant="h4" color="error">
+          {/* TODO: provide a proper error component */}
+          Failed to load GraphQL endpoints, {String(endpoints.error)}
+        </Typography>
+      </Content>
+    );
+  } else {
+    content = (
+      <Content noPadding>
+        <GraphiQLBrowser endpoints={endpoints.value!} />
+      </Content>
+    );
+  }
+
+  return (
+    <Page themeId="tool">
+      <Header title="GraphiQL">
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      {content}
+    </Page>
+  );
+};