diff --git a/package-lock.json b/package-lock.json
index aeaf1e0..9db4e74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,9 @@
 	"packages": {
 		"": {
 			"dependencies": {
+				"@graphiql/plugin-explorer": "^1.0.3",
+				"@graphiql/react": "^0.20.3",
+				"@graphiql/toolkit": "^0.9.1",
 				"@wordpress/components": "^27.0.0",
 				"@wordpress/data": "^9.22.0",
 				"@wordpress/element": "^5.23.0",
@@ -2343,9 +2346,34 @@
 			"version": "0.2.1",
 			"license": "MIT"
 		},
+		"node_modules/@graphiql/plugin-explorer": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@graphiql/plugin-explorer/-/plugin-explorer-1.0.3.tgz",
+			"integrity": "sha512-dKgdNXut/CaxfU8lcFDi1Jb/5f7NnCHa62E7xlNUNYRzieZ7+Bka0rvspgxzXPYevviigzmrtPGtHd5SeaZ57g==",
+			"dependencies": {
+				"graphiql-explorer": "^0.9.0"
+			},
+			"peerDependencies": {
+				"@graphiql/react": "^0.20.3",
+				"graphql": "^15.5.0 || ^16.0.0",
+				"react": "^16.8.0 || ^17 || ^18",
+				"react-dom": "^16.8.0 || ^17 || ^18"
+			}
+		},
+		"node_modules/@graphiql/plugin-explorer/node_modules/graphiql-explorer": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.9.0.tgz",
+			"integrity": "sha512-fZC/wsuatqiQDO2otchxriFO0LaWIo/ovF/CQJ1yOudmY0P7pzDiP+l9CEHUiWbizk3e99x6DQG4XG1VxA+d6A==",
+			"peerDependencies": {
+				"graphql": "^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0",
+				"react": "^15.6.0 || ^16.0.0",
+				"react-dom": "^15.6.0 || ^16.0.0"
+			}
+		},
 		"node_modules/@graphiql/react": {
 			"version": "0.20.3",
-			"license": "MIT",
+			"resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.20.3.tgz",
+			"integrity": "sha512-LHEiWQPABflTyRJZBZB50WSlrWER4RtlWg9XV1+D4yZQ3+6GbLM7X1zYf4D/TQ6AJB/vLZQHEnbhS0LuKcNqfA==",
 			"dependencies": {
 				"@graphiql/toolkit": "^0.9.1",
 				"@headlessui/react": "^1.7.15",
@@ -2378,7 +2406,8 @@
 		},
 		"node_modules/@graphiql/toolkit": {
 			"version": "0.9.1",
-			"license": "MIT",
+			"resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.9.1.tgz",
+			"integrity": "sha512-LVt9pdk0830so50ZnU2Znb2rclcoWznG8r8asqAENzV0U1FM1kuY0sdPpc/rBc9MmmNgnB6A+WZzDhq6dbhTHA==",
 			"dependencies": {
 				"@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",
 				"meros": "^1.1.4"
diff --git a/package.json b/package.json
index 96580fd..d6335f7 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,9 @@
 		"sort-package-json": "^2.7.0"
 	},
 	"dependencies": {
+		"@graphiql/plugin-explorer": "^1.0.3",
+		"@graphiql/react": "^0.20.3",
+		"@graphiql/toolkit": "^0.9.1",
 		"@wordpress/components": "^27.0.0",
 		"@wordpress/data": "^9.22.0",
 		"@wordpress/element": "^5.23.0",
diff --git a/plugins/query-composer/README.md b/plugins/query-composer/README.md
new file mode 100644
index 0000000..ade32c8
--- /dev/null
+++ b/plugins/query-composer/README.md
@@ -0,0 +1,7 @@
+# Query Composer
+
+The Query Composer is a tool that allows users to view fields in the GraphQL Schema
+and compose queries by clicking on the fields they want to query for.
+
+Additionally, fields that accept input (i.e. connections, mutations, etc) provide UIs to enter the input.
+
diff --git a/plugins/query-composer/components/QueryComposer.js b/plugins/query-composer/components/QueryComposer.js
new file mode 100644
index 0000000..b1f9ef3
--- /dev/null
+++ b/plugins/query-composer/components/QueryComposer.js
@@ -0,0 +1,7 @@
+export const QueryComposer = () => {
+	return (
+		<>
+			<h2>Query Composer...</h2>
+		</>
+	)
+}
diff --git a/plugins/query-composer/index.js b/plugins/query-composer/index.js
new file mode 100644
index 0000000..a3e71de
--- /dev/null
+++ b/plugins/query-composer/index.js
@@ -0,0 +1,47 @@
+import { registerPlugin } from 'wpgraphql-ide';
+import {addAction, addFilter} from '@wordpress/hooks';
+import { explorerPlugin } from "@graphiql/plugin-explorer";
+
+import { Icon, pencil } from '@wordpress/icons';
+import { QueryComposer } from './components/QueryComposer'
+
+// const queryComposerFake = () => {
+// 	return {
+// 		title: 'Query Composer Fake',
+// 		icon: () => (
+// 			<Icon
+// 				icon={ pencil }
+// 				style={ {
+// 					fill: 'hsla(var(--color-neutral), var(--alpha-tertiary))',
+// 				} }
+// 			/>
+// 		),
+// 		content: () => <QueryComposer />
+// 	};
+// }
+//
+// registerPlugin( 'queryComposerFake', queryComposerFake );
+
+// addAction( 'wpgraphqlide_rendered', 'wpgraphql-ide-query-composer',() => {
+// 	console.log({
+// 		wpgraphqlide_rendered: true
+// 	})
+// 	registerPlugin( 'queryComposer', explorerPlugin() );
+// });
+
+const explorer = explorerPlugin();
+registerPlugin( 'queryComposer', explorer );
+
+
+
+// addFilter( 'wpgraphqlide_plugins', 'wpgraphql-ide-query-composer', (plugins) => {
+// 	const explorer = explorerPlugin();
+// 	console.log( { pluginsBefore: plugins })
+// 	if ( ! plugins.includes( explorer ) ) {
+// 		plugins.push(explorer)
+// 		console.log({pluginsAfter: plugins})
+// 	}
+// 	return plugins;
+// })
+
+
diff --git a/plugins/query-composer/query-composer.php b/plugins/query-composer/query-composer.php
new file mode 100644
index 0000000..0fbb2d3
--- /dev/null
+++ b/plugins/query-composer/query-composer.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Plugin Name: WPGraphQL IDE Query Composer
+ * Plugin Author: WPGraphQL
+ * Description: An interactive point-and-click interface for composing GraphQL queries
+ */
+
+namespace WPGraphQLIDE\Plugins\QueryComposer;
+
+/**
+ * Hook into the GraphiQL enqueue lifecycle, ensuring scripts are only loaded if the GraphiQL IDE
+ * is also loaded.
+ */
+add_action( 'wpgraphqlide_enqueue_script', __NAMESPACE__ . '\\enqueue_plugin' );
+
+
+/**
+ * Enqueue the plugin scripts and styles.
+ *
+ * @return void
+ */
+function enqueue_plugin() {
+
+	$asset_file = include WPGRAPHQL_IDE_PLUGIN_DIR_PATH . 'build/queryComposer.asset.php';
+
+	wp_enqueue_script(
+		'wpgraphql-ide-query-composer-plugin',
+		WPGRAPHQL_IDE_PLUGIN_URL . 'build/queryComposer.js',
+		array_merge( $asset_file['dependencies'], [ 'wpgraphql-ide' ] ),
+		$asset_file['version'],
+		true
+	);
+}
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index 93d1997..71d5452 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -3,6 +3,9 @@ import React from 'react';
 import { GraphiQL } from 'graphiql';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element'
+
+// import { explorerPlugin } from "@graphiql/plugin-explorer";
 
 import { PrettifyButton } from './toolbarButtons/PrettifyButton';
 import { CopyQueryButton } from './toolbarButtons/CopyQueryButton';
@@ -43,19 +46,22 @@ export function Editor() {
 			return {
 				query: wpgraphqlIde.getQuery(),
 				shouldRenderStandalone: wpgraphqlIde.shouldRenderStandalone(),
-				plugins: wpgraphqlIde.getPluginsArray(),
+				plugins: wpgraphqlIde.getRegisteredPlugins(),
 			};
 		}
 	);
 
 	const { setDrawerOpen, setQuery } = useDispatch( 'wpgraphql-ide' );
 
+	let activePlugins = plugins.length > 0 ? plugins : null;
+	activePlugins = applyFilters( 'wpgraphqlide_plugins', activePlugins );
+
 	return (
 		<GraphiQL
 			query={ query }
 			fetcher={ fetcher }
 			onEditQuery={ ( query ) => setQuery( query ) }
-			plugins={ plugins.length > 0 ? plugins : null }
+			plugins={ activePlugins }
 		>
 			<GraphiQL.Toolbar>
 				{ Object.entries( toolbarButtons ).map( ( [ key, Button ] ) => (
diff --git a/src/index.js b/src/index.js
index 526869f..c8b4ebd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,85 @@
 import { createHooks } from '@wordpress/hooks';
 import { register, dispatch } from '@wordpress/data';
 import { store } from './store';
+import {
+	Button,
+	ButtonGroup,
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CopyIcon,
+	Dialog,
+	ExecuteButton,
+	GraphiQLProvider,
+	GraphiQLProviderProps,
+	HeaderEditor,
+	KeyboardShortcutIcon,
+	MergeIcon,
+	PlusIcon,
+	PrettifyIcon,
+	QueryEditor,
+	ReloadIcon,
+	ResponseEditor,
+	SettingsIcon,
+	Spinner,
+	Tab,
+	Tabs,
+	ToolbarButton,
+	Tooltip,
+	UnStyledButton,
+	useCopyQuery,
+	useDragResize,
+	useEditorContext,
+	useExecutionContext,
+	UseHeaderEditorArgs,
+	useMergeQuery,
+	usePluginContext,
+	usePrettifyEditors,
+	UseQueryEditorArgs,
+	UseResponseEditorArgs,
+	useSchemaContext,
+	useStorageContext,
+	useTheme,
+	UseVariableEditorArgs,
+	VariableEditor,
+	WriteableEditorProps,
+} from '@graphiql/react';
+
+const GraphiQL = {
+	Button,
+	ButtonGroup,
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CopyIcon,
+	Dialog,
+	ExecuteButton,
+	GraphiQLProvider,
+	HeaderEditor,
+	KeyboardShortcutIcon,
+	MergeIcon,
+	PlusIcon,
+	PrettifyIcon,
+	QueryEditor,
+	ReloadIcon,
+	ResponseEditor,
+	SettingsIcon,
+	Spinner,
+	Tab,
+	Tabs,
+	ToolbarButton,
+	Tooltip,
+	UnStyledButton,
+	useCopyQuery,
+	useDragResize,
+	useEditorContext,
+	useExecutionContext,
+	useMergeQuery,
+	usePluginContext,
+	usePrettifyEditors,
+	useSchemaContext,
+	useStorageContext,
+	useTheme,
+	VariableEditor,
+};
 
 /**
  * Register the store to wp.data for use throughout the plugin and extending plugins
@@ -30,3 +109,5 @@ window.WPGraphQLIDE = {
 	hooks,
 	store,
 };
+
+window.GraphiQL = GraphiQL;
diff --git a/src/store/index.js b/src/store/index.js
index f032718..abda74b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,7 +4,7 @@ const initialState = {
 	isDrawerOpen: false,
 	shouldRenderStandalone: false,
 	isInitialStateLoaded: false,
-	registeredPlugins: {},
+	registeredPlugins: [],
 	query: null,
 };
 
@@ -31,13 +31,22 @@ const reducer = ( state = initialState, action ) => {
 				isInitialStateLoaded: true,
 			};
 		case 'REGISTER_PLUGIN':
+			// push the plugin into the registeredPlugins array
 			return {
 				...state,
-				registeredPlugins: {
+				registeredPlugins: [
 					...state.registeredPlugins,
-					[ action.name ]: action.config,
-				},
-			};
+					...[ action.config ],
+				],
+			}
+
+			// return {
+			// 	...state,
+			// 	registeredPlugins: {
+			// 		...state.registeredPlugins,
+			// 		[ action.name ]: action.config,
+			// 	},
+			// };
 	}
 	return state;
 };
@@ -87,6 +96,9 @@ const selectors = {
 	isInitialStateLoaded: ( state ) => {
 		return state.isInitialStateLoaded;
 	},
+	getRegisteredPlugins: ( state ) => {
+		return state.registeredPlugins;
+	},
 	getPluginsArray: ( state ) => {
 		const registeredPlugins = state.registeredPlugins;
 		const pluginsArray = [];
diff --git a/webpack.config.js b/webpack.config.js
index dc3baf6..cf7c6a7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,16 +1,47 @@
 const defaults = require( '@wordpress/scripts/config/webpack.config' );
 const path = require( 'path' );
 
+const defaultExternals = {
+	react: 'React',
+	'react-dom': 'ReactDOM',
+	'wpgraphql-ide': 'WPGraphQLIDE',
+}
+
+// Define a mapping of entries to their respective externals
+const entryExternals = {
+	index: {
+		...defaultExternals
+	},
+	queryComposer: {
+		...defaultExternals,
+		GraphiQL: 'GraphiQL',
+	},
+	// Define externals for other entries as needed
+};
+
 module.exports = {
 	...defaults,
 	entry: {
 		index: path.resolve( process.cwd(), 'src', 'index.js' ),
 		app: path.resolve( process.cwd(), 'src', 'App.jsx' ),
 		help: path.resolve( process.cwd(), 'plugins/help', 'index.js' ),
+		queryComposer: path.resolve( process.cwd(), 'plugins/query-composer', 'index.js' ),
 	},
-	externals: {
-		react: 'React',
-		'react-dom': 'ReactDOM',
-		'wpgraphql-ide': 'WPGraphQLIDE',
+	externals: (context, request, callback) => {
+		// Determine the current entry from context or other means
+		const currentEntry = determineCurrentEntry(context);
+		// Apply the externals based on the current entry
+		if (entryExternals[currentEntry] && entryExternals[currentEntry][request]) {
+			return callback(null, entryExternals[currentEntry][request]);
+		}
+		// Fallback to default behavior if no externals are defined for the current entry
+		callback();
 	},
 };
+
+function determineCurrentEntry(context) {
+	// Implement logic to determine the current entry based on context
+	// This might involve checking the context path to infer which entry is being processed
+	// Placeholder implementation:
+	return 'index'; // Replace with actual logic to determine the entry
+}
diff --git a/wpgraphql-ide.php b/wpgraphql-ide.php
index bfc2584..f3b0dbc 100644
--- a/wpgraphql-ide.php
+++ b/wpgraphql-ide.php
@@ -26,6 +26,7 @@
 
 // require plugins
 require_once WPGRAPHQL_IDE_PLUGIN_DIR_PATH . 'plugins/help/help.php';
+require_once WPGRAPHQL_IDE_PLUGIN_DIR_PATH . 'plugins/query-composer/query-composer.php';
 
 /**
  * Generates the SVG logo for GraphQL.
@@ -137,7 +138,7 @@ function register_wpadminbar_menus(): void {
 				'href'  => '#',
 			]
 		);
-	}   
+	}
 }
 add_action( 'admin_bar_menu', __NAMESPACE__ . '\\register_wpadminbar_menus', 999 );