diff --git a/packages/grafana-data/src/types/config.ts b/packages/grafana-data/src/types/config.ts
index 77acc823433..78f98db804d 100644
--- a/packages/grafana-data/src/types/config.ts
+++ b/packages/grafana-data/src/types/config.ts
@@ -50,6 +50,7 @@ export interface FeatureToggles {
   accesscontrol: boolean;
   tempoServiceGraph: boolean;
   tempoSearch: boolean;
+  recordedQueries: boolean;
   prometheusMonaco: boolean;
   newNavigation: boolean;
 }
diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts
index bbcb3d45357..0fa41ab9dd1 100644
--- a/packages/grafana-runtime/src/config.ts
+++ b/packages/grafana-runtime/src/config.ts
@@ -65,6 +65,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
     trimDefaults: false,
     tempoServiceGraph: false,
     tempoSearch: false,
+    recordedQueries: false,
     prometheusMonaco: false,
     newNavigation: false,
   };
diff --git a/public/app/features/query/components/QueryActionComponent.ts b/public/app/features/query/components/QueryActionComponent.ts
new file mode 100644
index 00000000000..cbee1ec711d
--- /dev/null
+++ b/public/app/features/query/components/QueryActionComponent.ts
@@ -0,0 +1,32 @@
+import { DataQuery, TimeRange } from '@grafana/data';
+
+interface ActionComponentProps {
+  query?: DataQuery;
+  queries?: Array<Partial<DataQuery>>;
+  onAddQuery?: (q: DataQuery) => void;
+  timeRange?: TimeRange;
+}
+
+type QueryActionComponent = React.ComponentType<ActionComponentProps>;
+
+class QueryActionComponents {
+  extraRenderActions: QueryActionComponent[] = [];
+
+  addExtraRenderAction(extra: QueryActionComponent) {
+    this.extraRenderActions = this.extraRenderActions.concat(extra);
+  }
+
+  getAllExtraRenderAction(): QueryActionComponent[] {
+    return this.extraRenderActions;
+  }
+}
+
+/**
+ * @internal and experimental
+ */
+export const GroupActionComponents = new QueryActionComponents();
+
+/**
+ * @internal and experimental
+ */
+export const RowActionComponents = new QueryActionComponents();
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 3d34bdc2b3f..047e977deaf 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -31,6 +31,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
+import { RowActionComponents } from './QueryActionComponent';
 
 interface Props<TQuery extends DataQuery> {
   data: PanelData;
@@ -301,6 +302,18 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     return null;
   }
 
+  renderExtraActions = () => {
+    const { query, queries, data, onAddQuery } = this.props;
+    return RowActionComponents.getAllExtraRenderAction().map((c) => {
+      return React.createElement(c, {
+        query,
+        queries,
+        timeRange: data.timeRange,
+        onAddQuery: onAddQuery as (query: DataQuery) => void,
+      });
+    });
+  };
+
   renderActions = (props: QueryOperationRowRenderProps) => {
     const { query, hideDisableQuery = false } = this.props;
     const { hasTextEditMode, datasource, showingHelp } = this.state;
@@ -327,6 +340,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
             }}
           />
         )}
+        {this.renderExtraActions()}
         <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
         {!hideDisableQuery ? (
           <QueryOperationAction
diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index 90a14670cc0..36474e2c5ce 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -39,6 +39,7 @@ import { QueryGroupOptionsEditor } from './QueryGroupOptions';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
 import { css } from '@emotion/css';
 import { QueryGroupOptions } from 'app/types';
+import { GroupActionComponents } from './QueryActionComponent';
 
 interface Props {
   queryRunner: PanelQueryRunner;
@@ -327,6 +328,12 @@ export class QueryGroup extends PureComponent<Props, State> {
     return (dsSettings.meta.alerting || dsSettings.meta.mixed) === true;
   }
 
+  renderExtraActions() {
+    return GroupActionComponents.getAllExtraRenderAction().map((c) => {
+      return React.createElement(c, { onAddQuery: this.onAddQuery });
+    });
+  }
+
   renderAddQueryRow(dsSettings: DataSourceInstanceSettings, styles: QueriesTabStyles) {
     const { isAddingMixed } = this.state;
     const showAddButton = !(isAddingMixed || isSharedDashboardQuery(dsSettings.name));
@@ -356,6 +363,7 @@ export class QueryGroup extends PureComponent<Props, State> {
             </Button>
           </Tooltip>
         )}
+        {this.renderExtraActions()}
       </HorizontalGroup>
     );
   }