diff --git a/tensorflow/tensorboard/components/vz_projector/data-provider-demo.ts b/tensorflow/tensorboard/components/vz_projector/data-provider-demo.ts
index a839ad4a0b3..643862c797a 100644
--- a/tensorflow/tensorboard/components/vz_projector/data-provider-demo.ts
+++ b/tensorflow/tensorboard/components/vz_projector/data-provider-demo.ts
@@ -20,69 +20,15 @@ import * as logging from './logging';
 
 /** Data provider that loads data from a demo folder. */
 export class DemoDataProvider implements DataProvider {
-  /** List of demo datasets for showing the capabilities of the tool. */
-  private DEMO_CONFIG: ProjectorConfig = {
-    embeddings: [
-      {
-        tensorName: 'Word2Vec 5K',
-        tensorShape: [5000, 200],
-        tensorPath: 'word2vec_5000_200d_tensors.tsv',
-        metadataPath: 'word2vec_5000_200d_labels.tsv'
-      },
-      {
-        tensorName: 'Word2Vec 10K',
-        tensorShape: [10000, 200],
-        tensorPath: 'word2vec_10000_200d_tensors.tsv',
-        metadataPath: 'word2vec_10000_200d_labels.tsv'
-      },
-      {
-        tensorName: 'Word2Vec All',
-        tensorShape: [71291, 200],
-        tensorPath: 'word2vec_full_200d_tensors.tsv',
-        metadataPath: 'word2vec_full_200d_labels.tsv'
-      },
-      {
-        tensorName: 'SmartReply 5K',
-        tensorShape: [5000, 256],
-        tensorPath: 'smartreply_5000_256d_tensors.tsv',
-        metadataPath: 'smartreply_5000_256d_labels.tsv'
-      },
-      {
-        tensorName: 'SmartReply All',
-        tensorShape: [35860, 256],
-        tensorPath: 'smartreply_full_256d_tensors.tsv',
-        metadataPath: 'smartreply_full_256d_labels.tsv'
-      },
-      {
-        tensorName: 'Mnist with images 10K',
-        tensorShape: [10000, 784],
-        tensorPath: 'mnist_10k_784d_tensors.tsv',
-        metadataPath: 'mnist_10k_784d_labels.tsv',
-        sprite: {
-          imagePath: 'mnist_10k_sprite.png',
-          singleImageDim: [28, 28]
-        }
-      },
-      {
-        tensorName: 'Iris',
-        tensorShape: [150, 4],
-        tensorPath: 'iris_tensors.tsv',
-        metadataPath: 'iris_labels.tsv'
-      },
-      {
-        tensorName: 'Unit Cube',
-        tensorShape: [8, 3],
-        tensorPath: 'cube_tensors.tsv',
-        metadataPath: 'cube_metadata.tsv'
-      }
-    ],
-    modelCheckpointPath: 'Demo datasets'
-  };
-  /** Name of the folder where the demo datasets are stored. */
-  private DEMO_FOLDER = 'data';
+  private projectorConfigPath: string;
+  private projectorConfig: ProjectorConfig;
+
+  constructor(projectorConfigPath: string) {
+    this.projectorConfigPath = projectorConfigPath;
+  }
 
   private getEmbeddingInfo(tensorName: string): EmbeddingInfo {
-    let embeddings = this.DEMO_CONFIG.embeddings;
+    let embeddings = this.projectorConfig.embeddings;
     for (let i = 0; i < embeddings.length; i++) {
       let embedding = embeddings[i];
       if (embedding.tensorName === tensorName) {
@@ -98,18 +44,28 @@ export class DemoDataProvider implements DataProvider {
 
   retrieveProjectorConfig(run: string, callback: (d: ProjectorConfig) => void)
       : void {
-    callback(this.DEMO_CONFIG);
+    let msgId = logging.setModalMessage('Fetching projector config...');
+    d3.json(this.projectorConfigPath, (err, projectorConfig) => {
+      if (err) {
+        logging.setModalMessage('Error: ' + err.responseText);
+        return;
+      }
+      logging.setModalMessage(null, msgId);
+      this.projectorConfig = projectorConfig;
+      callback(projectorConfig);
+    });
   }
 
   getDefaultTensor(run: string, callback: (tensorName: string) => void) {
-    callback('SmartReply 5K');
+    // Return the first tensor as the default tensor.
+    callback(this.projectorConfig.embeddings[0].tensorName);
   }
 
   retrieveTensor(run: string, tensorName: string,
       callback: (ds: DataSet) => void) {
     let embedding = this.getEmbeddingInfo(tensorName);
     let separator = embedding.tensorPath.substr(-3) === 'tsv' ? '\t' : ' ';
-    let url = `${this.DEMO_FOLDER}/${embedding.tensorPath}`;
+    let url = `${embedding.tensorPath}`;
     logging.setModalMessage('Fetching tensors...', TENSORS_MSG_ID);
     d3.text(url, (error: any, dataString: string) => {
       if (error) {
@@ -125,16 +81,12 @@ export class DemoDataProvider implements DataProvider {
   retrieveSpriteAndMetadata(run: string, tensorName: string,
       callback: (r: SpriteAndMetadataInfo) => void) {
     let embedding = this.getEmbeddingInfo(tensorName);
-    let metadataPath = null;
-    if (embedding.metadataPath) {
-      metadataPath = `${this.DEMO_FOLDER}/${embedding.metadataPath}`;
-    }
     let spriteImagePath = null;
     if (embedding.sprite && embedding.sprite.imagePath) {
-      spriteImagePath = `${this.DEMO_FOLDER}/${embedding.sprite.imagePath}`;
+      spriteImagePath = embedding.sprite.imagePath;
     }
-    dataProvider.retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath,
-        embedding.sprite, callback);
+    dataProvider.retrieveSpriteAndMetadataInfo(
+        embedding.metadataPath, spriteImagePath, embedding.sprite, callback);
   }
 
   getBookmarks(
diff --git a/tensorflow/tensorboard/components/vz_projector/vz-projector-app.html b/tensorflow/tensorboard/components/vz_projector/vz-projector-app.html
index f2a9fcad137..6221485c2d1 100644
--- a/tensorflow/tensorboard/components/vz_projector/vz-projector-app.html
+++ b/tensorflow/tensorboard/components/vz_projector/vz-projector-app.html
@@ -76,7 +76,9 @@ vz-projector {
       </a>
     </div>
   </div>
-  <vz-projector route-prefix="[[routePrefix]]" serving-mode="[[servingMode]]"></vz-projector>
+  <vz-projector route-prefix="[[routePrefix]]"
+      serving-mode="[[servingMode]]"
+      projector-config-json-path="[[projectorConfigJsonPath]]"></vz-projector>
 </div>
 <!-- Google analytics -->
 <script>
diff --git a/tensorflow/tensorboard/components/vz_projector/vz-projector.ts b/tensorflow/tensorboard/components/vz_projector/vz-projector.ts
index 8bef32fa4f5..277c5c8c358 100644
--- a/tensorflow/tensorboard/components/vz_projector/vz-projector.ts
+++ b/tensorflow/tensorboard/components/vz_projector/vz-projector.ts
@@ -48,7 +48,8 @@ export let ProjectorPolymer = PolymerElement({
   properties: {
     routePrefix: String,
     dataProto: {type: String, observer: '_dataProtoChanged'},
-    servingMode: String
+    servingMode: String,
+    projectorConfigJsonPath: String
   }
 });
 
@@ -59,6 +60,8 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
   // The working subset of the data source's original data set.
   dataSet: DataSet;
   servingMode: ServingMode;
+  // The path to the projector config JSON file for demo mode.
+  projectorConfigJsonPath: string;
 
   private selectionChangedListeners: SelectionChangedListener[];
   private hoverListeners: HoverListener[];
@@ -247,7 +250,7 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
 
   private initializeDataProvider(dataProto?: DataProto) {
     if (this.servingMode === 'demo') {
-      this.dataProvider = new DemoDataProvider();
+      this.dataProvider = new DemoDataProvider(this.projectorConfigJsonPath);
     } else if (this.servingMode === 'server') {
       if (!this.routePrefix) {
         throw 'route-prefix is a required parameter';