diff --git a/plugins/todo/dev/index.tsx b/plugins/todo/dev/index.tsx
index 3177a51d78..97742341eb 100644
--- a/plugins/todo/dev/index.tsx
+++ b/plugins/todo/dev/index.tsx
@@ -15,12 +15,35 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { todoPlugin, TodoPage } from '../src/plugin';
+import { todoApiRef, todoPlugin, EntityTodoContent } from '../src';
 
 createDevApp()
   .registerPlugin(todoPlugin)
+  .registerApi({
+    api: todoApiRef,
+    deps: {},
+    factory() {
+      return {
+        listTodos: async () => ({
+          items: [
+            {
+              text: 'Make sure this works',
+              author: 'Rugvip',
+              viewUrl: 'https://github.com/backstage/backstage',
+            },
+          ],
+          totalCount: 15,
+          cursors: {
+            prev: 'prev',
+            self: 'self',
+            next: 'next',
+          },
+        }),
+      };
+    },
+  })
   .addPage({
-    element: <TodoPage />,
-    title: 'Root Page',
+    element: <EntityTodoContent />,
+    title: 'Entity Todo Content',
   })
   .render();
diff --git a/plugins/todo/src/index.ts b/plugins/todo/src/index.ts
index 3f43b3d453..be740259a8 100644
--- a/plugins/todo/src/index.ts
+++ b/plugins/todo/src/index.ts
@@ -13,4 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { todoPlugin, TodoPage } from './plugin';
+
+export { todoApiRef } from './api';
+export { todoPlugin, EntityTodoContent } from './plugin';
diff --git a/plugins/todo/src/plugin.ts b/plugins/todo/src/plugin.ts
index b991a8c929..4a202390be 100644
--- a/plugins/todo/src/plugin.ts
+++ b/plugins/todo/src/plugin.ts
@@ -13,18 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin, createRoutableExtension } from '@backstage/core';
+import {
+  createApiFactory,
+  createPlugin,
+  createRoutableExtension,
+} from '@backstage/core';
+import { todoApiRef, TodoClient } from './api';
 
 import { rootRouteRef } from './routes';
 
 export const todoPlugin = createPlugin({
   id: 'todo',
+  apis: [
+    createApiFactory({
+      api: todoApiRef,
+      deps: {},
+      factory() {
+        return new TodoClient();
+      },
+    }),
+  ],
   routes: {
     root: rootRouteRef,
   },
 });
 
-export const TodoPage = todoPlugin.provide(
+export const EntityTodoContent = todoPlugin.provide(
   createRoutableExtension({
     component: () =>
       import('./components/ExampleComponent').then(m => m.ExampleComponent),