diff --git a/x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.test.ts b/x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.test.ts
rename to x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.test.ts
diff --git a/x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.ts b/x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.ts
similarity index 100%
rename from x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.ts
rename to x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.ts
diff --git a/x-pack/legacy/plugins/remote_clusters/common/index.ts b/x-pack/legacy/plugins/remote_clusters/common/index.ts
index f869c0d2a55af..8f80b3b7dc6a3 100644
--- a/x-pack/legacy/plugins/remote_clusters/common/index.ts
+++ b/x-pack/legacy/plugins/remote_clusters/common/index.ts
@@ -19,3 +19,5 @@ export const PLUGIN = {
 };
 
 export const API_BASE_PATH = '/api/remote_clusters';
+
+export { deserializeCluster, serializeCluster } from './cluster_serialization';
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index c25c2e6995aed..8209b792ec4d7 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -284,33 +284,59 @@ Array [
     class="euiSpacer euiSpacer--l"
   />,
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
+            class="euiButton euiButton--secondary euiButton--fill"
+            data-test-subj="remoteClusterFormSaveButton"
+            type="button"
+          >
+            <span
+              class="euiButton__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiButton__text"
+              >
+                Save
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
-        class="euiButton euiButton--secondary euiButton--fill"
-        data-test-subj="remoteClusterFormSaveButton"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonEmpty__content"
         >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-            focusable="false"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
           <span
-            class="euiButton__text"
+            class="euiButtonEmpty__text"
           >
-            Save
+            Show request
           </span>
         </span>
       </button>
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
index fcc7a97a5a38f..a12dd9c20d030 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
@@ -38,6 +38,8 @@ import {
   transportPortUrl,
 } from '../../../services/documentation';
 
+import { RequestFlyout } from './request_flyout';
+
 import { validateName, validateSeeds, validateSeed } from './validators';
 
 const defaultFields = {
@@ -78,9 +80,16 @@ export class RemoteClusterForm extends Component {
       disabledFields,
       fieldsErrors: this.getFieldsErrors(fieldsState),
       areErrorsVisible: false,
+      isRequestVisible: false,
     };
   }
 
+  toggleRequest = () => {
+    this.setState(({ isRequestVisible }) => ({
+      isRequestVisible: !isRequestVisible,
+    }));
+  };
+
   getFieldsErrors(fields, seedInput = '') {
     const { name, seeds } = fields;
     return {
@@ -385,7 +394,7 @@ export class RemoteClusterForm extends Component {
 
   renderActions() {
     const { isSaving, cancel } = this.props;
-    const { areErrorsVisible } = this.state;
+    const { areErrorsVisible, isRequestVisible } = this.state;
 
     if (isSaving) {
       return (
@@ -427,25 +436,47 @@ export class RemoteClusterForm extends Component {
     const isSaveDisabled = areErrorsVisible && this.hasErrors();
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiButton
-            data-test-subj="remoteClusterFormSaveButton"
-            color="secondary"
-            iconType="check"
-            onClick={this.save}
-            fill
-            disabled={isSaveDisabled}
-            aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
-          >
-            <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
-              defaultMessage="Save"
-            />
-          </EuiButton>
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="remoteClusterFormSaveButton"
+                color="secondary"
+                iconType="check"
+                onClick={this.save}
+                fill
+                disabled={isSaveDisabled}
+                aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
+              >
+                <FormattedMessage
+                  id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
+                  defaultMessage="Save"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+
+            {cancelButton}
+          </EuiFlexGroup>
         </EuiFlexItem>
 
-        {cancelButton}
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            onClick={this.toggleRequest}
+          >
+            {isRequestVisible ? (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"
+                defaultMessage="Hide request"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
+                defaultMessage="Show request"
+              />
+            )}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   }
@@ -593,6 +624,7 @@ export class RemoteClusterForm extends Component {
     } = this.props;
 
     const {
+      isRequestVisible,
       areErrorsVisible,
       fields: {
         name,
@@ -667,6 +699,14 @@ export class RemoteClusterForm extends Component {
         {this.renderActions()}
 
         {this.renderSavingFeedback()}
+
+        {isRequestVisible ? (
+          <RequestFlyout
+            name={name}
+            cluster={this.getAllFields()}
+            close={() => this.setState({ isRequestVisible: false })}
+          />
+        ) : null}
       </Fragment>
     );
   }
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
new file mode 100644
index 0000000000000..bf315fa79f856
--- /dev/null
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { PureComponent } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { serializeCluster } from '../../../../../common';
+
+export class RequestFlyout extends PureComponent {
+  static propTypes = {
+    close: PropTypes.func.isRequired,
+    name: PropTypes.string.isRequired,
+    cluster: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { name, close, cluster } = this.props;
+    const endpoint = 'PUT _cluster/settings';
+    const payload = JSON.stringify(serializeCluster(cluster), null, 2);
+    const request = `${endpoint}\n${payload}`;
+
+    return (
+      <EuiFlyout maxWidth={480} onClose={close}>
+        <EuiFlyoutHeader>
+          <EuiTitle>
+            <h2>
+              {name ? (
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.namedTitle"
+                  defaultMessage="Request for '{name}'"
+                  values={{ name }}
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.unnamedTitle"
+                  defaultMessage="Request"
+                />
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.remoteClusters.requestFlyout.descriptionText"
+                defaultMessage="This Elasticsearch request will create or update this remote cluster."
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer />
+
+          <EuiCodeBlock
+            language="json"
+            isCopyable
+          >
+            {request}
+          </EuiCodeBlock>
+        </EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty
+            iconType="cross"
+            onClick={close}
+            flush="left"
+          >
+            <FormattedMessage
+              id="xpack.remoteClusters.requestFlyout.closeButtonLabel"
+              defaultMessage="Close"
+            />
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+}
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
index 87c9e989f2ef8..36b8d4fe7c3a0 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.post('', addHandler);
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
index 2d5bf8b1b296f..eff7c66b265b8 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
@@ -13,8 +13,8 @@ import {
   wrapEsError,
   wrapUnknownError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router, isEsError: any): void => {
   router.delete('/{nameOrNames}', createDeleteHandler(isEsError));
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
index d37f98cdb9e07..97bb59de85b89 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
@@ -7,7 +7,7 @@
 import { get } from 'lodash';
 
 import { Router, RouterRouteHandler } from '../../../../../server/lib/create_router';
-import { deserializeCluster } from '../../lib/cluster_serialization';
+import { deserializeCluster } from '../../../common/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.get('', getAllHandler);
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
index ab522292eeb15..d6eedf7924ca3 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster, deserializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster, deserializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.put('/{name}', updateHandler);