diff --git a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
index bea7dad7..2699e1b6 100644
--- a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
@@ -116,6 +116,64 @@ exports[`renders components/useXChat/demo/stream.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/useXChat/demo/stream-cancel.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-bubble-list ant-bubble-list-reach-end"
+    style="max-height:300px"
+  />
+  <div
+    class="ant-sender"
+  >
+    <div
+      class="ant-sender-content"
+    >
+      <textarea
+        class="ant-input ant-input-borderless ant-sender-input"
+      />
+      <div
+        class="ant-sender-actions-list"
+      >
+        <div
+          class="ant-sender-actions-list-presets ant-flex"
+        >
+          <button
+            class="ant-btn ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/useXChat/demo/suggestions.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
diff --git a/components/useXChat/demo/stream-cancel.md b/components/useXChat/demo/stream-cancel.md
new file mode 100644
index 00000000..f9f993b8
--- /dev/null
+++ b/components/useXChat/demo/stream-cancel.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+打断正在流式输出的内容。
+
+## en-US
+
+Interrupt the ongoing streaming output.
diff --git a/components/useXChat/demo/stream-cancel.tsx b/components/useXChat/demo/stream-cancel.tsx
new file mode 100644
index 00000000..98639410
--- /dev/null
+++ b/components/useXChat/demo/stream-cancel.tsx
@@ -0,0 +1,119 @@
+import { UserOutlined } from '@ant-design/icons';
+import { Bubble, Sender, useXAgent, useXChat, XStream } from '@ant-design/x';
+import { Flex, type GetProp } from 'antd';
+import React, { useEffect, useRef } from 'react';
+
+const roles: GetProp<typeof Bubble.List, 'roles'> = {
+  ai: {
+    placement: 'start',
+    avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
+  },
+  local: {
+    placement: 'end',
+    avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
+  },
+};
+
+const contentChunks = [
+  'He',
+  'llo',
+  ', w',
+  'or',
+  'ld!',
+  ' Ant',
+  ' Design',
+  ' X',
+  ' is',
+  ' the',
+  ' best',
+  '!',
+];
+
+function mockReadableStream() {
+  const sseChunks: string[] = [];
+
+  for (let i = 0; i < contentChunks.length; i++) {
+    const sseEventPart = `event: message\ndata: {"id":"${i}","content":"${contentChunks[i]}"}\n\n`;
+    sseChunks.push(sseEventPart);
+  }
+
+  return new ReadableStream({
+    async start(controller) {
+      for (const chunk of sseChunks) {
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        controller.enqueue(new TextEncoder().encode(chunk));
+      }
+      controller.close();
+    },
+  });
+}
+
+const App = () => {
+  const [content, setContent] = React.useState('');
+
+  const abortRef = useRef(() => {});
+
+  useEffect(() => {
+    return () => {
+      abortRef.current();
+    };
+  }, []);
+
+  // Agent for request
+  const [agent] = useXAgent({
+    request: async (_, { onSuccess, onUpdate }) => {
+      const stream = XStream({
+        readableStream: mockReadableStream(),
+      });
+
+      const reader = stream.getReader();
+      abortRef.current = () => {
+        reader?.cancel();
+      };
+
+      let current = '';
+      while (reader) {
+        const { value, done } = await reader.read();
+        if (done) {
+          onSuccess(current);
+          break;
+        }
+        if (!value) continue;
+        const data = JSON.parse(value.data);
+        current += data.content || '';
+        onUpdate(current);
+      }
+    },
+  });
+
+  // Chat messages
+  const { onRequest, messages } = useXChat({
+    agent,
+  });
+
+  return (
+    <Flex vertical gap="middle">
+      <Bubble.List
+        roles={roles}
+        style={{ maxHeight: 300 }}
+        items={messages.map(({ id, message, status }) => ({
+          key: id,
+          role: status === 'local' ? 'local' : 'ai',
+          content: message,
+        }))}
+      />
+      <Sender
+        loading={agent.isRequesting()}
+        value={content}
+        onChange={setContent}
+        onSubmit={(nextContent) => {
+          onRequest(nextContent);
+          setContent('');
+        }}
+        onCancel={() => abortRef.current()}
+      />
+    </Flex>
+  );
+};
+
+export default App;
diff --git a/components/useXChat/index.en-US.md b/components/useXChat/index.en-US.md
index 3b4cba62..416a7544 100644
--- a/components/useXChat/index.en-US.md
+++ b/components/useXChat/index.en-US.md
@@ -20,6 +20,7 @@ Use Agent to manage conversation data and produce data for page rendering.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/stream.tsx">Streaming</code>
+<code src="./demo/stream-cancel.tsx">Interrupt the output</code>
 <code src="./demo/suggestions.tsx">Multiple Suggestion</code>
 
 ## API
diff --git a/components/useXChat/index.zh-CN.md b/components/useXChat/index.zh-CN.md
index 5f5f10a3..4477cadc 100644
--- a/components/useXChat/index.zh-CN.md
+++ b/components/useXChat/index.zh-CN.md
@@ -21,6 +21,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/stream.tsx">流式输出</code>
+<code src="./demo/stream-cancel.tsx">打断输出</code>
 <code src="./demo/suggestions.tsx">多项建议</code>
 
 ## API
diff --git a/components/x-stream/__tests__/index.test.tsx b/components/x-stream/__tests__/index.test.tsx
index feee60f4..8d394dd8 100644
--- a/components/x-stream/__tests__/index.test.tsx
+++ b/components/x-stream/__tests__/index.test.tsx
@@ -97,4 +97,17 @@ describe('XStream', () => {
       })(),
     ).rejects.toThrow('The key-value separator ":" is not found in the sse line chunk!');
   });
+
+  it('should return an instance of ReadableStream', () => {
+    expect(
+      XStream({
+        readableStream: new ReadableStream({
+          async start(controller) {
+            controller.enqueue(new TextEncoder().encode('event: message\n\ndata: value\n\n'));
+            controller.close();
+          },
+        }),
+      }),
+    ).toBeInstanceOf(ReadableStream);
+  });
 });
diff --git a/components/x-stream/index.ts b/components/x-stream/index.ts
index 6868ae61..6ae18a98 100644
--- a/components/x-stream/index.ts
+++ b/components/x-stream/index.ts
@@ -137,11 +137,13 @@ export interface XStreamOptions<Output> {
   transformStream?: TransformStream<string, Output>;
 }
 
+type XReadableStream<R = SSEOutput> = ReadableStream<R> & AsyncGenerator<R>;
+
 /**
  * @description Transform Uint8Array binary stream to {@link SSEOutput} by default
  * @warning The `XStream` only support the `utf-8` encoding. More encoding support maybe in the future.
  */
-async function* XStream<Output = SSEOutput>(options: XStreamOptions<Output>) {
+function XStream<Output = SSEOutput>(options: XStreamOptions<Output>) {
   const { readableStream, transformStream } = options;
 
   if (!(readableStream instanceof ReadableStream)) {
@@ -151,33 +153,38 @@ async function* XStream<Output = SSEOutput>(options: XStreamOptions<Output>) {
   // Default encoding is `utf-8`
   const decoderStream = new TextDecoderStream();
 
-  const stream = transformStream
-    ? /**
-       * Uint8Array binary -> string -> Output
-       */
-      readableStream
-        .pipeThrough(decoderStream)
-        .pipeThrough(transformStream)
-    : /**
-       * Uint8Array binary -> string -> SSE part string -> Default Output {@link SSEOutput}
-       */
-      readableStream
-        .pipeThrough(decoderStream)
-        .pipeThrough(splitStream())
-        .pipeThrough(splitPart());
-
-  const reader = stream.getReader() as ReadableStreamDefaultReader<Output>;
-
-  while (reader instanceof ReadableStreamDefaultReader) {
-    const { value, done } = await reader.read();
-
-    if (done) break;
-
-    if (!value) continue;
-
-    // Transformed data through all transform pipes
-    yield value;
+  const stream = (
+    transformStream
+      ? /**
+         * Uint8Array binary -> string -> Output
+         */
+        readableStream.pipeThrough(decoderStream).pipeThrough(transformStream)
+      : /**
+         * Uint8Array binary -> string -> SSE part string -> Default Output {@link SSEOutput}
+         */
+        readableStream
+          .pipeThrough(decoderStream)
+          .pipeThrough(splitStream())
+          .pipeThrough(splitPart())
+  ) as XReadableStream<Output>;
+
+  /** support async iterator */
+  stream[Symbol.asyncIterator] = async function* () {
+    const reader = this.getReader();
+
+    while (true) {
+      const { done, value } = await reader.read();
+
+      if (done) break;
+
+      if (!value) continue;
+
+      // Transformed data through all transform pipes
+      yield value;
+    }
   }
+  
+  return stream;
 }
 
 export default XStream;