diff --git a/tensorflow/tensorboard/backend/handler.py b/tensorflow/tensorboard/backend/handler.py
index d829ea9a07d..ef484e36d59 100644
--- a/tensorflow/tensorboard/backend/handler.py
+++ b/tensorflow/tensorboard/backend/handler.py
@@ -177,7 +177,7 @@ class TensorboardHandler(BaseHTTPServer.BaseHTTPRequestHandler):
   def _serve_logdir(self, unused_query_params):
     """Writes out the logdir argument with which this tensorboard was started.
     """
-    self.respond(self._logdir, 'text/plain')
+    self.respond({'logdir': self._logdir}, 'application/json')
 
   def _serve_scalars(self, query_params):
     """Given a tag and single run, return array of ScalarEvents.
diff --git a/tensorflow/tensorboard/backend/server_test.py b/tensorflow/tensorboard/backend/server_test.py
index b055ea03edd..6877fe0b31f 100644
--- a/tensorflow/tensorboard/backend/server_test.py
+++ b/tensorflow/tensorboard/backend/server_test.py
@@ -102,10 +102,9 @@ class TensorboardServerTest(tf.test.TestCase):
     self.assertEqual(response.status, 400)
 
   def testLogdir(self):
-    """Test the status code and content of the data/logdir endpoint."""
-    response = self._get('/data/logdir')
-    self.assertEqual(response.status, 200)
-    self.assertEqual(response.read().decode('utf-8'), '/foo/logdir/argument')
+    """Test the format of the data/logdir endpoint."""
+    parsed_object = self._getJson('/data/logdir')
+    self.assertEqual(parsed_object, {'logdir': '/foo/logdir/argument'})
 
   def testRuns(self):
     """Test the format of the /data/runs endpoint."""
diff --git a/tensorflow/tensorboard/components/tf-backend/backend.ts b/tensorflow/tensorboard/components/tf-backend/backend.ts
index 49e82c3221b..a4f7ed545ea 100644
--- a/tensorflow/tensorboard/components/tf-backend/backend.ts
+++ b/tensorflow/tensorboard/components/tf-backend/backend.ts
@@ -24,9 +24,11 @@ module TF.Backend {
     run_metadata: string[];
   }
 
+  export interface LogdirResponse { logdir: string; }
+
   export interface RunsResponse { [runName: string]: RunEnumeration; }
 
-  export type RunToTag = {[run: string]: string[]};
+  export type RunToTag = {[run: string]: string[];};
 
   export interface Datum {
     wall_time: Date;
@@ -90,11 +92,18 @@ module TF.Backend {
      * @param requestManager The RequestManager, overwritable so you may
      * manually clear request queue, etc. Defaults to a new RequestManager.
      */
-    constructor(r: Router, requestManager?: RequestManager) {
-      this.router = r;
+    constructor(router: Router, requestManager?: RequestManager) {
+      this.router = router;
       this.requestManager = requestManager || new RequestManager();
     }
 
+    /**
+     * Returns a promise for requesting the logdir string.
+     */
+    public logdir(): Promise<LogdirResponse> {
+      return this.requestManager.request(this.router.logdir());
+    }
+
     /**
      * Returns a listing of all the available data in the TensorBoard backend.
      */
diff --git a/tensorflow/tensorboard/components/tf-backend/router.ts b/tensorflow/tensorboard/components/tf-backend/router.ts
index c296f9fc637..27addbfde27 100644
--- a/tensorflow/tensorboard/components/tf-backend/router.ts
+++ b/tensorflow/tensorboard/components/tf-backend/router.ts
@@ -16,6 +16,7 @@ module TF.Backend {
   export type RunTagUrlFn = (tag: string, run: string) => string;
 
   export interface Router {
+    logdir: () => string;
     runs: () => string;
     scalars: RunTagUrlFn;
     histograms: RunTagUrlFn;
@@ -86,6 +87,7 @@ module TF.Backend {
       return url;
     }
     return {
+      logdir: () => dataDir + '/logdir',
       runs: () => dataDir + '/runs' + (demoMode ? '.json' : ''),
       individualImage: individualImageUrl,
       individualAudio: individualAudioUrl,
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-selector.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-selector.html
index 5981a51a375..fb30a07d70a 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-selector.html
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-selector.html
@@ -53,6 +53,11 @@ Properties out:
     >
     Toggle All Runs
     </paper-button>
+    <template
+      is="dom-if"
+      if="[[logdir]]">
+      <div id="logdir" inner-h-t-m-l="{{_breakAtSlashes(logdir)}}"></div>
+    </template>
     <style>
       :host {
         display: flex;
@@ -65,7 +70,6 @@ Properties out:
         flex-grow: 0;
         flex-shrink: 0;
         padding-right: 16px;
-        padding-bottom: 6px;
         box-sizing: border-box;
         color: var(--paper-grey-800);
       }
@@ -77,7 +81,6 @@ Properties out:
       .x-button {
         font-size: 13px;
         background-color: var(--tb-ui-light-accent);
-        margin-top: 5px;
         color: var(--tb-ui-dark-accent);
       }
       #tooltip-help {
@@ -90,20 +93,45 @@ Properties out:
       paper-button {
         margin-left: 0;
       }
+      #logdir {
+        color: var(--tb-ui-dark-accent);
+        font-size: 13px;
+        margin: 5px 0 0 0;
+        max-width: 288px;
+      }
     </style>
   </template>
   <script>
   Polymer({
     is: "tf-run-selector",
     properties: {
+      backend: Object,
       outSelected: {type: Array, notify: true},
       // runs: an array of strings, representing the run names that may be chosen
       runs: Array,
       colorScale: Object, // TF.ColorScale
+      logdir: {
+        type: String,
+        notify: true,
+      },
+    },
+    ready: function() {
+      // Populate the logdir.
+      this.backend.logdir().then(logdirObject => {
+        this.set('logdir', logdirObject.logdir);
+      }).catch(e => {
+        // Fetching the logdir failed. Prevent the exception from logging to
+        // console. The console already logs a 404 network event.
+      });
     },
     _toggleAll: function() {
       this.$.multiCheckbox.toggleAll();
     },
+    // Makes a string only be broken at the right of slashes instead of in front
+    // of any arbitrary character.
+    _breakAtSlashes: function(originalString) {
+      return originalString.replace(/\//g, '/<wbr>');
+    },
   });
   </script>
 </dom-module>
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-sidebar-helper.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-sidebar-helper.html
index 45f9932b446..f2b94a981af 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/tf-sidebar-helper.html
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-sidebar-helper.html
@@ -28,6 +28,7 @@ To use it, create the tf-sidebar-helper with the required properties. To extend
 it with extra configuration components, add them to the element's component:
 
 <tf-sidebar-helper
+  backend: "[[backend]]",
   categories: "{{outputCategories}}",
   colorScale: "[[colorScale]]",
   run2tag: "[[run2tag]]",
@@ -62,7 +63,8 @@ tf-run-selector.
     <content></content>
     <div class="sidebar-section">
       <tf-run-selector
-        id="runSelector"g4
+        id="runSelector"
+        backend="[[backend]]"
         runs="[[runs]]"
         color-scale="[[colorScale]]"
         out-selected="{{selectedRuns}}"
@@ -110,6 +112,11 @@ tf-run-selector.
     Polymer({
       is: "tf-sidebar-helper",
       properties: {
+        /**
+         * The backend object used to issue requests.
+         */
+        backend: Object,
+
         /**
          * This is an output of the categories that the user selected to
          * separate the different tags. Each category here should be given its
diff --git a/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html b/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
index 6500271c876..fa320bbad87 100644
--- a/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-distribution-dashboard/tf-distribution-dashboard.html
@@ -55,6 +55,7 @@ contains tf-distribution-charts embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -106,6 +107,7 @@ contains tf-distribution-charts embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         _xType: {
           type: String,
           value: "step"
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index 9ebae5dfe60..108cbc4b856 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -59,6 +59,7 @@ contains vz-line-charts embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -181,6 +182,7 @@ contains vz-line-charts embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "scalar"
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
index ff6d3fd68e1..c3105c3fd83 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
@@ -57,6 +57,7 @@ contains vz-histogram-timeseries embedded inside tf-panes-helper's.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -126,6 +127,7 @@ contains vz-histogram-timeseries embedded inside tf-panes-helper's.
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "histogram"
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
index 2f38f54c426..83945032bd1 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
@@ -39,6 +39,7 @@ tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
     <tf-dashboard-layout>
       <div class="sidebar">
         <tf-sidebar-helper
+          backend="[[backend]]"
           categories="{{_categories}}"
           color-scale="[[_colorScale]]"
           run2tag="[[run2tag]]"
@@ -77,6 +78,7 @@ tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
     Polymer({
       is: "tf-image-dashboard",
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "image"
diff --git a/tensorflow/tensorboard/http_api.md b/tensorflow/tensorboard/http_api.md
index 0d8d707643e..16c2f95ae1c 100644
--- a/tensorflow/tensorboard/http_api.md
+++ b/tensorflow/tensorboard/http_api.md
@@ -30,8 +30,11 @@ is provided to the summary op (usually as a constant).
 
 ## `data/logdir`
 
-Returns the `logdir` argument (string) with which Tensorboard started up. That
-argument is the full path of the directory that contains events files.
+Returns a JSON object with a key "logdir" that maps to the `logdir` argument
+(string) with which Tensorboard started up. Example:
+`{logdir: '/foo/logdir/argument'}`
+
+The `logdir` argument is the path of the directory that contains events files.
 
 ## `data/runs`