AI SDK v5: Messages stream to backend console but don't display in React frontend - Next.js 15 + Hono.js setup

[aleksa-codes]

I'm having issues with AI SDK v5 where messages are being generated and logged in the backend console, but they're not streaming to the React frontend UI.

Stack:

• Frontend: Next.js 15 + React 19 (port 3000)
• Backend: Hono.js + Node.js adapter (port 8000)
• AI SDK: v5 with Google Gemini model

Issue: Backend generates and logs responses correctly, but frontend UI shows no messages. The useChat hook doesn't seem to receive the streamed data.

Frontend Code (based on AI SDK docs example):

'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function Page() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/chat`, // points to: http://localhost:8000
    }),
  });
  const [input, setInput] = useState('');

  return (
    <>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) => (part.type === 'text' ? <span key={index}>{part.text}</span> : null))}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput('');
          }
        }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={status !== 'ready'}
          placeholder='Say something...'
        />
        <button type='submit' disabled={status !== 'ready'}>
          Submit
        </button>
      </form>
    </>
  );
}

Backend Code: (based on AI SDK docs example):

import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { type UIMessage, convertToModelMessages, streamText } from 'ai';
import 'dotenv/config';

const app = new Hono();

app.use(
  '/api/*',
  cors({
    origin: 'http://localhost:3000',
    allowHeaders: ['Content-Type'],
    allowMethods: ['POST'],
  }),
);

const google = createGoogleGenerativeAI({
  apiKey: process.env.GOOGLE_API_KEY,
});

app.post('/api/chat', async (c) => {
  const { messages }: { messages: UIMessage[] } = await c.req.json();

  const result = streamText({
    model: google('gemini-2.5-flash-lite'),
    messages: convertToModelMessages(messages),
    onFinish: (result) => {
      console.log('Generated Text:', result.text); // THIS WORKS - I see the response
    },
  });

  return result.toUIMessageStreamResponse();
});

const port = 8000;
console.log(`Server is running on port ${port}`);

serve({
  fetch: app.fetch,
  port,
});

Environment:

• NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 in frontend/.env.local
• CORS configured for localhost:3000 origin
• Backend logs show successful text generation
• Frontend messages array remains empty

What am I missing for the streaming response to reach the React frontend?

[aleksa-codes]

Bumping all the Hono dependencies to the latest versions (hono and @hono/node-server, they were pretty up to date before as well) and deleting .next folder solved the issue, not sure which of those 2 fixed it. Closing.