diff --git a/generator-xos-gui-extension/generators/templates/src/app/components/demo.html b/generator-xos-gui-extension/generators/templates/src/app/components/demo.html
new file mode 100644
index 0000000..a9dcb86
--- /dev/null
+++ b/generator-xos-gui-extension/generators/templates/src/app/components/demo.html
@@ -0,0 +1,26 @@
+
+<!--
+Copyright 2017-present Open Networking Foundation
+
+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.
+-->
+
+
+<div class="row">
+  <div class="col-xs-12">
+    <h1><%= name %></h1>
+  </div>
+  <div class="col-xs-12">
+    <p>This is a demo component generated with the creation of this GUI extension.</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/generator-xos-gui-extension/generators/templates/src/app/components/demo.ts b/generator-xos-gui-extension/generators/templates/src/app/components/demo.ts
new file mode 100644
index 0000000..c4230a4
--- /dev/null
+++ b/generator-xos-gui-extension/generators/templates/src/app/components/demo.ts
@@ -0,0 +1,45 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+
+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 extension <%= name %>');
+      },
+    }, 'view');
+  }
+
+  togglePanel() {
+    this.XosSidePanel.toggleComponent('xosAlert', {config: {type: 'info'}, show: true}, 'This content is being toggled by the extension <%= name %>');
+  }
+
+}
+
+export const xosDemoComponent: angular.IComponentOptions = {
+  template: require('./demo.html'),
+  controllerAs: 'vm',
+  controller: DemoComponent
+};
diff --git a/generator-xos-gui-extension/generators/templates/src/index.html b/generator-xos-gui-extension/generators/templates/src/index.html
new file mode 100644
index 0000000..619c817
--- /dev/null
+++ b/generator-xos-gui-extension/generators/templates/src/index.html
@@ -0,0 +1,35 @@
+
+<!--
+Copyright 2017-present Open Networking Foundation
+
+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.
+-->
+
+
+<!DOCTYPE html>
+<html lang="en" ng-app="<%= name %>">
+<head>
+  <meta charset="UTF-8">
+  <title><%= name %></title>
+  <link href="/xos/loader.css" rel="stylesheet">
+  <link href="/xos/app.css" rel="stylesheet">
+</head>
+<body>
+  <div ui-view></div>
+  <script src="/xos/vendor.js"></script>
+  <script src="/xos/app.js"></script>
+  <script src="/xos/loader.js"></script>
+  <script src="/xos/app.config.js"></script>
+  <script src="/xos/style.config.js"></script>
+</body>
+</html>
diff --git a/generator-xos-gui-extension/generators/templates/src/index.ts b/generator-xos-gui-extension/generators/templates/src/index.ts
new file mode 100644
index 0000000..e33bae4
--- /dev/null
+++ b/generator-xos-gui-extension/generators/templates/src/index.ts
@@ -0,0 +1,47 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+
+/// <reference path="../typings/index.d.ts" />
+import * as angular from 'angular';
+
+import 'angular-ui-router';
+import 'angular-resource';
+import 'angular-cookies';
+import routesConfig from './routes';
+import {xosDemoComponent} from './app/components/demo';
+
+
+
+angular.module('<%= name %>', [
+    'ui.router',
+    'app'
+  ])
+  .config(routesConfig)
+  .component('demo', xosDemoComponent)
+  .run(function(
+    $log: ng.ILogService,
+    $state: ng.ui.IStateService,
+    XosNavigationService: any) {
+    $log.info('[<%= name %>] App is running');
+
+    XosNavigationService.add({
+      label: '<%= name %>',
+      state: 'xos.<%= name %>.demo',
+    });
+
+  });
diff --git a/generator-xos-gui-extension/generators/templates/src/routes.ts b/generator-xos-gui-extension/generators/templates/src/routes.ts
new file mode 100644
index 0000000..97f2925
--- /dev/null
+++ b/generator-xos-gui-extension/generators/templates/src/routes.ts
@@ -0,0 +1,35 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+
+export default routesConfig;
+
+function routesConfig($stateProvider: angular.ui.IStateProvider, $locationProvider: angular.ILocationProvider) {
+  $locationProvider.html5Mode(false).hashPrefix('');
+
+  $stateProvider
+    .state('xos.<%= name %>', {
+      url: '<%= name %>',
+      abstract: true,
+      template: '<div ui-view></div>'
+    })
+    .state('xos.<%= name %>.demo', {
+      url: '/demo',
+      parent: 'xos.<%= name %>',
+      component: 'demo'
+    });
+}