2 files changed, 33 insertions, 0 deletions
diff --git a/examples/toolbar-app/src/app.ts b/examples/toolbar-app/src/app.ts
new file mode 100644
index 000000000..72bd4772d
--- /dev/null
+++ b/examples/toolbar-app/src/app.ts
@@ -0,0 +1,16 @@
+import { defineToolbarApp } from 'astro/toolbar';
+
+// Guide: https://docs.astro.build/en/recipes/making-toolbar-apps/
+// API Reference: https://docs.astro.build/en/reference/dev-toolbar-app-reference/
+export default defineToolbarApp({
+	init(canvas) {
+		const astroWindow = document.createElement('astro-dev-toolbar-window');
+
+		const text = document.createElement('p');
+		text.textContent = 'Hello, Astro!';
+
+		astroWindow.append(text);
+
+		canvas.append(astroWindow);
+	},
+});
diff --git a/examples/toolbar-app/src/integration.ts b/examples/toolbar-app/src/integration.ts
new file mode 100644
index 000000000..81597cf6e
--- /dev/null
+++ b/examples/toolbar-app/src/integration.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url';
+import type { AstroIntegration } from 'astro';
+
+// API Reference: https://docs.astro.build/en/reference/integrations-reference/
+export default {
+	name: 'my-astro-integration',
+	hooks: {
+		'astro:config:setup': ({ addDevToolbarApp }) => {
+			addDevToolbarApp({
+				id: "my-toolbar-app",
+				name: "My Toolbar App",
+				icon: "🚀",
+				entrypoint: fileURLToPath(new URL('./app.js', import.meta.url))
+			});
+		},
+	},
+} satisfies AstroIntegration;