diff --git a/src/commands/emulators-exec.ts b/src/commands/emulators-exec.ts
index 9903f5b6945..dec4b551176 100644
--- a/src/commands/emulators-exec.ts
+++ b/src/commands/emulators-exec.ts
@@ -101,7 +101,7 @@ module.exports = new Command("emulators:exec <script>")
     }
     let exitCode = 0;
     try {
-      await controller.startAll(options);
+      await controller.startAll(options, /* noGui = */ true);
       exitCode = await runScript(script, extraEnv);
     } catch (e) {
       logger.debug("Error in emulators:exec", e);
diff --git a/src/emulator/constants.ts b/src/emulator/constants.ts
index 6e077e1dd01..fe424ba0e89 100644
--- a/src/emulator/constants.ts
+++ b/src/emulator/constants.ts
@@ -3,7 +3,8 @@ import * as url from "url";
 import { Address, Emulators } from "./types";
 
 const DEFAULT_PORTS: { [s in Emulators]: number } = {
-  hub: 4000,
+  gui: 4000,
+  hub: 4400,
   hosting: 5000,
   functions: 5001,
   firestore: 8080,
@@ -59,6 +60,16 @@ export class Constants {
     return { host, port };
   }
 
+  static description(name: Emulators): string {
+    if (name === Emulators.HUB) {
+      return "emulator hub";
+    } else if (name === Emulators.GUI) {
+      return "emulator GUI";
+    } else {
+      return `${name} emulator`;
+    }
+  }
+
   private static normalizeHost(host: string): string {
     let normalized = host;
     if (!normalized.startsWith("http")) {
diff --git a/src/emulator/controller.ts b/src/emulator/controller.ts
index 5e5dee150cc..a275fb70bdd 100644
--- a/src/emulator/controller.ts
+++ b/src/emulator/controller.ts
@@ -9,7 +9,12 @@ import * as logger from "../logger";
 import * as utils from "../utils";
 import * as track from "../track";
 import { EmulatorRegistry } from "../emulator/registry";
-import { EmulatorInstance, Emulators, ALL_SERVICE_EMULATORS } from "../emulator/types";
+import {
+  EmulatorInstance,
+  Emulators,
+  ALL_SERVICE_EMULATORS,
+  EMULATORS_SUPPORTED_BY_GUI,
+} from "../emulator/types";
 import { Constants } from "../emulator/constants";
 import { FunctionsEmulator } from "../emulator/functionsEmulator";
 import { DatabaseEmulator, DatabaseEmulatorArgs } from "../emulator/databaseEmulator";
@@ -21,6 +26,8 @@ import { PubsubEmulator } from "./pubsubEmulator";
 import * as commandUtils from "./commandUtils";
 import { EmulatorHub } from "./hub";
 import { ExportMetadata, HubExport } from "./hubExport";
+import { EmulatorGUI } from "./gui";
+import previews = require("../previews");
 
 export async function checkPortOpen(port: number, host: string): Promise<boolean> {
   try {
@@ -52,7 +59,7 @@ export async function startEmulator(instance: EmulatorInstance): Promise<void> {
   const portOpen = await checkPortOpen(port, host);
   if (!portOpen) {
     await cleanShutdown();
-    const description = name === Emulators.HUB ? "emulator hub" : `${name} emulator`;
+    const description = Constants.description(name);
     utils.logWarning(`Port ${port} is not open on ${host}, could not start ${description}.`);
     utils.logBullet(`To select a different host/port for the emulator, update your "firebase.json":
     {
@@ -74,15 +81,14 @@ export async function cleanShutdown(): Promise<boolean> {
   utils.logBullet("Shutting down emulators.");
 
   for (const name of EmulatorRegistry.listRunning()) {
-    const description = name === Emulators.HUB ? "emulator hub" : `${name} emulator`;
-    utils.logBullet(`Stopping ${description}`);
+    utils.logBullet(`Stoppping ${Constants.description(name)}`);
     await EmulatorRegistry.stop(name);
   }
 
   return true;
 }
 
-export function filterEmulatorTargets(options: any): string[] {
+export function filterEmulatorTargets(options: any): Emulators[] {
   let targets = ALL_SERVICE_EMULATORS.filter((e) => {
     return options.config.has(e) || options.config.has(`emulators.${e}`);
   });
@@ -96,15 +102,23 @@ export function filterEmulatorTargets(options: any): string[] {
 
 export function shouldStart(options: any, name: Emulators): boolean {
   if (name === Emulators.HUB) {
-    // The hub only starts if we know the project ID
+    // The hub only starts if we know the project ID.
     return !!options.project;
   }
-
   const targets = filterEmulatorTargets(options);
+  if (name === Emulators.GUI) {
+    // The GUI only starts if we know the project ID AND at least one emulator
+    // supported by GUI is launching.
+    return (
+      previews.emulatorgui &&
+      !!options.project &&
+      targets.some((target) => EMULATORS_SUPPORTED_BY_GUI.indexOf(target) >= 0)
+    );
+  }
   return targets.indexOf(name) >= 0;
 }
 
-export async function startAll(options: any): Promise<void> {
+export async function startAll(options: any, noGui: boolean = false): Promise<void> {
   // Emulators config is specified in firebase.json as:
   // "emulators": {
   //   "firestore": {
@@ -148,7 +162,9 @@ export async function startAll(options: any): Promise<void> {
     if (hubPort != hubAddr.port) {
       utils.logLabeledWarning(
         "emulators",
-        `Emulator hub unable to start on port ${hubAddr.port}, starting on ${hubPort}`
+        `${Constants.description(Emulators.HUB)} unable to start on port ${
+          hubAddr.port
+        }, starting on ${hubPort}`
       );
     }
 
@@ -320,6 +336,34 @@ export async function startAll(options: any): Promise<void> {
     await startEmulator(pubsubEmulator);
   }
 
+  if (!noGui && shouldStart(options, Emulators.GUI)) {
+    // For the GUI we actually will find any available port
+    // since we don't want to explode if the GUI can't start on 3000.
+    const guiAddr = Constants.getAddress(Emulators.GUI, options);
+    const guiPort = await pf.getPortPromise({
+      host: guiAddr.host,
+      port: guiAddr.port,
+      stopPort: guiAddr.port + 100,
+    });
+
+    if (guiPort != guiAddr.port) {
+      utils.logLabeledWarning(
+        Emulators.GUI,
+        `${Constants.description(Emulators.GUI)} unable to start on port ${
+          guiAddr.port
+        }, starting on ${guiPort}`
+      );
+    }
+
+    const gui = new EmulatorGUI({
+      projectId,
+      host: guiAddr.host,
+      port: guiPort,
+      auto_download: true,
+    });
+    await startEmulator(gui);
+  }
+
   const running = EmulatorRegistry.listRunning();
   for (const name of running) {
     const instance = EmulatorRegistry.get(name);
diff --git a/src/emulator/gui.ts b/src/emulator/gui.ts
new file mode 100644
index 00000000000..95746f8964a
--- /dev/null
+++ b/src/emulator/gui.ts
@@ -0,0 +1,56 @@
+import { EmulatorInstance, EmulatorInfo, Emulators } from "./types";
+import * as javaEmulators from "../serve/javaEmulators";
+import { EmulatorRegistry } from "./registry";
+import { EmulatorHub } from "./hub";
+import { FirebaseError } from "../error";
+import { Constants } from "./constants";
+
+export interface EmulatorGUIOptions {
+  port: number;
+  host: string;
+  projectId: string;
+  auto_download?: boolean;
+}
+
+export class EmulatorGUI implements EmulatorInstance {
+  constructor(private args: EmulatorGUIOptions) {}
+
+  start(): Promise<void> {
+    if (!EmulatorRegistry.isRunning(Emulators.HUB)) {
+      throw new FirebaseError(
+        `Cannot start ${Constants.description(Emulators.GUI)} without ${Constants.description(
+          Emulators.HUB
+        )}!`
+      );
+    }
+    const hubInfo = EmulatorRegistry.get(Emulators.HUB)!.getInfo();
+    const { auto_download, host, port, projectId } = this.args;
+    const env: NodeJS.ProcessEnv = {
+      HOST: host.toString(),
+      PORT: port.toString(),
+      GCLOUD_PROJECT: projectId,
+      [EmulatorHub.EMULATOR_HUB_ENV]: `${hubInfo.host}:${hubInfo.port}`,
+    };
+
+    return javaEmulators.start(Emulators.GUI, { auto_download }, env);
+  }
+
+  async connect(): Promise<void> {
+    return;
+  }
+
+  stop(): Promise<void> {
+    return javaEmulators.stop(Emulators.GUI);
+  }
+
+  getInfo(): EmulatorInfo {
+    return {
+      host: this.args.host,
+      port: this.args.port,
+    };
+  }
+
+  getName(): Emulators {
+    return Emulators.GUI;
+  }
+}
diff --git a/src/emulator/registry.ts b/src/emulator/registry.ts
index e0039f7b6ce..2de4284b0a8 100644
--- a/src/emulator/registry.ts
+++ b/src/emulator/registry.ts
@@ -4,6 +4,7 @@ import { ALL_EMULATORS, EmulatorInstance, Emulators } from "./types";
 import { FirebaseError } from "../error";
 import * as utils from "../utils";
 import * as controller from "./controller";
+import { Constants } from "./constants";
 
 /**
  * Static registry for running emulators to discover each other.
@@ -13,8 +14,9 @@ import * as controller from "./controller";
  */
 export class EmulatorRegistry {
   static async start(instance: EmulatorInstance): Promise<void> {
+    const description = Constants.description(instance.getName());
     if (this.isRunning(instance.getName())) {
-      throw new FirebaseError(`Emulator ${instance.getName()} is already running!`, {});
+      throw new FirebaseError(`${description} is already running!`, {});
     }
 
     // Start the emulator and wait for it to grab its assigned port.
@@ -25,17 +27,10 @@ export class EmulatorRegistry {
 
     this.set(instance.getName(), instance);
 
-    if (instance.getName() === Emulators.HUB) {
-      utils.logLabeledSuccess(
-        "emulators",
-        `Emulator hub started at ${clc.bold.underline(`http://${info.host}:${info.port}`)}`
-      );
-    } else {
-      utils.logLabeledSuccess(
-        instance.getName(),
-        `Emulator started at ${clc.bold.underline(`http://${info.host}:${info.port}`)}`
-      );
-    }
+    utils.logLabeledSuccess(
+      instance.getName(),
+      `${description} started at ${clc.bold.underline(`http://${info.host}:${info.port}`)}`
+    );
   }
 
   static async stop(name: Emulators): Promise<void> {
diff --git a/src/emulator/types.ts b/src/emulator/types.ts
index 7948d458b8e..1c97e72efd4 100644
--- a/src/emulator/types.ts
+++ b/src/emulator/types.ts
@@ -8,10 +8,20 @@ export enum Emulators {
   DATABASE = "database",
   HOSTING = "hosting",
   PUBSUB = "pubsub",
+  GUI = "gui",
 }
 
-export type JavaEmulators = Emulators.FIRESTORE | Emulators.DATABASE | Emulators.PUBSUB;
-export const JAVA_EMULATORS = [Emulators.FIRESTORE, Emulators.DATABASE, Emulators.PUBSUB];
+export type JavaEmulators =
+  | Emulators.FIRESTORE
+  | Emulators.DATABASE
+  | Emulators.PUBSUB
+  | Emulators.GUI;
+export const JAVA_EMULATORS = [
+  Emulators.FIRESTORE,
+  Emulators.DATABASE,
+  Emulators.PUBSUB,
+  Emulators.GUI,
+];
 
 export type ImportExportEmulators = Emulators.FIRESTORE;
 export const IMPORT_EXPORT_EMULATORS = [Emulators.FIRESTORE];
@@ -24,8 +34,10 @@ export const ALL_SERVICE_EMULATORS = [
   Emulators.PUBSUB,
 ];
 
+export const EMULATORS_SUPPORTED_BY_GUI = [Emulators.DATABASE];
+
 // TODO: Is there a way we can just allow iteration over the enum?
-export const ALL_EMULATORS = [Emulators.HUB, ...ALL_SERVICE_EMULATORS];
+export const ALL_EMULATORS = [Emulators.HUB, Emulators.GUI, ...ALL_SERVICE_EMULATORS];
 
 export function isJavaEmulator(value: string): value is JavaEmulators {
   return isEmulator(value) && JAVA_EMULATORS.indexOf(value) >= 0;
diff --git a/src/previews.js b/src/previews.js
index a7b61bf81e1..27118046901 100644
--- a/src/previews.js
+++ b/src/previews.js
@@ -7,6 +7,7 @@ var previews = _.assign(
   {
     // insert previews here...
     rtdbrules: false,
+    emulatorgui: false,
   },
   configstore.get("previews")
 );
diff --git a/src/serve/javaEmulators.ts b/src/serve/javaEmulators.ts
index 737ff7cba09..c7082271649 100644
--- a/src/serve/javaEmulators.ts
+++ b/src/serve/javaEmulators.ts
@@ -50,6 +50,19 @@ const DownloadDetails: { [s in JavaEmulators]: EmulatorDownloadDetails } = {
       namePrefix: "cloud-firestore-emulator",
     },
   },
+  gui: {
+    version: "0.0.1",
+    downloadPath: path.join(CACHE_DIR, "gui-v0.0.1.zip"),
+    unzipDir: path.join(CACHE_DIR, "gui-v0.0.1"),
+    binaryPath: path.join(CACHE_DIR, "gui-v0.0.1", `server.bundle.js`),
+    opts: {
+      cacheDir: CACHE_DIR,
+      remoteUrl: "https://storage.googleapis.com/firebase-preview-drop/emulator/gui-v0.0.1.zip",
+      expectedSize: 1204964,
+      expectedChecksum: "52847b962bb66de639487d96a07a69d3",
+      namePrefix: "gui",
+    },
+  },
   pubsub: {
     downloadPath: path.join(CACHE_DIR, "pubsub-emulator-0.1.0.zip"),
     version: "0.1.0",
@@ -86,6 +99,11 @@ const EmulatorDetails: { [s in JavaEmulators]: JavaEmulatorDetails } = {
     instance: null,
     stdout: null,
   },
+  gui: {
+    name: Emulators.GUI,
+    instance: null,
+    stdout: null,
+  },
 };
 
 const Commands: { [s in JavaEmulators]: JavaEmulatorCommand } = {
@@ -114,6 +132,12 @@ const Commands: { [s in JavaEmulators]: JavaEmulatorCommand } = {
     optionalArgs: ["port", "host"],
     joinArgs: true,
   },
+  gui: {
+    binary: "node",
+    args: [getExecPath(Emulators.GUI)],
+    optionalArgs: [],
+    joinArgs: false,
+  },
 };
 
 function getExecPath(name: JavaEmulators): string {
@@ -178,12 +202,14 @@ function _fatal(emulator: JavaEmulatorDetails, errorMsg: string): void {
 
 async function _runBinary(
   emulator: JavaEmulatorDetails,
-  command: JavaEmulatorCommand
+  command: JavaEmulatorCommand,
+  extraEnv: NodeJS.ProcessEnv
 ): Promise<void> {
   return new Promise((resolve) => {
     emulator.stdout = fs.createWriteStream(_getLogFileName(emulator.name));
     try {
       emulator.instance = childProcess.spawn(command.binary, command.args, {
+        env: { ...process.env, ...extraEnv },
         stdio: ["inherit", "pipe", "pipe"],
       });
     } catch (e) {
@@ -199,14 +225,16 @@ async function _runBinary(
       _fatal(emulator, e);
     }
 
+    const description = Constants.description(emulator.name);
+
     if (emulator.instance == null) {
-      utils.logLabeledWarning(emulator.name, "Could not spawn child process for emulator.");
+      utils.logLabeledWarning(emulator.name, `Could not spawn child process for ${description}.`);
       return;
     }
 
     utils.logLabeledBullet(
       emulator.name,
-      `Emulator logging to ${clc.bold(_getLogFileName(emulator.name))}`
+      `${description} logging to ${clc.bold(_getLogFileName(emulator.name))}`
     );
 
     emulator.instance.stdout.on("data", (data) => {
@@ -222,17 +250,17 @@ async function _runBinary(
       if (err.path === "java" && err.code === "ENOENT") {
         _fatal(
           emulator,
-          "emulator has exited because java is not installed, you can install it from https://openjdk.java.net/install/"
+          `${description} has exited because java is not installed, you can install it from https://openjdk.java.net/install/`
         );
       } else {
-        _fatal(emulator, "emulator has exited: " + err);
+        _fatal(emulator, `${description} has exited: ${err}`);
       }
     });
     emulator.instance.once("exit", (code, signal) => {
       if (signal) {
-        utils.logWarning(`${emulator.name} emulator has exited upon receiving signal: ${signal}`);
+        utils.logWarning(`${description} has exited upon receiving signal: ${signal}`);
       } else if (code && code !== 0 && code !== /* SIGINT */ 130) {
-        _fatal(emulator, `emulator has exited with code: ${code}`);
+        _fatal(emulator, `${description} has exited with code: ${code}`);
       }
     });
     resolve();
@@ -253,7 +281,8 @@ export async function stop(targetName: JavaEmulators): Promise<void> {
     if (emulator.instance) {
       const killTimeout = setTimeout(() => {
         const pid = emulator.instance ? emulator.instance.pid : -1;
-        const errorMsg = emulator.name + ": Unable to terminate emulator process (PID=" + pid + ")";
+        const errorMsg =
+          Constants.description(emulator.name) + ": Unable to terminate process (PID=" + pid + ")";
         logger.debug(errorMsg);
         reject(new FirebaseError(emulator.name + ": " + errorMsg));
       }, EMULATOR_INSTANCE_KILL_TIMEOUT);
@@ -279,7 +308,11 @@ export async function downloadIfNecessary(targetName: JavaEmulators): Promise<vo
   await downloadEmulator(targetName);
 }
 
-export async function start(targetName: JavaEmulators, args: any): Promise<void> {
+export async function start(
+  targetName: JavaEmulators,
+  args: any,
+  extraEnv: NodeJS.ProcessEnv = {}
+): Promise<void> {
   const downloadDetails = DownloadDetails[targetName];
   const emulator = EmulatorDetails[targetName];
   const hasEmulator = fs.existsSync(getExecPath(targetName));
@@ -287,9 +320,9 @@ export async function start(targetName: JavaEmulators, args: any): Promise<void>
     if (args.auto_download) {
       if (process.env.CI) {
         utils.logWarning(
-          `It appears you are running in a CI environment. You can avoid downloading the ${targetName} emulator repeatedly by caching the ${
-            downloadDetails.opts.cacheDir
-          } directory.`
+          `It appears you are running in a CI environment. You can avoid downloading the ${Constants.description(
+            targetName
+          )} repeatedly by caching the ${downloadDetails.opts.cacheDir} directory.`
         );
       }
 
@@ -301,6 +334,8 @@ export async function start(targetName: JavaEmulators, args: any): Promise<void>
   }
 
   const command = _getCommand(targetName, args);
-  logger.debug(`Starting emulator ${targetName} with command ${JSON.stringify(command)}`);
-  return _runBinary(emulator, command);
+  logger.debug(
+    `Starting ${Constants.description(targetName)} with command ${JSON.stringify(command)}`
+  );
+  return _runBinary(emulator, command, extraEnv);
 }