feat: dual ESM+CJS builds + toJSONResponse/fetchJSON for non-streaming runtimes

.changeset/cjs-output-and-json-response.md

@@ -0,0 +1,9 @@
+---
+'@tanstack/ai': minor
+'@tanstack/ai-client': minor
+'@tanstack/ai-event-client': patch
+---
+
+**Dual ESM + CJS output.** `@tanstack/ai`, `@tanstack/ai-client`, and `@tanstack/ai-event-client` now ship both ESM and CJS builds with type-aware dual `exports` maps (`import` → `./dist/esm/*.js`, `require` → `./dist/cjs/*.cjs`), plus a `main` field pointing at CJS. Fixes Metro / Expo / CJS-only resolvers that previously couldn't find `@tanstack/ai/adapters` or `@tanstack/ai-client` because the packages were ESM-only (#308).
+
+**New `toJSONResponse(stream, init?)` on `@tanstack/ai`.** Drains the chat stream fully and returns a JSON-array `Response` with `Content-Type: application/json`. Use on server runtimes that can't emit `ReadableStream` responses (Expo's `@expo/server`, some edge proxies). Pair with the new `fetchJSON(url, options?)` connection adapter on `@tanstack/ai-client` — it fetches the array and replays each chunk into the normal `ChatClient` pipeline. Trade-off: no incremental rendering (every chunk arrives at once when the request resolves). Closes #309.

packages/typescript/ai-client/package.json

@@ -18,12 +18,19 @@
     "streaming"
   ],
   "type": "module",
+  "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     }
   },
   "files": [

packages/typescript/ai-client/src/connection-adapters.ts

@@ -424,6 +424,81 @@ export function fetchHttpStream(
   }
 }
 
+/**
+ * Create a JSON-array connection adapter for server runtimes that cannot
+ * stream `ReadableStream` responses (e.g. Expo's `@expo/server`, certain
+ * edge proxies). Pair with `toJSONResponse(stream)` on the server: the
+ * server drains the chat stream fully, JSON-serialises the collected
+ * chunks into an array, and this adapter fetches the array and replays
+ * each chunk one-by-one into the normal client pipeline.
+ *
+ * Trade-off: you lose incremental rendering — the UI sees every chunk
+ * only after the request resolves. Use SSE/HTTP-stream adapters when the
+ * runtime supports them.
+ *
+ * @param url - The API endpoint URL (or a function that returns the URL)
+ * @param options - Fetch options (headers, credentials, body, etc.) or a function that returns options (can be async)
+ * @returns A connection adapter for JSON-array responses
+ *
+ * @example
+ * ```typescript
+ * // Expo / RN client that hits an Expo API route returning toJSONResponse(stream)
+ * const connection = fetchJSON('/api/chat')
+ *
+ * const client = new ChatClient({ connection })
+ * ```
+ */
+export function fetchJSON(
+  url: string | (() => string),
+  options:
+    | FetchConnectionOptions
+    | (() => FetchConnectionOptions | Promise<FetchConnectionOptions>) = {},
+): ConnectConnectionAdapter {
+  return {
+    async *connect(messages, data, abortSignal) {
+      const resolvedUrl = typeof url === 'function' ? url() : url
+      const resolvedOptions =
+        typeof options === 'function' ? await options() : options
+
+      const requestHeaders: Record<string, string> = {
+        'Content-Type': 'application/json',
+        ...mergeHeaders(resolvedOptions.headers),
+      }
+
+      const requestBody = {
+        messages,
+        data,
+        ...resolvedOptions.body,
+      }
+
+      const fetchClient = resolvedOptions.fetchClient ?? fetch
+      const response = await fetchClient(resolvedUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body: JSON.stringify(requestBody),
+        credentials: resolvedOptions.credentials || 'same-origin',
+        signal: abortSignal || resolvedOptions.signal,
+      })
+
+      if (!response.ok) {
+        throw new Error(
+          `HTTP error! status: ${response.status} ${response.statusText}`,
+        )
+      }
+
+      const payload = (await response.json()) as unknown
+      if (!Array.isArray(payload)) {
+        throw new Error(
+          'fetchJSON: expected response body to be a JSON array of StreamChunks. Did you forget to use `toJSONResponse(stream)` on the server?',
+        )
+      }
+      for (const chunk of payload) {
+        yield chunk as StreamChunk
+      }
+    },
+  }
+}
+
 /**
  * Create a direct stream connection adapter (for server functions or direct streams)
  *

packages/typescript/ai-client/src/index.ts

@@ -54,6 +54,7 @@ export type {
 export {
   fetchServerSentEvents,
   fetchHttpStream,
+  fetchJSON,
   stream,
   rpcStream,
   type ConnectConnectionAdapter,

packages/typescript/ai-client/vite.config.ts

@@ -31,6 +31,6 @@ export default mergeConfig(
   tanstackViteConfig({
     entry: ['./src/index.ts'],
     srcDir: './src',
-    cjs: false,
+    cjs: true,
   }),
 )

packages/typescript/ai-event-client/package.json

@@ -10,12 +10,19 @@
     "directory": "packages/typescript/ai-event-client"
   },
   "type": "module",
+  "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     }
   },
   "sideEffects": false,

packages/typescript/ai-event-client/vite.config.ts

@@ -31,6 +31,6 @@ export default mergeConfig(
   tanstackViteConfig({
     entry: ['./src/index.ts'],
     srcDir: './src',
-    cjs: false,
+    cjs: true,
   }),
 )

packages/typescript/ai/package.json

@@ -10,20 +10,39 @@
     "directory": "packages/typescript/ai"
   },
   "type": "module",
+  "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./adapters": {
-      "types": "./dist/esm/activities/index.d.ts",
-      "import": "./dist/esm/activities/index.js"
+      "import": {
+        "types": "./dist/esm/activities/index.d.ts",
+        "default": "./dist/esm/activities/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/activities/index.d.cts",
+        "default": "./dist/cjs/activities/index.cjs"
+      }
     },
     "./middlewares": {
-      "types": "./dist/esm/middlewares/index.d.ts",
-      "import": "./dist/esm/middlewares/index.js"
+      "import": {
+        "types": "./dist/esm/middlewares/index.d.ts",
+        "default": "./dist/esm/middlewares/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/middlewares/index.d.cts",
+        "default": "./dist/cjs/middlewares/index.cjs"
+      }
     }
   },
   "sideEffects": false,

packages/typescript/ai/src/index.ts

@@ -58,6 +58,7 @@ export {
   toServerSentEventsResponse,
   toHttpStream,
   toHttpResponse,
+  toJSONResponse,
 } from './stream-to-response'
 
 // Tool call management

packages/typescript/ai/src/stream-to-response.ts

@@ -250,3 +250,52 @@ export function toHttpResponse(
     ...init,
   })
 }
+
+/**
+ * Drain a StreamChunk async iterable fully, then return the collected chunks
+ * as a single JSON-array `Response`.
+ *
+ * Use this when the target runtime does not support streaming
+ * `ReadableStream` responses — for example Expo's `@expo/server` runtime,
+ * Vercel Edge/Node hybrids behind certain proxies, or Cloudflare setups
+ * without streaming enabled. The consumer pairs with
+ * `fetchJSON` on the client, which decodes the array and yields each
+ * chunk back into the normal streaming pipeline — so the on-screen UX
+ * becomes "render everything at once when the request resolves" instead
+ * of incremental streaming, but the rest of the chat pipeline is unchanged.
+ *
+ * Trade-off: you lose the incremental rendering. Use only when you can't
+ * ship SSE / HTTP-stream responses.
+ *
+ * @param stream - AsyncIterable of StreamChunks from chat()
+ * @param init - Optional Response initialization options (including `abortController`)
+ * @returns Response with `Content-Type: application/json` containing an array of StreamChunks
+ *
+ * @example
+ * ```typescript
+ * // Expo API route where streaming responses aren't supported
+ * export async function POST(request: Request) {
+ *   const stream = chat({ adapter: openaiText(), messages: [...] })
+ *   return toJSONResponse(stream)
+ * }
+ * ```
+ */
+export async function toJSONResponse(
+  stream: AsyncIterable<StreamChunk>,
+  init?: ResponseInit & { abortController?: AbortController },
+): Promise<Response> {
+  const { abortController, headers, ...rest } = init ?? {}
+  const chunks: Array<StreamChunk> = []
+  try {
+    for await (const chunk of stream) {
+      chunks.push(chunk)
+    }
+  } catch (error) {
+    abortController?.abort()
+    throw error
+  }
+  const merged = new Headers(headers)
+  if (!merged.has('Content-Type'))
+    merged.set('Content-Type', 'application/json')
+  return new Response(JSON.stringify(chunks), { ...rest, headers: merged })
+}

packages/typescript/ai/tests/stream-to-response.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import {
   toServerSentEventsStream,
   toServerSentEventsResponse,
+  toJSONResponse,
 } from '../src/stream-to-response'
 import type { StreamChunk } from '../src/types'
 
@@ -870,3 +871,75 @@ describe('SSE Round-Trip (Encode → Decode)', () => {
     )
   })
 })
+
+describe('toJSONResponse', () => {
+  it('drains the stream and returns a JSON-array Response', async () => {
+    const chunks: Array<Record<string, unknown>> = [
+      {
+        type: 'RUN_STARTED',
+        runId: 'r1',
+        model: 'test',
+        timestamp: 1,
+      },
+      {
+        type: 'TEXT_MESSAGE_CONTENT',
+        messageId: 'm1',
+        model: 'test',
+        timestamp: 2,
+        delta: 'Hello',
+        content: 'Hello',
+      },
+      {
+        type: 'RUN_FINISHED',
+        runId: 'r1',
+        model: 'test',
+        timestamp: 3,
+      },
+    ]
+    const response = await toJSONResponse(createMockStream(chunks))
+
+    expect(response.status).toBe(200)
+    expect(response.headers.get('Content-Type')).toBe('application/json')
+    expect(await response.json()).toEqual(chunks)
+  })
+
+  it('defers to caller-provided headers and preserves extra init', async () => {
+    const response = await toJSONResponse(createMockStream([]), {
+      status: 201,
+      headers: { 'X-Custom': '1' },
+    })
+
+    expect(response.status).toBe(201)
+    expect(response.headers.get('X-Custom')).toBe('1')
+    expect(response.headers.get('Content-Type')).toBe('application/json')
+  })
+
+  it('does not override an explicit Content-Type', async () => {
+    const response = await toJSONResponse(createMockStream([]), {
+      headers: { 'Content-Type': 'application/vnd.tanstack-ai+json' },
+    })
+
+    expect(response.headers.get('Content-Type')).toBe(
+      'application/vnd.tanstack-ai+json',
+    )
+  })
+
+  it('aborts the supplied controller and rethrows if the upstream errors', async () => {
+    const abortController = new AbortController()
+    const abortSpy = vi.spyOn(abortController, 'abort')
+    async function* failing(): AsyncGenerator<StreamChunk> {
+      yield {
+        type: 'RUN_STARTED',
+        runId: 'r1',
+        model: 'test',
+        timestamp: 1,
+      } as StreamChunk
+      throw new Error('upstream failure')
+    }
+
+    await expect(
+      toJSONResponse(failing(), { abortController }),
+    ).rejects.toThrow('upstream failure')
+    expect(abortSpy).toHaveBeenCalledOnce()
+  })
+})

packages/typescript/ai/vite.config.ts

@@ -35,6 +35,6 @@ export default mergeConfig(
       './src/middlewares/index.ts',
     ],
     srcDir: './src',
-    cjs: false,
+    cjs: true,
   }),
 )