diff --git a/apps/storybook/stories/ChatSpeechReviewProbe.stories.tsx b/apps/storybook/stories/ChatSpeechReviewProbe.stories.tsx
new file mode 100644
index 00000000000..d7d5b5ce428
--- /dev/null
+++ b/apps/storybook/stories/ChatSpeechReviewProbe.stories.tsx
@@ -0,0 +1,52 @@
+import {useMemo, useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ChatSpeechButton} from '@astryxdesign/core/Chat';
+import type {UseChatSpeechReturn} from '@astryxdesign/core/Chat';
+
+function SharedControllerHarness() {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [events, setEvents] = useState<string[]>([]);
+  const speech = useMemo<UseChatSpeechReturn>(
+    () => ({
+      isSupported: true,
+      isSpeaking,
+      isPaused: false,
+      voices: [],
+      speak: text => {
+        setEvents(value => [...value, `speak:${text}`]);
+        setIsSpeaking(true);
+      },
+      stop: () => {
+        setEvents(value => [...value, 'stop']);
+        setIsSpeaking(false);
+      },
+      pause: () => {},
+      resume: () => {},
+    }),
+    [isSpeaking],
+  );
+  return (
+    <div>
+      <p id="hint">Choose a message</p>
+      <div style={{display: 'flex', gap: 8}}>
+        <ChatSpeechButton
+          speech={speech}
+          text="First"
+          aria-describedby="hint"
+          data-testid="first-wrapper"
+        />
+        <ChatSpeechButton speech={speech} text="Second" />
+      </div>
+      <output data-testid="events">{events.join('|')}</output>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Core/ChatSpeechReviewProbe',
+  component: SharedControllerHarness,
+  parameters: {layout: 'centered'},
+} satisfies Meta<typeof SharedControllerHarness>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const SharedController: Story = {};