diff --git a/packages/klingon-ui/src/app/_shared/drop-down/drop-down.component.ts b/packages/klingon-ui/src/app/_shared/drop-down/drop-down.component.ts
index e001cfd..08f715a 100644
--- a/packages/klingon-ui/src/app/_shared/drop-down/drop-down.component.ts
+++ b/packages/klingon-ui/src/app/_shared/drop-down/drop-down.component.ts
@@ -8,7 +8,7 @@ import {
   selector: 'app-drop-down',
   template: `
     <mat-accordion>
-      <mat-expansion-panel [expanded]="open" (opened)="open=true" (closed)="open=false">
+      <mat-expansion-panel [expanded]="open" [disabled]="disabled" (opened)="open=true" (closed)="open=false">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <ng-content select="mat-icon"></ng-content>
@@ -17,6 +17,7 @@ import {
           <mat-panel-description *ngIf="!open">
             <ng-content select=".sub-title"></ng-content>
           </mat-panel-description>
+          <ng-content select=".action"></ng-content>
         </mat-expansion-panel-header>
         <ng-content select=".content"></ng-content>
       </mat-expansion-panel>
@@ -53,6 +54,9 @@ import {
         margin: 3px 0px 0px 0px;
         font-size: 1em;
       }
+      ::ng-deep .component-title {
+        margin: 9px 0px 0px 0px;
+      }
       ::ng-deep .sub-title {
         padding: 6px;
         margin: 0;
@@ -70,9 +74,13 @@ import {
   ]
 })
 export class DropDownComponent implements OnInit {
+
   @Input()
   open: boolean = false;
 
+  @Input()
+  disabled: boolean = false;
+
   ngOnInit() {
   }
 
diff --git a/packages/klingon-ui/src/app/app.component.html b/packages/klingon-ui/src/app/app.component.html
index 9117e83..50d26f7 100644
--- a/packages/klingon-ui/src/app/app.component.html
+++ b/packages/klingon-ui/src/app/app.component.html
@@ -35,8 +35,9 @@
         <ng-template mat-tab-label>New</ng-template>
         <app-cli-create #appCli (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-create>
     </mat-tab>
-    <mat-tab [disabled]="true">
+    <mat-tab [disabled]="!klingon.generate">
         <ng-template mat-tab-label>Generate</ng-template>
+        <app-cli-generate #appGenerate (onStdOut)="onSuccess($event)" (onStdErr)="onError($event)"></app-cli-generate>
     </mat-tab>
     <mat-tab>
         <ng-template mat-tab-label>Serve</ng-template>
diff --git a/packages/klingon-ui/src/app/app.component.ts b/packages/klingon-ui/src/app/app.component.ts
index 14e5a58..d7278dc 100644
--- a/packages/klingon-ui/src/app/app.component.ts
+++ b/packages/klingon-ui/src/app/app.component.ts
@@ -1,8 +1,11 @@
 import { Component, ViewChild } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { CliCreateComponent } from './cli/create/create.component';
+import { CliService, CommandResult } from './cli/cli.service';
+import { Subject } from 'rxjs';
+import { flatMap } from 'rxjs/operators';
+import { CliGenerateComponent } from './cli/generate/generate.component';
 import { TerminalData } from './_shared/terminal/terminal.service';
 
 @Component({
@@ -27,7 +30,7 @@ import { TerminalData } from './_shared/terminal/terminal.service';
   template:
     '<mat-icon>error</mat-icon><span>An error has occured. Check the logs tab.</span>'
 })
-export class SnackBarErrorComponent {}
+export class SnackBarErrorComponent { }
 
 @Component({
   selector: 'app-snack-bar-success',
@@ -51,7 +54,7 @@ export class SnackBarErrorComponent {}
   template:
     '<mat-icon>verified_user</mat-icon><span>Command executed successfully.</span>'
 })
-export class SnackBarSuccessComponent {}
+export class SnackBarSuccessComponent { }
 
 @Component({
   selector: 'app-root',
@@ -61,12 +64,17 @@ export class SnackBarSuccessComponent {}
 export class AppComponent implements OnInit {
   selectedIndex = 0;
 
+  // Enable/Disable generate tab
+  klingon = { generate: false };
+
   @ViewChild('appCli') appCli: CliCreateComponent;
+  @ViewChild('appGenerate') appGenerate: CliGenerateComponent;
 
   constructor(
     public snackBarError: MatSnackBar,
-    public snackBarSuccess: MatSnackBar
-  ) {}
+    public snackBarSuccess: MatSnackBar,
+    private cliService: CliService
+  ) { }
 
   ngOnInit() {
     this.selectedIndex = parseInt(
@@ -74,9 +82,33 @@ export class AppComponent implements OnInit {
       10
     );
     localStorage.setItem('ui.selectedIndex', `${this.selectedIndex}`);
+
+    this.subscribeToNgCreate();
+  }
+
+  subscribeToNgCreate() {
+    this.cliService.onNgCreate.asObservable()
+      .pipe(flatMap((data: Subject<CommandResult>) => data))
+      .subscribe((response: any) => {
+        /**
+        * exit event of ng command returns exit code (0/1). So if it returns 0, means ng command executed successfully. Only then
+        * we enable generate tab.
+        */
+        if (response.exit === 0) {
+          this.selectedIndex = 1;
+          this.klingon.generate = true;
+        }
+      });
+  }
+
+  onNgCreateEvent(response: any) {
   }
 
   storeIndex(index: number) {
+    // Set app-name from localStorage if generate tab is selected.
+    if (index === 1) {
+      this.appGenerate.form.patchValue({ 'app-name': localStorage.getItem('ui.appName') });
+    }
     localStorage.setItem('ui.selectedIndex', `${index}`);
   }
 
diff --git a/packages/klingon-ui/src/app/app.module.ts b/packages/klingon-ui/src/app/app.module.ts
index feb29b9..fa35691 100644
--- a/packages/klingon-ui/src/app/app.module.ts
+++ b/packages/klingon-ui/src/app/app.module.ts
@@ -24,6 +24,21 @@ import { LogComponent } from './_shared/log/log.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+import { CliGenerateComponent } from './cli/generate/generate.component';
+import { ComponentComponent } from './cli/generate/component/component.component';
+import { ClassComponent } from './cli/generate/class/class.component';
+import { DirectiveComponent } from './cli/generate/directive/directive.component';
+import { EnumComponent } from './cli/generate/enum/enum.component';
+import { InterfaceComponent } from './cli/generate/interface/interface.component';
+import { ModuleComponent } from './cli/generate/module/module.component';
+import { PipeComponent } from './cli/generate/pipe/pipe.component';
+import { ServiceComponent } from './cli/generate/service/service.component';
+import { ServiceworkerComponent } from './cli/generate/serviceworker/serviceworker.component';
+import { ApplicationComponent } from './cli/generate/application/application.component';
+import { GuardsComponent } from './cli/generate/guards/guards.component';
+import { UniversalsComponent } from './cli/generate/universals/universals.component';
+import { AppshellsComponent } from './cli/generate/appshells/appshells.component';
+import { LibraryComponent } from './cli/generate/library/library.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +51,22 @@ import { environment } from '../environments/environment';
     CliTestComponent,
     LogComponent,
     SnackBarSuccessComponent,
-    SnackBarErrorComponent
+    SnackBarErrorComponent,
+    CliGenerateComponent,
+    ComponentComponent,
+    ClassComponent,
+    DirectiveComponent,
+    EnumComponent,
+    InterfaceComponent,
+    ModuleComponent,
+    PipeComponent,
+    ServiceComponent,
+    ServiceworkerComponent,
+    ApplicationComponent,
+    GuardsComponent,
+    UniversalsComponent,
+    AppshellsComponent,
+    LibraryComponent
   ],
   entryComponents: [SnackBarSuccessComponent, SnackBarErrorComponent],
   imports: [
diff --git a/packages/klingon-ui/src/app/cli/build/build.component.ts b/packages/klingon-ui/src/app/cli/build/build.component.ts
index beef860..d21d40a 100644
--- a/packages/klingon-ui/src/app/cli/build/build.component.ts
+++ b/packages/klingon-ui/src/app/cli/build/build.component.ts
@@ -21,7 +21,7 @@ export class BuildComponent extends FlagsComponent implements OnInit {
     this.isWorking = true;
     this.cli
       .runNgCommand(`build ${this.cli.serialize(this.form.value)}`)
-      .subscribe(data => {
+      .subscribe( (data: any) => {
         this.isWorking = false;
 
         if (data.stderr) {
diff --git a/packages/klingon-ui/src/app/cli/cli.service.ts b/packages/klingon-ui/src/app/cli/cli.service.ts
index 2a4df3a..3283d38 100644
--- a/packages/klingon-ui/src/app/cli/cli.service.ts
+++ b/packages/klingon-ui/src/app/cli/cli.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, Output, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 import { environment } from '../../environments/environment';
 
@@ -14,6 +14,8 @@ export class CliService {
   ws: WebSocket;
   isConnectionOn;
 
+  @Output() onNgCreate: EventEmitter<Subject<CommandResult>> = new EventEmitter<Subject<CommandResult>>();
+
   constructor() {
     this.response$ = new Subject();
     this.ws = new WebSocket(`ws://` + environment.host + `:` + environment.port + `/cli`);
@@ -40,6 +42,15 @@ export class CliService {
           key !== 'app-name' &&
           key !== 'root-dir' &&
           key !== 'dir' &&
+          key !== 'component-name' &&
+          key !== 'class-name' && 
+          key !== 'directive-name' && 
+          key !== 'enum-name' && 
+          key !== 'interface-name' && 
+          key !== 'interface-type' && 
+          key !== 'module-name' && 
+          key !== 'pipe-name' && 
+          key !== 'service-name' && 
           key !== 'app'
       )
       .map(key => `--${key}=${values[key]}`)
@@ -57,10 +68,29 @@ export class CliService {
   runNgCommand(stdin, dir = undefined) {
     if (this.isConnectionOn) {
       this._send(stdin, dir);
+      this.detectEvents(stdin, this.response$);
     }
     return this.response$;
   }
 
+  /**
+   * Detect ng operations such as new, serve, build, generate etc.
+   * @param stdin string
+   */
+  private detectEvents(stdin: string, response: Subject<CommandResult>) {
+    if (!stdin) {
+      return;
+    }
+
+    const commandArray = stdin.split(' ');
+
+    if (commandArray.length > 1) {
+      if (commandArray[0] === 'new' && commandArray.filter(item => item === '--dry-run=true').length === 0) {
+        this.onNgCreate.emit(response);
+      }
+    }
+  }
+
   _send(stdin, dir) {
     console.log(stdin);
 
diff --git a/packages/klingon-ui/src/app/cli/create/create.component.ts b/packages/klingon-ui/src/app/cli/create/create.component.ts
index 2a0f6c5..4e3c4b5 100644
--- a/packages/klingon-ui/src/app/cli/create/create.component.ts
+++ b/packages/klingon-ui/src/app/cli/create/create.component.ts
@@ -1,7 +1,5 @@
 import { FlagsComponent } from './../flags/flags.component';
 import { CliService } from './../cli.service';
-import { Validators } from '@angular/forms';
-import { FormControl } from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
 import { ImportService } from '../../_shared/utilities/import.service';
@@ -40,7 +38,9 @@ export class CliCreateComponent extends FlagsComponent implements OnInit {
     const rootDir = this.form.value['root-dir'];
     localStorage.setItem('ui.lastUsedRootDirectory', rootDir || '');
 
+    // save application name to local storage to reuse it in generate tab
     const appName = this.form.value['directory'] || this.form.value['app-name'];
+    localStorage.setItem('ui.appName', appName);
 
     this.isWorking = true;
     this.cli
diff --git a/packages/klingon-ui/src/app/cli/flags/flags.component.ts b/packages/klingon-ui/src/app/cli/flags/flags.component.ts
index f292ab0..43f86e8 100644
--- a/packages/klingon-ui/src/app/cli/flags/flags.component.ts
+++ b/packages/klingon-ui/src/app/cli/flags/flags.component.ts
@@ -1,4 +1,4 @@
-import { Validators } from '@angular/forms';
+import { Validators, FormArray } from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@@ -14,7 +14,8 @@ export class FlagsComponent implements OnInit {
     CREATE: 0,
     SERVE: 1,
     BUILD: 2,
-    TEST: 3
+    TEST: 3,
+    GENERATE: 4
   };
 
   @Output()
@@ -49,6 +50,8 @@ export class FlagsComponent implements OnInit {
       'ui.lastUsedRootDirectory'
     );
 
+    const appName = localStorage.getItem('ui.appName');
+
     if (flag === FlagsComponent.Flags.CREATE) {
       return new FormGroup({
         'app-name': new FormControl('', Validators.required),
@@ -138,6 +141,25 @@ export class FlagsComponent implements OnInit {
         sourcemap: new FormControl(true),
         watch: new FormControl(false)
       });
+    } else if (flag === FlagsComponent.Flags.GENERATE) {
+      return new FormGroup({
+        'app-name': new FormControl(appName, Validators.required),
+        'root-dir': new FormControl(lastUsedRootDirectory),
+        components: new FormArray([]),
+        serviceworkers: new FormArray([]),
+        applications: new FormArray([]),
+        classes: new FormArray([]),
+        directives: new FormArray([]),
+        enums: new FormArray([]),
+        guards: new FormArray([]),
+        interfaces: new FormArray([]),
+        modules: new FormArray([]),
+        pipes: new FormArray([]),
+        services: new FormArray([]),
+        universals: new FormArray([]),
+        appshells: new FormArray([]),
+        libraries: new FormArray([])
+      });
     }
   }
 }
diff --git a/packages/klingon-ui/src/app/cli/generate/application/application.component.css b/packages/klingon-ui/src/app/cli/generate/application/application.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/application/application.component.html b/packages/klingon-ui/src/app/cli/generate/application/application.component.html
new file mode 100644
index 0000000..683e354
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/application/application.component.html
@@ -0,0 +1,93 @@
+<p *ngIf="form.get('components').controls.length === 0">
+  Please add application to continue
+</p>
+<app-drop-down *ngFor="let app of form.get('applications').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ app.value['application-name'] ? app.value['application-name'] : 'Application '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Application</h6>
+  <main class="content" [formGroup]="application">
+
+    <div class="app-lication-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="application-name" matInput placeholder="Name of the application to create" required>
+          <mat-hint align="start">Name of the application to create</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="prefix" matInput placeholder="The prefix to apply to generated selectors. (-p)">
+          <mat-hint align="start">The prefix to apply to generated selectors. (-p)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="styleext" placeholder="The file extension to be used for style files.">
+            <mat-option *ngFor="let style of styleExt" [value]="style">
+              {{ style }}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">The file extension to be used for style files.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="view-encapsulation" placeholder="The view encapsulation strategy to use in the new app.">
+            <mat-option *ngFor="let encapsulation of viewEncapsulation" [value]="encapsulation">
+              {{ encapsulation }}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">The view encapsulation strategy to use in the new app.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="experimental-ivy">EXPERIMENTAL: True to create a new app that uses the Ivy
+              rendering engine.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-style">Specifies if the style will be in the ts file. (-s)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-template">Specifies if the template will be in the ts file. (-t)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="minimal">When true, creates a bare-bones project without any testing
+              frameworks.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="routing">When true, creates a routing NgModule.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-install">Skip installing dependency packages.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-package-json">When true, does not add dependencies to the
+              "package.json" file.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-tests">When true, does not create "spec.ts" test files for the app.
+              (-S)</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeApplication(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewApplication($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/application/application.component.spec.ts b/packages/klingon-ui/src/app/cli/generate/application/application.component.spec.ts
new file mode 100644
index 0000000..1c1ee08
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/application/application.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApplicationComponent } from './application.component';
+
+describe('ApplicationComponent', () => {
+  let component: ApplicationComponent;
+  let fixture: ComponentFixture<ApplicationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApplicationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApplicationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/klingon-ui/src/app/cli/generate/application/application.component.ts b/packages/klingon-ui/src/app/cli/generate/application/application.component.ts
new file mode 100644
index 0000000..87fcf97
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/application/application.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-application',
+  templateUrl: './application.component.html',
+  styleUrls: ['./application.component.css']
+})
+export class ApplicationComponent implements OnInit {
+
+  viewEncapsulation: string[] = ['Emulated', 'Native', 'None', 'ShadowDom'];
+  defaultStyleExt = 'css';
+  styleExt = [this.defaultStyleExt, 'scss', 'less', 'sass', 'styl'];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.css b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.html b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.html
new file mode 100644
index 0000000..bb0a31a
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.html
@@ -0,0 +1,3 @@
+<p>
+  appshells works!
+</p>
diff --git a/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.spec.ts b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.spec.ts
new file mode 100644
index 0000000..a69b0d6
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppshellsComponent } from './appshells.component';
+
+describe('AppshellsComponent', () => {
+  let component: AppshellsComponent;
+  let fixture: ComponentFixture<AppshellsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppshellsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppshellsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.ts b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.ts
new file mode 100644
index 0000000..f1d033d
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/appshells/appshells.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-appshells',
+  templateUrl: './appshells.component.html',
+  styleUrls: ['./appshells.component.css']
+})
+export class AppshellsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/class/class.component.css b/packages/klingon-ui/src/app/cli/generate/class/class.component.css
new file mode 100644
index 0000000..aa0bc0f
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/class/class.component.css
@@ -0,0 +1,7 @@
+.class-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/class/class.component.html b/packages/klingon-ui/src/app/cli/generate/class/class.component.html
new file mode 100644
index 0000000..35ce996
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/class/class.component.html
@@ -0,0 +1,56 @@
+<p *ngIf="form.get('classes').controls.length === 0">
+  Please add class to continue
+</p>
+
+<app-drop-down *ngFor="let class of form.get('classes').controls; let i = index">
+  <h3 class="title class-title">
+    <span>
+      {{ class.value['class-name'] ? class.value['class-name'] : 'Class '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Class</h6>
+  <main class="content" [formGroup]="class">
+
+    <div class="class-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="class-name" matInput placeholder="Name of the class to create in the app" required>
+          <mat-hint align="start">Name of the class to create in the app</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="type" matInput placeholder="Adds a developer-defined type to the filename, in the format \'name.type.ts\'.">
+          <mat-hint align="start">Adds a developer-defined type to the filename, in the format "name.type.ts".</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">Specifies if a spec file is generated.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeClass(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewClass($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/class/class.component.ts b/packages/klingon-ui/src/app/cli/generate/class/class.component.ts
new file mode 100644
index 0000000..8b4bf3f
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/class/class.component.ts
@@ -0,0 +1,47 @@
+import { Component, Output, Input, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-class',
+  templateUrl: './class.component.html',
+  styleUrls: ['./class.component.css']
+})
+export class ClassComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onClassAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onClassRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildClassForm() {
+    return new FormGroup({
+      'class-name': new FormControl('', Validators.required),
+      'project': new FormControl(''),
+      'type': new FormControl(''),
+      'spec': new FormControl(false)
+    });
+  }
+
+
+  addNewClass(event) {
+    const formGroup = ClassComponent.buildClassForm();
+    this.form.controls.classes['controls'].push(formGroup);
+    console.log(this.form.controls.classes);
+    this.onClassAdded.emit(formGroup);
+  }
+
+  removeClass(index) {
+    this.form.controls.classes['controls'].splice(index, 1);
+    this.onClassRemoved.emit(index);
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/component/component.component.html b/packages/klingon-ui/src/app/cli/generate/component/component.component.html
new file mode 100644
index 0000000..911819b
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/component/component.component.html
@@ -0,0 +1,115 @@
+<p *ngIf="form.get('components').controls.length === 0">
+  Please add component to continue
+</p>
+<app-drop-down *ngFor="let component of form.get('components').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ component.value['component-name'] ? component.value['component-name'] : 'Component '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Application Component</h6>
+  <main class="content" [formGroup]="component">
+
+    <div class="component-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="component-name" matInput placeholder="Name of the component to create in the app"
+            required>
+          <mat-hint align="start">Name of the component to create in the app</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="change-detection" placeholder="Specify change detection strategy for component (-c)">
+            <mat-option *ngFor="let value of changeDetection" [value]="value">
+              {{value}}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">Specify change detection strategy for component</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="styleext" placeholder="The file extension to be used for style files.">
+            <mat-option *ngFor="let style of styleExt" [value]="style">
+              {{ style }}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">The file extension to be used for style files.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="module" matInput placeholder="Allows specification of the declaring module. (-m)">
+          <mat-hint align="start">Allows specification of the declaring module. (-m)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="prefix" matInput placeholder="The prefix to apply to generated selectors. (-p)">
+          <mat-hint align="start">The prefix to apply to generated selectors. (-p)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="selector" matInput placeholder="Selector">
+          <mat-hint align="start">The selector to use for the component.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="dryRun">Run through without making any changes. (-d)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="entry-component">Entry component</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="export">Specifies if declaring module exports the component.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">Flag to indicate if a dir is created.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="force">Forces overwriting of files. (-f)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-style">Specifies if the style will be in the ts file. (-s)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="inline-template">Specifies if the template will be in the ts file. (-t)</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">Specifies whether to apply lint fixes after generating the
+              component.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-import">Flag to skip the module import.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">Specifies if a spec file is generated.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeComponent(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewComponent($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/component/component.component.ts b/packages/klingon-ui/src/app/cli/generate/component/component.component.ts
new file mode 100644
index 0000000..898d31a
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/component/component.component.ts
@@ -0,0 +1,72 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-component',
+  templateUrl: './component.component.html',
+  styles: [`
+    .component-form mat-form-field {
+      width: 100%
+    }
+
+    mat-action-row {
+      border: none;
+    }
+  `]
+})
+export class ComponentComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onComponentAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onComponentRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  changeDetection: string[] = ['Default', 'OnPush'];
+  defaultStyleExt = 'css';
+  styleExt = [this.defaultStyleExt, 'scss', 'less', 'sass', 'styl'];
+
+  componentName: string;
+
+  static buildComponentForm() {
+    return new FormGroup({
+      'component-name': new FormControl(''),
+      'change-detection': new FormControl(''),
+      'dryRun': new FormControl(false),
+      'entry-component': new FormControl(false),
+      'export': new FormControl(false),
+      'flat': new FormControl(false),
+      'force': new FormControl(false),
+      'module': new FormControl(''),
+      'prefix': new FormControl(''),
+      'project': new FormControl(''),
+      'selector': new FormControl(''),
+      'styleext': new FormControl(''),
+      'inline-style': new FormControl(false),
+      'inline-template': new FormControl(false),
+      'lint-fix': new FormControl(false),
+      'skip-import': new FormControl(false),
+      'spec': new FormControl(false)
+    });
+  }
+
+  addNewComponent(event) {
+    const formGroup = ComponentComponent.buildComponentForm();
+    this.form.controls.components['controls'].push(formGroup);
+    this.onComponentAdded.emit(formGroup);
+  }
+
+  removeComponent(index) {
+    this.form.controls.components['controls'].splice(index, 1);
+    this.onComponentRemoved.emit(index);
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/directive/directive.component.css b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.css
new file mode 100644
index 0000000..2b93e7c
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.css
@@ -0,0 +1,7 @@
+.directive-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/directive/directive.component.html b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.html
new file mode 100644
index 0000000..306b0e8
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.html
@@ -0,0 +1,73 @@
+<p *ngIf="form.get('directives').controls.length === 0">
+  Please add directive to continue
+</p>
+<app-drop-down *ngFor="let directive of form.get('directives').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ directive.value['directive-name'] ? directive.value['directive-name'] : 'Directive '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Application Directive</h6>
+  <main class="content" [formGroup]="directive">
+
+    <div class="directive-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="directive-name" matInput placeholder="The name of the new directive."
+            required>
+          <mat-hint align="start">The name of the new directive.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="prefix" matInput placeholder="The prefix to apply to generated selectors. (-p)">
+          <mat-hint align="start">The prefix to apply to generated selectors. (-p)</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="selector" matInput placeholder="Selector">
+          <mat-hint align="start">The selector to use for the component.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="export">Specifies if declaring module exports the component.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">When true (the default), creates the new files at the top level of the current project.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the directive.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-import">When true, does not import this directive into the owning NgModule.</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">When true (the default), generates a "spec.ts" test file for the new directive.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeDirective(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewDirective($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/directive/directive.component.ts b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.ts
new file mode 100644
index 0000000..eaf49aa
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/directive/directive.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-directive',
+  templateUrl: './directive.component.html',
+  styleUrls: ['./directive.component.css']
+})
+export class DirectiveComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onDirectiveAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onDirectiveRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildDirectiveForm() {
+    return new FormGroup({
+      'directive-name': new FormControl('', Validators.required),
+      'prefix': new FormControl(''),
+      'project': new FormControl(''),
+      'selector': new FormControl(''),
+      'export': new FormControl(false),
+      'flat': new FormControl(false),
+      'lint-fix': new FormControl(false),
+      'skip-import': new FormControl(false),
+      'spec': new FormControl(false)
+    });
+  }
+  
+  addNewDirective(event) {
+    const formGroup = DirectiveComponent.buildDirectiveForm();
+    this.form.controls.directives['controls'].push(formGroup);
+    console.log(this.form.controls.directives);
+    this.onDirectiveAdded.emit(formGroup);
+  }
+
+  removeDirective(index) {
+    this.form.controls.directives['controls'].splice(index, 1);
+    this.onDirectiveRemoved.emit(index);
+  }
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/enum/enum.component.css b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.css
new file mode 100644
index 0000000..e6f2b70
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.css
@@ -0,0 +1,7 @@
+.enum-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/enum/enum.component.html b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.html
new file mode 100644
index 0000000..360d741
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.html
@@ -0,0 +1,49 @@
+<p *ngIf="form.get('enums').controls.length === 0">
+  Please add enum to continue
+</p>
+<app-drop-down *ngFor="let enum of form.get('enums').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ enum.value['enum-name'] ? enum.value['enum-name'] : 'Enum '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Enum</h6>
+  <main class="content" [formGroup]="enum">
+
+    <div class="enum-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="enum-name" matInput placeholder="The name of the new enum."
+            required>
+          <mat-hint align="start">The name of the new enum.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the directive.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeEnum(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewEnum($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/enum/enum.component.ts b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.ts
new file mode 100644
index 0000000..703b4de
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/enum/enum.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-enum',
+  templateUrl: './enum.component.html',
+  styleUrls: ['./enum.component.css']
+})
+export class EnumComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onEnumAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onEnumRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildEnumForm() {
+    return new FormGroup({
+      'enum-name': new FormControl('', Validators.required),
+      'project': new FormControl(''),
+      'lint-fix': new FormControl(false)
+    });
+  }
+  
+  addNewEnum(event) {
+    const formGroup = EnumComponent.buildEnumForm();
+    this.form.controls.enums['controls'].push(formGroup);
+    this.onEnumAdded.emit(formGroup);
+  }
+
+  removeEnum(index) {
+    this.form.controls.enums['controls'].splice(index, 1);
+    this.onEnumRemoved.emit(index);
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/generate.component.css b/packages/klingon-ui/src/app/cli/generate/generate.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/generate.component.html b/packages/klingon-ui/src/app/cli/generate/generate.component.html
new file mode 100644
index 0000000..b1fa406
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/generate.component.html
@@ -0,0 +1,211 @@
+<form [formGroup]="form">
+
+  <section>
+    <p>
+      <mat-form-field>
+        <input autocomplete="off" formControlName="app-name" matInput placeholder="Application name" required>
+        <mat-hint align="start">Default applications are created in a subdirectory of the same name, with an
+          initialized Angular application.</mat-hint>
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field>
+        <input autocomplete="off" formControlName="root-dir" matInput placeholder="Project Root Directory">
+        <mat-hint align="start">This app will be created in a subdirectory within this directory. Leave empty to use
+          your home directory.</mat-hint>
+      </mat-form-field>
+    </p>
+  </section>
+
+  <!-- Generate a component -->
+  <app-drop-down [open]="true" contentHeight="750px">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [checked]="generateConfig.component" [disabled] ="false" >&nbsp;Component</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Generate Components</h6>
+
+    <main class="content">
+      <app-generate-component [index]="i" [form]="form" (onComponentAdded)="addComponent($event)" (onComponentRemoved)="removeComponent($event,index)"></app-generate-component>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a service worker -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;Service Worker</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+  <!-- Generate an application -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;Application</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+  <!-- Generate a class -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.class">&nbsp;Class</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+
+    <main class="content">
+      <app-generate-class [index]="i" [form]="form" (onClassAdded)="addClass($event)" (onClassRemoved)="removeClass($event,index)"></app-generate-class>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a directive -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.directive">&nbsp;Directive</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+
+    <main class="content">
+      <app-generate-directive [index]="i" [form]="form" (onDirectiveAdded)="addDirective($event)" (onDirectiveRemoved)="removeDirective($event,index)"></app-generate-directive>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate an enum -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.enum">&nbsp;Enum</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-enum [index]="i" [form]="form" (onEnumAdded)="addEnum($event)" (onEnumRemoved)="removeEnum($event,index)"></app-generate-enum>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a guard -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;Guard</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+  <!-- Generate a interface -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.interface">&nbsp;Interface</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-interface [index]="i" [form]="form" (onInterfaceAdded)="addInterface($event)" (onInterfaceRemoved)="removeInterface($event,index)"></app-generate-interface>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a module -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.module">&nbsp;Module</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-module [index]="i" [form]="form" (onModuleAdded)="addModule($event)" (onModuleRemoved)="removeModule($event,index)"></app-generate-module>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a pipe -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.pipe">&nbsp;Pipe</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-pipe [index]="i" [form]="form" (onPipeAdded)="addPipe($event)" (onPipeRemoved)="removePipe($event,index)"></app-generate-pipe>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a service -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="false">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="false" [checked]="generateConfig.service">&nbsp;Service</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+    <main class="content">
+      <app-generate-service [index]="i" [form]="form" (onServiceAdded)="addService($event)" (onServiceRemoved)="removeService($event,index)"></app-generate-service>
+    </main>
+  </app-drop-down>
+
+  <!-- Generate a universal -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;Universal</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+  <!-- Generate a appShell -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;appShell</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+  <!-- Generate a library -->
+  <app-drop-down [open]="false" contentHeight="750px" [disabled]="true">
+
+    <h3 class="title" style="padding-bottom:5px;">
+      <mat-checkbox [disabled]="true">&nbsp;Library</mat-checkbox>
+    </h3>
+    <!-- <mat-icon>settings</mat-icon> -->
+    <h6 class="sub-title">Configure other flags for the create command</h6>
+  </app-drop-down>
+
+
+  <app-drop-down [open]="false" contentHeight="420px">
+    <mat-icon>subject</mat-icon>
+    <h3 class="title">Logs</h3>
+    <h6 class="sub-title">View command history and logs</h6>
+    <main class="content">
+      <app-cli-log [stdout]="onStdOut | async" [stderr]="onStdErr | async"></app-cli-log>
+    </main>
+  </app-drop-down>
+
+  <section>
+    <p class="button-container">
+      <button mat-raised-button color="warn" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum && !generateConfig.interface && !generateConfig.module && !generateConfig.pipe && !generateConfig.service)" (click)="stop()">
+        <mat-icon>stop</mat-icon> Stop
+      </button>
+      <button mat-raised-button color="primary" [disabled]="form.invalid || (!generateConfig.component && !generateConfig.class && !generateConfig.directive && !generateConfig.enum && !generateConfig.interface && !generateConfig.module && !generateConfig.pipe && !generateConfig.service)" (click)="generate()">
+        <mat-icon>play_circle_outline</mat-icon> Generate
+      </button>
+    </p>
+  </section>
+
+</form>
+
+<mat-progress-bar *ngIf="isWorking" color="primary" mode="indeterminate">
+</mat-progress-bar>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/generate.component.ts b/packages/klingon-ui/src/app/cli/generate/generate.component.ts
new file mode 100644
index 0000000..ba28528
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/generate.component.ts
@@ -0,0 +1,454 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FlagsComponent } from '../flags/flags.component';
+import { CliService } from '../cli.service';
+
+@Component({
+  selector: 'app-cli-generate',
+  templateUrl: './generate.component.html',
+  styleUrls: ['./generate.component.css', '../flags/flags.component.css']
+})
+export class CliGenerateComponent extends FlagsComponent implements OnInit {
+
+  form: FormGroup;
+
+  generateConfig: any = {
+    component: false, class: false, directive: false, enum: false,
+    interface: false, module: false, pipe: false, service: false
+  };
+
+  constructor(public cli: CliService) {
+    super();
+    this.form = this.buildForm(FlagsComponent.Flags.GENERATE);
+  }
+
+  ngOnInit() {
+
+  }
+
+  stop() {
+
+  }
+
+  generate() {
+    // Do nothing if generate process is already going on
+    if (this.isWorking) {
+      return;
+    }
+
+    // Generate component if all required fields are entered.
+    if (this.isValid(this.form.controls.components)) {
+      const componentFormGroups: FormGroup[] = this.form.controls.components['controls'];
+      componentFormGroups.forEach(async componentGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateComponent(componentGroup)));
+      });
+      this.form.controls.components['controls'] = [];
+      this.generateConfig.component = false;
+    }
+
+    // Generate class if all required fields are entered.
+    if (this.isValid(this.form.controls.classes)) {
+      const classFormGroups: FormGroup[] = this.form.controls.classes['controls'];
+      classFormGroups.forEach(async classGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateClass(classGroup)));
+      });
+      this.form.controls.classes['controls'] = [];
+      this.generateConfig.class = false;
+    }
+
+    // Generate directives if all required fields are entered.
+    if (this.isValid(this.form.controls.directives)) {
+      const directiveFormGroups: FormGroup[] = this.form.controls.directives['controls'];
+      directiveFormGroups.forEach(async directiveGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateDirective(directiveGroup)));
+      });
+      this.form.controls.directives['controls'] = [];
+      this.generateConfig.directive = false;
+    }
+
+    // Generate enums if all required fields are entered.
+    if (this.isValid(this.form.controls.enums)) {
+      const enumFormGroups: FormGroup[] = this.form.controls.enums['controls'];
+      enumFormGroups.forEach(async enumGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateEnum(enumGroup)));
+      });
+      this.form.controls.enums['controls'] = [];
+      this.generateConfig.enum = false;
+    }
+
+    // Generate interfaces if all required fields are entered.
+    if (this.isValid(this.form.controls.interfaces)) {
+      const interfaceFormGroups: FormGroup[] = this.form.controls.interfaces['controls'];
+      interfaceFormGroups.forEach(async interfaceGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateInterface(interfaceGroup)));
+      });
+      this.form.controls.interfaces['controls'] = [];
+      this.generateConfig.interface = false;
+    }
+
+    // Generate modules if all required fields are entered.
+    if (this.isValid(this.form.controls.modules)) {
+      const moduleFormGroups: FormGroup[] = this.form.controls.modules['controls'];
+      moduleFormGroups.forEach(async moduleGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateModule(moduleGroup)));
+      });
+      this.form.controls.modules['controls'] = [];
+      this.generateConfig.module = false;
+    }
+
+    // Generate pipes if all required fields are entered.
+    if (this.isValid(this.form.controls.pipes)) {
+      const pipeFormGroups: FormGroup[] = this.form.controls.pipes['controls'];
+      pipeFormGroups.forEach(async pipeGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generatePipe(pipeGroup)));
+      });
+      this.form.controls.pipes['controls'] = [];
+      this.generateConfig.pipe = false;
+    }
+
+    // Generate services if all required fields are entered.
+    if (this.isValid(this.form.controls.services)) {
+      const serviceFormGroups: FormGroup[] = this.form.controls.services['controls'];
+      serviceFormGroups.forEach(async serviceGroup => {
+        await new Promise(resolve => setTimeout(resolve, 0, this.generateService(serviceGroup)));
+      });
+      this.form.controls.services['controls'] = [];
+      this.generateConfig.service = false;
+    }
+  }
+
+  /**
+   * Generate Components
+   */
+  generateComponent(component: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate component ${component.value['component-name']} ${this.cli.serialize(
+            component.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+ * Generate Classes
+ */
+  generateClass(_class: FormGroup) {
+    return new Promise((resolve, reject) => {
+
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate class ${_class.value['class-name']} ${this.cli.serialize(
+            _class.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Directives
+   */
+  generateDirective(directive: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate directive ${directive.value['directive-name']} ${this.cli.serialize(
+            directive.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Enums
+   */
+  generateEnum(_enum: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate enum ${_enum.value['enum-name']} ${this.cli.serialize(
+            _enum.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Interfaces
+   */
+  generateInterface(_interface: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      const interfaceType = _interface.value['interface-type'] ? _interface.value['interface-type'] : '';
+      this.cli
+        .runNgCommand(
+          `generate interface ${_interface.value['interface-name']} ${interfaceType} ${this.cli.serialize(
+            _interface.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Modules
+   */
+  generateModule(module: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate module ${module.value['module-name']} ${this.cli.serialize(
+            module.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Modules
+   */
+  generatePipe(pipe: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate pipe ${pipe.value['pipe-name']} ${this.cli.serialize(
+            pipe.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate Services
+   */
+  generateService(service: FormGroup) {
+    return new Promise((resolve, reject) => {
+      this.isWorking = true;
+      this.cli
+        .runNgCommand(
+          `generate service ${service.value['service-name']} ${this.cli.serialize(
+            service.value)}`,
+          this.form.value['root-dir'] + '/' + this.form.value['app-name'])
+        .subscribe((data: any) => {
+          this.isWorking = false;
+
+          if (data.stderr) {
+            this.onStdErr.next(data.stderr);
+            reject(data);
+          } else {
+            if (data.exit === 0) {
+              resolve(data);
+            } else {
+              this.onStdOut.next(data.stdout);
+            }
+          }
+        });
+    });
+  }
+
+
+  /**
+   * Event handler of onComponentAdded Event.
+   *
+   * Subscribe to the newly added component.
+   * Checks total number of valid components on the change event of component values.
+   */
+  addComponent(component: FormGroup) {
+    component.valueChanges.subscribe((data: any) => {
+      this.generateConfig.component = this.isValid(this.form.controls.components);
+    });
+  }
+
+  addClass(_class: FormGroup) {
+    _class.valueChanges.subscribe((data: any) => {
+      this.generateConfig.class = this.isValid(this.form.controls.classes);
+    });
+  }
+
+  addDirective(directive: FormGroup) {
+    directive.valueChanges.subscribe((data: any) => {
+      this.generateConfig.directive = this.isValid(this.form.controls.directives);
+      console.log(this.generateConfig);
+    });
+  }
+
+  addEnum(_enum: FormGroup) {
+    _enum.valueChanges.subscribe((data: any) => {
+      this.generateConfig.enum = this.isValid(this.form.controls.enums);
+      console.log(this.generateConfig);
+    });
+  }
+
+  addInterface(_interface: FormGroup) {
+    _interface.valueChanges.subscribe((data: any) => {
+      this.generateConfig.interface = this.isValid(this.form.controls.interfaces);
+      console.log(this.generateConfig);
+    });
+  }
+
+  addModule(module: FormGroup) {
+    module.valueChanges.subscribe((data: any) => {
+      this.generateConfig.module = this.isValid(this.form.controls.modules);
+      console.log(this.generateConfig);
+    });
+  }
+
+  addPipe(pipe: FormGroup) {
+    pipe.valueChanges.subscribe((data: any) => {
+      this.generateConfig.pipe = this.isValid(this.form.controls.pipes);
+      console.log(this.generateConfig);
+    });
+  }
+
+  addService(service: FormGroup) {
+    service.valueChanges.subscribe((data: any) => {
+      this.generateConfig.service = this.isValid(this.form.controls.services);
+      console.log(this.generateConfig);
+    });
+  }
+
+  /**
+   * Event handler of onComponentRemoved Event.
+   * It checks total number of valid components after a component is removed and enable generate form accordingly
+   */
+  removeComponent(index) {
+    this.generateConfig.component = this.isValid(this.form.controls.components);
+  }
+
+  removeClass(index) {
+    this.generateConfig.class = this.isValid(this.form.controls.classes);
+  }
+
+  /**
+   * Event handler of onComponentRemoved Event.
+   * It checks total number of valid components after a component is removed and enable generate form accordingly
+   */
+  removeDirective(index) {
+    this.generateConfig.directive = this.isValid(this.form.controls.directives);
+  }
+
+  removeEnum(index) {
+    this.generateConfig.enum = this.isValid(this.form.controls.enums);
+  }
+
+  removeInterface(index) {
+    this.generateConfig.interface = this.isValid(this.form.controls.interfaces);
+  }
+
+  removeModule(index) {
+    this.generateConfig.module = this.isValid(this.form.controls.modules);
+  }
+
+  removePipe(index) {
+    this.generateConfig.pipe = this.isValid(this.form.controls.pipes);
+  }
+
+  removeService(index) {
+    this.generateConfig.service = this.isValid(this.form.controls.services);
+  }
+
+  /**
+   * Check if required fields of all added components are filled and then check/uncheck checkbox accordingly
+   */
+  isValid(generateArray: any) {
+    const formGroups: FormGroup[] = generateArray.controls;
+    const validComponents = formGroups.filter((formGroup: FormGroup) => formGroup.valid);
+    return validComponents.length > 0 && validComponents.length === formGroups.length;
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/guards/guards.component.css b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/guards/guards.component.html b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.html
new file mode 100644
index 0000000..26e9499
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.html
@@ -0,0 +1,3 @@
+<p>
+  guards works!
+</p>
diff --git a/packages/klingon-ui/src/app/cli/generate/guards/guards.component.spec.ts b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.spec.ts
new file mode 100644
index 0000000..8ec2947
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GuardsComponent } from './guards.component';
+
+describe('GuardsComponent', () => {
+  let component: GuardsComponent;
+  let fixture: ComponentFixture<GuardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GuardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GuardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/klingon-ui/src/app/cli/generate/guards/guards.component.ts b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.ts
new file mode 100644
index 0000000..2a88f13
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/guards/guards.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-guards',
+  templateUrl: './guards.component.html',
+  styleUrls: ['./guards.component.css']
+})
+export class GuardsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/interface/interface.component.css b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.css
new file mode 100644
index 0000000..c67e322
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.css
@@ -0,0 +1,7 @@
+.interface-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/interface/interface.component.html b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.html
new file mode 100644
index 0000000..03fb51b
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.html
@@ -0,0 +1,61 @@
+<p *ngIf="form.get('interfaces').controls.length === 0">
+  Please add interface to continue
+</p>
+<app-drop-down *ngFor="let interface of form.get('interfaces').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ interface.value['interface-name'] ? interface.value['interface-name'] : 'Interface '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Interface</h6>
+  <main class="content" [formGroup]="interface">
+
+    <div class="interface-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="interface-name" matInput placeholder="The name of the new interface."
+            required>
+          <mat-hint align="start">The name of the new interface.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="interface-type" matInput placeholder="Adds a developer-defined type to the filename, in the format 'name.type.ts'.">
+          <mat-hint align="start">Adds a developer-defined type to the filename, in the format "name.type.ts".</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="prefix" matInput placeholder="A prefix to apply to generated selectors.">
+          <mat-hint align="start">A prefix to apply to generated selectors.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project">
+          <mat-hint align="start">The name of the project</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the directive.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeInterface(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewInterface($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/interface/interface.component.ts b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.ts
new file mode 100644
index 0000000..82076f2
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/interface/interface.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-interface',
+  templateUrl: './interface.component.html',
+  styleUrls: ['./interface.component.css']
+})
+export class InterfaceComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onInterfaceAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onInterfaceRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildInterfaceForm() {
+    return new FormGroup({
+      'interface-name': new FormControl('', Validators.required),
+      'interface-type': new FormControl(''),
+      'prefix': new FormControl(''),
+      'project': new FormControl(''),
+      'lint-fix': new FormControl(false)
+    });
+  }
+  
+  addNewInterface(event) {
+    const formGroup = InterfaceComponent.buildInterfaceForm();
+    this.form.controls.interfaces['controls'].push(formGroup);
+    this.onInterfaceAdded.emit(formGroup);
+  }
+
+  removeInterface(index) {
+    this.form.controls.interfaces['controls'].splice(index, 1);
+    this.onInterfaceRemoved.emit(index);
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/library/library.component.css b/packages/klingon-ui/src/app/cli/generate/library/library.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/library/library.component.html b/packages/klingon-ui/src/app/cli/generate/library/library.component.html
new file mode 100644
index 0000000..bff1e01
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/library/library.component.html
@@ -0,0 +1,3 @@
+<p>
+  library works!
+</p>
diff --git a/packages/klingon-ui/src/app/cli/generate/library/library.component.spec.ts b/packages/klingon-ui/src/app/cli/generate/library/library.component.spec.ts
new file mode 100644
index 0000000..82bc7e4
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/library/library.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibraryComponent } from './library.component';
+
+describe('LibraryComponent', () => {
+  let component: LibraryComponent;
+  let fixture: ComponentFixture<LibraryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LibraryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibraryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/klingon-ui/src/app/cli/generate/library/library.component.ts b/packages/klingon-ui/src/app/cli/generate/library/library.component.ts
new file mode 100644
index 0000000..49379ef
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/library/library.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-library',
+  templateUrl: './library.component.html',
+  styleUrls: ['./library.component.css']
+})
+export class LibraryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/module/module.component.css b/packages/klingon-ui/src/app/cli/generate/module/module.component.css
new file mode 100644
index 0000000..0f9e142
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/module/module.component.css
@@ -0,0 +1,7 @@
+.module-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/module/module.component.html b/packages/klingon-ui/src/app/cli/generate/module/module.component.html
new file mode 100644
index 0000000..af0a6fe
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/module/module.component.html
@@ -0,0 +1,68 @@
+<p *ngIf="form.get('modules').controls.length === 0">
+  Please add module to continue
+</p>
+<app-drop-down *ngFor="let module of form.get('modules').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ module.value['module-name'] ? module.value['module-name'] : 'Module '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Application Module</h6>
+  <main class="content" [formGroup]="module">
+
+    <div class="module-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="module-name" matInput placeholder="The name of the NgModule."
+            required>
+          <mat-hint align="start">The name of the NgModule.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="module" matInput placeholder="The declaring NgModule. (-m)">
+          <mat-hint align="start">The declaring NgModule.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project. (-m)">
+          <mat-hint align="start">The name of the project.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-select formControlName="routing-scope" placeholder="The scope for the new routing module. (Default: Child)">
+            <mat-option *ngFor="let value of routingScopes" [value]="value">
+              {{value}}
+            </mat-option>
+          </mat-select>
+          <mat-hint align="start">The scope for the new routing module.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="routing">When true, creates a routing module (Default: false).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">Flag to indicate if a dir is created.</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeModule(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewModule($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/module/module.component.ts b/packages/klingon-ui/src/app/cli/generate/module/module.component.ts
new file mode 100644
index 0000000..97a287c
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/module/module.component.ts
@@ -0,0 +1,48 @@
+import { Component, Input, EventEmitter, Output } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-module',
+  templateUrl: './module.component.html',
+  styleUrls: ['./module.component.css']
+})
+export class ModuleComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onModuleAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onModuleRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  routingScopes: string[] = ['Child', 'Root'];
+
+  static buildModuleForm() {
+    return new FormGroup({
+      'module-name': new FormControl('', Validators.required),
+      'module': new FormControl(''),
+      'project': new FormControl(''),
+      'routing-scope': new FormControl(''),
+      'routing': new FormControl(false),
+      'flat': new FormControl(false)
+    });
+  }
+
+  addNewModule(event) {
+    const formGroup = ModuleComponent.buildModuleForm();
+    this.form.controls.modules['controls'].push(formGroup);
+    this.onModuleAdded.emit(formGroup);
+  }
+
+  removeModule(index) {
+    this.form.controls.modules['controls'].splice(index, 1);
+    this.onModuleRemoved.emit(index);
+  }
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.css b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.css
new file mode 100644
index 0000000..9d3e2e9
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.css
@@ -0,0 +1,7 @@
+.pipe-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.html b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.html
new file mode 100644
index 0000000..edad60f
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.html
@@ -0,0 +1,67 @@
+<p *ngIf="form.get('pipes').controls.length === 0">
+  Please add pipe to continue
+</p>
+<app-drop-down *ngFor="let pipe of form.get('pipes').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ pipe.value['pipe-name'] ? pipe.value['pipe-name'] : 'Pipe '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Pipe</h6>
+  <main class="content" [formGroup]="pipe">
+
+    <div class="pipe-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="pipe-name" matInput placeholder="The name of the pipe."
+            required>
+          <mat-hint align="start">The name of the pipe.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="module" matInput placeholder="The declaring NgModule. (-m)">
+          <mat-hint align="start">The declaring NgModule.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project.">
+          <mat-hint align="start">The name of the project.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="export">When true, the declaring NgModule exports this pipe. (Default: false).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">When true (the default) creates files at the top level of the project. (Default: true).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the pipe. (Default: false).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="skip-import">When true, does not import this pipe into the owning NgModule. (Default: false).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">When true (the default), generates a "spec.ts" test file for the new pipe. (Default: true).</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removePipe(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewPipe($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.ts b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.ts
new file mode 100644
index 0000000..4fb2762
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/pipe/pipe.component.ts
@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-pipe',
+  templateUrl: './pipe.component.html',
+  styleUrls: ['./pipe.component.css']
+})
+export class PipeComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onPipeAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onPipeRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildPipeForm() {
+    return new FormGroup({
+      'pipe-name': new FormControl('', Validators.required),
+      'module': new FormControl(''),
+      'project': new FormControl(''),
+      'routing-scope': new FormControl(''),
+      'export': new FormControl(false),
+      'flat': new FormControl(true),
+      'lint-fix': new FormControl(false),
+      'skip-import': new FormControl(false),
+      'spec': new FormControl(true)
+    });
+  }
+
+  addNewPipe(event) {
+    const formGroup = PipeComponent.buildPipeForm();
+    this.form.controls.pipes['controls'].push(formGroup);
+    this.onPipeAdded.emit(formGroup);
+  }
+
+  removePipe(index) {
+    this.form.controls.pipes['controls'].splice(index, 1);
+    this.onPipeRemoved.emit(index);
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/service/service.component.css b/packages/klingon-ui/src/app/cli/generate/service/service.component.css
new file mode 100644
index 0000000..2016361
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/service/service.component.css
@@ -0,0 +1,7 @@
+.service-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/service/service.component.html b/packages/klingon-ui/src/app/cli/generate/service/service.component.html
new file mode 100644
index 0000000..b88f456
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/service/service.component.html
@@ -0,0 +1,54 @@
+<p *ngIf="form.get('services').controls.length === 0">
+  Please add service to continue
+</p>
+<app-drop-down *ngFor="let service of form.get('services').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ service.value['service-name'] ? service.value['service-name'] : 'Service '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Service</h6>
+  <main class="content" [formGroup]="service">
+    <div class="service-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="service-name" matInput placeholder="The name of the service."
+            required>
+          <mat-hint align="start">The name of the service.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project.">
+          <mat-hint align="start">The name of the project.</mat-hint>
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-list>
+          <mat-list-item>
+            <mat-checkbox formControlName="flat">When true (the default) creates files at the top level of the project. (Default: true).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="lint-fix">When true, applies lint fixes after generating the pipe. (Default: false).</mat-checkbox>
+          </mat-list-item>
+          <mat-list-item>
+            <mat-checkbox formControlName="spec">When true (the default), generates a "spec.ts" test file for the new pipe. (Default: true).</mat-checkbox>
+          </mat-list-item>
+        </mat-list>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeService(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewService($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/service/service.component.ts b/packages/klingon-ui/src/app/cli/generate/service/service.component.ts
new file mode 100644
index 0000000..0e971db
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/service/service.component.ts
@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-generate-service',
+  templateUrl: './service.component.html',
+  styleUrls: ['./service.component.css']
+})
+export class ServiceComponent {
+
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onServiceAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onServiceRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildServiceForm() {
+    return new FormGroup({
+      'service-name': new FormControl('', Validators.required),
+      'project': new FormControl(''),
+      'flat': new FormControl(true),
+      'lint-fix': new FormControl(false),
+      'spec': new FormControl(true)
+    });
+  }
+
+  addNewService(event) {
+    const formGroup = ServiceComponent.buildServiceForm();
+    this.form.controls.services['controls'].push(formGroup);
+    this.onServiceAdded.emit(formGroup);
+  }
+
+  removeService(index) {
+    this.form.controls.services['controls'].splice(index, 1);
+    this.onServiceRemoved.emit(index);
+  }
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.css b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.css
new file mode 100644
index 0000000..83e8848
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.css
@@ -0,0 +1,7 @@
+.serviceworker-form mat-form-field {
+    width: 100%
+  }
+
+  mat-action-row {
+    border: none;
+  }
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.html b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.html
new file mode 100644
index 0000000..b900752
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.html
@@ -0,0 +1,35 @@
+<p *ngIf="form.get('serviceworkers').controls.length === 0">
+  Please add service worker to continue
+</p>
+<app-drop-down *ngFor="let sw of form.get('serviceworkers').controls; let i = index">
+  <h3 class="title component-title">
+    <span>
+      {{ sw.value['sw-name'] ? sw.value['sw-name'] : 'Service Worker '+(i+1) }}
+    </span>
+  </h3>
+  <h6 class="sub-title">Service Worker</h6>
+  <main class="content" [formGroup]="serviceworker">
+
+    <div class="serviceworker-form">
+      <p>
+        <mat-form-field>
+          <input formControlName="project" matInput placeholder="The name of the project.">
+          <mat-hint align="start">The name of the project.</mat-hint>
+        </mat-form-field>
+      </p>
+    </div>
+  </main>
+  <div class="action">
+    <button mat-icon-button type="button" (click)="removeServiceWorker(i);">
+      <mat-icon aria-label="Example icon-button with a heart icon">remove_circle</mat-icon>
+    </button>
+  </div>
+
+</app-drop-down>
+<mat-action-row>
+  <button mat-mini-fab color="primary" type="button" (click)="addNewServiceWorker($event)">
+    <i class="material-icons action">
+      add
+    </i>
+  </button>
+</mat-action-row>
\ No newline at end of file
diff --git a/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.ts b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.ts
new file mode 100644
index 0000000..169088e
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/serviceworker/serviceworker.component.ts
@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-serviceworker',
+  templateUrl: './serviceworker.component.html',
+  styleUrls: ['./serviceworker.component.css']
+})
+export class ServiceworkerComponent {
+  
+  @Input()
+  public form: FormGroup;
+
+  @Input()
+  public index: number;
+
+  @Output()
+  onServiceWorkerAdded: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  onServiceWorkerRemoved: EventEmitter<any> = new EventEmitter<any>();
+
+  formControls: FormControl[];
+
+  static buildServiceWorkerForm() {
+    return new FormGroup({
+      'project': new FormControl(''),
+    });
+  }
+
+  addNewServiceWorker(event) {
+    const formGroup = ServiceworkerComponent.buildServiceWorkerForm();
+    this.form.controls.serviceworkers['controls'].push(formGroup);
+    this.onServiceWorkerAdded.emit(formGroup);
+  }
+
+  removeServiceWorker(index) {
+    this.form.controls.serviceworkers['controls'].splice(index, 1);
+    this.onServiceWorkerRemoved.emit(index);
+  }
+}
diff --git a/packages/klingon-ui/src/app/cli/generate/universals/universals.component.css b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/klingon-ui/src/app/cli/generate/universals/universals.component.html b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.html
new file mode 100644
index 0000000..103acef
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.html
@@ -0,0 +1,3 @@
+<p>
+  universals works!
+</p>
diff --git a/packages/klingon-ui/src/app/cli/generate/universals/universals.component.spec.ts b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.spec.ts
new file mode 100644
index 0000000..f908003
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UniversalsComponent } from './universals.component';
+
+describe('UniversalsComponent', () => {
+  let component: UniversalsComponent;
+  let fixture: ComponentFixture<UniversalsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UniversalsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UniversalsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/klingon-ui/src/app/cli/generate/universals/universals.component.ts b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.ts
new file mode 100644
index 0000000..e79851f
--- /dev/null
+++ b/packages/klingon-ui/src/app/cli/generate/universals/universals.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-universals',
+  templateUrl: './universals.component.html',
+  styleUrls: ['./universals.component.css']
+})
+export class UniversalsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/packages/klingon-ui/src/app/cli/serve/serve.component.ts b/packages/klingon-ui/src/app/cli/serve/serve.component.ts
index 8865175..cff8721 100644
--- a/packages/klingon-ui/src/app/cli/serve/serve.component.ts
+++ b/packages/klingon-ui/src/app/cli/serve/serve.component.ts
@@ -22,7 +22,7 @@ export class CliServeComponent extends FlagsComponent implements OnInit {
     this.isWorking = true;
     this.cli
       .runNgCommand(`serve ${this.cli.serialize(this.form.value)}`, this.form.value['dir'] + '/' + this.form.value['app'])
-      .subscribe(data => {
+      .subscribe((data: any) => {
         this.isWorking = false;
 
         if (data.stderr) {
diff --git a/packages/klingon-ui/src/app/cli/test/test.component.ts b/packages/klingon-ui/src/app/cli/test/test.component.ts
index 2dd1e8d..be23aec 100644
--- a/packages/klingon-ui/src/app/cli/test/test.component.ts
+++ b/packages/klingon-ui/src/app/cli/test/test.component.ts
@@ -22,7 +22,7 @@ export class CliTestComponent extends FlagsComponent implements OnInit {
     this.isWorking = true;
     this.cli
       .runNgCommand(`test ${this.cli.serialize(this.form.value)}`)
-      .subscribe(data => {
+      .subscribe( (data: any) => {
         this.isWorking = false;
 
         if (data.stderr) {