Connect a Frontend

The Hono export is a separate HTTP service. Your frontend can remain in Next.js, React, or another framework as long as it sends the request shape expected by the exported pattern.

Find the API route

Open the generated README.md and find the Routes table. Use the exact method and path shown there. The /healthz route only reports server health; it is not the pattern's AI endpoint.

During local development, the frontend commonly runs at http://localhost:3000 and Hono at http://127.0.0.1:3001.

AI SDK chat transport

For a pattern that accepts AI SDK UI messages, point DefaultChatTransport at the full Hono URL:

Copy"use client"
 
import { useChat } from "@ai-sdk/react"
import { DefaultChatTransport } from "ai"
 
const transport = new DefaultChatTransport({
  api: "http://127.0.0.1:3001/api/agent",
})
 
export function Chat() {
  const { messages, sendMessage, status } = useChat({ transport })
 
  // Render the pattern UI with messages, sendMessage, and status.
  return null
}

Replace /api/agent with the route in your generated README. You usually only need to change the transport URL; the exported handler preserves the pattern's request and streaming response behavior.

Use an environment variable

Avoid hard-coding the production origin. In a Next.js frontend, expose only the public API base URL:

CopyNEXT_PUBLIC_AGENT_API_URL=http://127.0.0.1:3001

Copyimport { DefaultChatTransport } from "ai"
 
export const agentTransport = new DefaultChatTransport({
  api: `${process.env.NEXT_PUBLIC_AGENT_API_URL}/api/agent`,
})

Do not put provider API keys in a NEXT_PUBLIC_* variable. Provider credentials belong in the Hono server environment.

Configure CORS

The generated server reads allowed frontend origins from CORS_ORIGINS as a comma-separated list:

CopyCORS_ORIGINS=http://localhost:3000,https://app.example.com
CORS_ALLOW_CREDENTIALS=false

Use full origins without paths. Add every frontend origin that should call the service, and restart the server after changing the value.

If the frontend sends cookies or another credentialed cross-origin request:

1. Set CORS_ALLOW_CREDENTIALS=true on the Hono server.
2. Configure the client request to include credentials.
3. Use explicit trusted origins rather than *.
4. Add a real authentication and CSRF strategy appropriate for your application.

The generated server permits Content-Type and Authorization request headers and exposes the AI SDK stream header and x-request-id.

Plain HTTP clients

Non-chat patterns can be called with fetch. Match the request body documented by the pattern source:

Copyconst response = await fetch("http://127.0.0.1:3001/api/example", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ prompt: "Summarize this document" }),
})
 
if (!response.ok) {
  throw new Error(`Request failed: ${response.status}`)
}

Do not call response.json() when the route returns a streaming response. Let AI SDK consume the stream or read response.body with a streaming client.

Next steps

Before exposing the service publicly, follow the production deployment guide. For browser or streaming failures, see Troubleshooting.