diff --git a/addons/docs/ember/index.js b/addons/docs/ember/index.js
index edcab7e3604..b4ff874067c 100644
--- a/addons/docs/ember/index.js
+++ b/addons/docs/ember/index.js
@@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
diff --git a/app/ember/package.json b/app/ember/package.json
index 99391bedf8e..44cc842a48e 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -42,9 +42,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@ember/test-helpers": "^2.1.4",
     "@storybook/core": "6.5.0-alpha.47",
     "@storybook/core-common": "6.5.0-alpha.47",
+    "@storybook/docs-tools": "6.5.0-alpha.47",
     "@storybook/store": "6.5.0-alpha.47",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
diff --git a/app/ember/src/client/docs/config.js b/app/ember/src/client/docs/config.js
new file mode 100644
index 00000000000..042ec16227e
--- /dev/null
+++ b/app/ember/src/client/docs/config.js
@@ -0,0 +1,12 @@
+import { enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes, extractComponentDescription } from './jsondoc';
+
+export const parameters = {
+  docs: {
+    iframeHeight: 80,
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const argTypesEnhancers = [enhanceArgTypes];
diff --git a/addons/docs/src/frameworks/ember/index.js b/app/ember/src/client/docs/index.js
similarity index 100%
rename from addons/docs/src/frameworks/ember/index.js
rename to app/ember/src/client/docs/index.js
diff --git a/addons/docs/src/frameworks/ember/jsondoc.js b/app/ember/src/client/docs/jsondoc.js
similarity index 100%
rename from addons/docs/src/frameworks/ember/jsondoc.js
rename to app/ember/src/client/docs/jsondoc.js
diff --git a/addons/docs/src/frameworks/ember/config.js b/app/ember/src/client/preview/docs/config.js
similarity index 100%
rename from addons/docs/src/frameworks/ember/config.js
rename to app/ember/src/client/preview/docs/config.js
diff --git a/app/ember/src/client/preview/docs/index.js b/app/ember/src/client/preview/docs/index.js
new file mode 100644
index 00000000000..fab7166db9d
--- /dev/null
+++ b/app/ember/src/client/preview/docs/index.js
@@ -0,0 +1 @@
+export { setJSONDoc } from './jsondoc';
diff --git a/app/ember/src/client/preview/docs/jsondoc.js b/app/ember/src/client/preview/docs/jsondoc.js
new file mode 100644
index 00000000000..f9e648ebc21
--- /dev/null
+++ b/app/ember/src/client/preview/docs/jsondoc.js
@@ -0,0 +1,50 @@
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
+export const getJSONDoc = () => {
+  return window.__EMBER_GENERATED_DOC_JSON__;
+};
+
+export const extractArgTypes = (componentName) => {
+  const json = getJSONDoc();
+  if (!(json && json.included)) {
+    return null;
+  }
+  const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+
+  if (!componentDoc) {
+    return null;
+  }
+  return componentDoc.attributes.arguments.reduce((acc, prop) => {
+    acc[prop.name] = {
+      name: prop.name,
+      defaultValue: prop.defaultValue,
+      description: prop.description,
+      table: {
+        defaultValue: { summary: prop.defaultValue },
+        type: {
+          summary: prop.type,
+          required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false,
+        },
+      },
+    };
+    return acc;
+  }, {});
+};
+
+export const extractComponentDescription = (componentName) => {
+  const json = getJSONDoc();
+  if (!(json && json.included)) {
+    return null;
+  }
+  const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+
+  if (!componentDoc) {
+    return null;
+  }
+
+  return componentDoc.attributes.description;
+};
diff --git a/app/ember/src/server/framework-preset-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts
new file mode 100644
index 00000000000..d2103c02d53
--- /dev/null
+++ b/app/ember/src/server/framework-preset-ember-docs.ts
@@ -0,0 +1,6 @@
+import type { StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+
+export const config: StorybookConfig['config'] = (entry = []) => {
+  return [...entry, findDistEsm(__dirname, 'client/docs/config')];
+};
diff --git a/app/ember/src/server/options.ts b/app/ember/src/server/options.ts
index 7f7d42a3c56..e418b10f04b 100644
--- a/app/ember/src/server/options.ts
+++ b/app/ember/src/server/options.ts
@@ -4,5 +4,8 @@ import type { LoadOptions } from '@storybook/core-common';
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,
   framework: 'ember',
-  frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
+  frameworkPresets: [
+    require.resolve('./framework-preset-babel-ember.js'),
+    require.resolve('./framework-preset-ember-docs.js'),
+  ],
 } as LoadOptions;