diff --git a/projects/js-packages/ai-client/src/components/ai-control/stories/index.stories.tsx b/projects/js-packages/ai-client/src/components/ai-control/stories/ai-control.stories.tsx
similarity index 100%
rename from projects/js-packages/ai-client/src/components/ai-control/stories/index.stories.tsx
rename to projects/js-packages/ai-client/src/components/ai-control/stories/ai-control.stories.tsx
diff --git a/projects/js-packages/ai-client/src/components/ai-control/stories/block-ai-control.stories.tsx b/projects/js-packages/ai-client/src/components/ai-control/stories/block-ai-control.stories.tsx
new file mode 100644
index 0000000000000..f756c034de3e7
--- /dev/null
+++ b/projects/js-packages/ai-client/src/components/ai-control/stories/block-ai-control.stories.tsx
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { action } from '@storybook/addon-actions';
+import { Notice } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import { GuidelineMessage, ErrorMessage, UpgradeMessage } from '../../message/index.js';
+import { BlockAIControl } from '../index.js';
+
+export default {
+	title: 'JS Packages/AI Client/AI Control/Block AI Control',
+	component: BlockAIControl,
+	decorators: [
+		Story => (
+			<div style={ { backgroundColor: 'white' } }>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		state: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'init', 'requesting', 'suggesting', 'done', 'error' ],
+		},
+		errorComponent: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'None', 'Error notice' ],
+			mapping: {
+				None: null,
+				'Error notice': (
+					<Notice status="error" isDismissible={ true }>
+						Error message
+					</Notice>
+				),
+			},
+		},
+		customFooter: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'None', 'Guideline message', 'Error message', 'Upgrade message' ],
+			mapping: {
+				None: null,
+				'Guideline message': <GuidelineMessage />,
+				'Error message': <ErrorMessage onTryAgainClick={ action( 'onTryAgainClick' ) } />,
+				'Upgrade message': (
+					<UpgradeMessage requestsRemaining={ 10 } onUpgradeClick={ action( 'onUpgradeClick' ) } />
+				),
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			exclude: /on[A-Z].*/,
+		},
+	},
+};
+
+const DefaultTemplate = args => {
+	const [ value, setValue ] = useState( '' );
+
+	const handleChange = ( newValue: string ) => {
+		setValue( newValue );
+		args?.onChange?.( newValue );
+	};
+
+	const handleSend = () => {
+		args?.onSend?.( value );
+	};
+
+	const handleStop = () => {
+		args?.onStop?.();
+	};
+
+	const handleAccept = () => {
+		args?.onAccept?.();
+	};
+
+	const handleDiscard = () => {
+		args?.onDiscard?.();
+	};
+
+	return (
+		<BlockAIControl
+			{ ...args }
+			onChange={ handleChange }
+			onSend={ handleSend }
+			onStop={ handleStop }
+			onAccept={ handleAccept }
+			onDiscard={ handleDiscard }
+			value={ args?.value ?? value }
+		/>
+	);
+};
+
+const DefaultArgs = {
+	placeholder: 'Placeholder',
+	acceptLabel: 'Accept',
+	showButtonLabels: true,
+	disabled: false,
+	isTransparent: false,
+	state: 'init',
+	showAccept: true,
+	showGuideLine: true,
+	customFooter: null,
+	onChange: action( 'onChange' ),
+	onSend: action( 'onSend' ),
+	onStop: action( 'onStop' ),
+	onAccept: action( 'onAccept' ),
+	onDiscard: action( 'onDiscard' ),
+	showRemove: false,
+	bannerComponent: null,
+	errorComponent: null,
+};
+
+export const Default = DefaultTemplate.bind( {} );
+Default.args = DefaultArgs;