diff --git a/src/app/components/demo.ts b/src/app/components/demo.ts
new file mode 100644
index 0000000..14fb3db
--- /dev/null
+++ b/src/app/components/demo.ts
@@ -0,0 +1,27 @@
+class DemoComponent {
+  static $inject = ['XosSidePanel', 'XosKeyboardShortcut'];
+
+  constructor(
+    private XosSidePanel: any,
+    private XosKeyboardShortcut: any
+  ) {
+    this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'v',
+      description: 'Alert popup',
+      cb: () => {
+        alert('This binding is provided by the "xos-sample-gui-extension"');
+      },
+    }, 'view');
+  }
+
+  togglePanel() {
+    this.XosSidePanel.injectComponent('xosAlert', {config: {type: 'info'}, show: true}, 'This content is injected by my sample UI extension');
+  }
+
+}
+
+export const xosDemoComponent: angular.IComponentOptions = {
+  template: require('./demo.html'),
+  controllerAs: 'vm',
+  controller: DemoComponent
+};