AI-SDK RSC MIGRATION FOR PRODUCTION

[ngoiyaeric]

AI SDK RSC is currently experimental. We recommend using AI SDK UI for production. For guidance on migrating from RSC to UI, see our migration guide.

https://sdk.vercel.ai/docs/ai-sdk-rsc/migrating-to-ui

[ngoiyaeric]

Migration Plan: ai/rsc to ai/ui (AI SDK)

Summary

Migrate QCX from the experimental ai/rsc streaming-UI pattern (server actions + createStreamableUI + createAI) to the stable ai/ui pattern (useChat hook + route handler + client-side rendering of tool results).

Official guide: https://ai-sdk.dev/docs/ai-sdk-rsc/migrating-to-ui

---

Current Architecture

Layer	Pattern	Key APIs
Server	app/actions.tsx server action (submit)	createAI, createStreamableUI, createStreamableValue, getMutableAIState, getAIState
Agents	Each agent receives uiStream and renders React components server-side	createStreamableUI, createStreamableValue
Client	Components consume streamed UI via RSC hooks	useUIState, useAIState, useActions, useStreamableValue, readStreamableValue, StreamableValue
Provider	<AI> wraps pages in app/page.tsx and app/search/[id]/page.tsx	createAI

Target Architecture

Layer	Pattern	Key APIs
Server	app/api/chat/route.ts route handler	streamText, result.toDataStreamResponse()
Agents	Agents return data/text (no UI rendering)	streamText, streamObject, generateObject
Client	useChat manages messages, renders tool results client-side	useChat from @ai-sdk/react
Provider	No <AI> wrapper needed	N/A

---

Files That Need Changes (24 files)

Tier 1: Core Architecture (must change first)

#	File	Current ai/rsc Usage	Migration Action
1	app/actions.tsx	createAI, createStreamableUI, createStreamableValue, getMutableAIState, getAIState, getUIStateFromAIState	Rewrite as route handler app/api/chat/route.ts. Move tool orchestration to route handler using streamText. Remove createAI export. Keep types (AIState, AIMessage) as needed.
2	app/page.tsx	Wraps with <AI> provider	Remove <AI> wrapper. Pass chat config props instead.
3	app/search/[id]/page.tsx	Wraps with <AI> provider + initialAIState	Remove <AI> wrapper. Pass initialMessages as prop to Chat.

Tier 2: Agent Functions (remove UI streaming from server)

#	File	Current Usage	Migration Action
4	lib/agents/researcher.tsx	createStreamableUI, createStreamableValue, renders <Section>, <BotMessage> server-side	Return text/data only. Remove uiStream/streamText params. Return { fullResponse, hasError, toolResponses }.
5	lib/agents/inquire.tsx	createStreamableUI, createStreamableValue, renders <Copilot> server-side	Return inquiry data object only. Remove uiStream param.
6	lib/agents/query-suggestor.tsx	createStreamableUI, createStreamableValue, renders <SearchRelated> server-side	Return related queries data only. Remove uiStream param.
7	lib/agents/writer.tsx	createStreamableUI, createStreamableValue, renders <BotMessage> server-side	Return text only. Remove uiStream/streamText params.
8	lib/agents/tools/index.tsx	createStreamableUI in ToolProps type	Remove uiStream from ToolProps. Tools return data only.
9	lib/agents/tools/search.tsx	createStreamableValue, renders <SearchSection> server-side	Return search results data only. Remove UI rendering.
10	lib/agents/tools/video-search.tsx	createStreamableValue, renders <VideoSearchSection> server-side	Return video results data only. Remove UI rendering.
11	lib/agents/tools/geospatial.tsx	createStreamableUI, createStreamableValue, renders <BotMessage> server-side	Return geospatial data only. Remove UI rendering.
12	lib/actions/suggest.ts	createStreamableUI, createStreamableValue	Return suggestions data via a simple API or keep as server action returning plain data.

Tier 3: Client Components (switch from RSC hooks to useChat)

#	File	Current Usage	Migration Action
13	components/chat.tsx	useUIState, useAIState	Use useChat hook. Render messages from useChat().messages with client-side component mapping.
14	components/chat-panel.tsx	useUIState, useActions, readStreamableValue	Use useChat().handleSubmit, useChat().input, useChat().setInput. Remove submit/clearChat actions.
15	components/chat-messages.tsx	StreamableValue, useUIState	Accept messages from useChat. Render tool invocations client-side.
16	components/message.tsx	StreamableValue, useStreamableValue	Accept content: string prop instead of StreamableValue<string>.
17	components/collapsible-message.tsx	StreamableValue, useStreamableValue	Accept isCollapsed: boolean prop instead of StreamableValue<boolean>.
18	components/copilot.tsx	useActions, useStreamableValue, useUIState	Use useChat for submitting. Accept inquiry data as plain props.
19	components/followup-panel.tsx	useActions, useUIState	Use useChat().append or handleSubmit for follow-up messages.
20	components/search-related.tsx	useActions, useStreamableValue, useUIState, StreamableValue	Accept relatedQueries as plain data prop. Use useChat for submitting related queries.
21	components/search-section.tsx	StreamableValue, useStreamableValue	Accept result: string (or parsed object) as plain prop.
22	components/video-search-section.tsx	StreamableValue, useStreamableValue	Accept result: string as plain prop.
23	components/mobile-icons-bar.tsx	useUIState, useActions	Use useChat for clearing chat.
24	components/header-search-button.tsx	useActions, useUIState	Use useChat for submitting resolution search.
25	components/resolution-carousel.tsx	useActions, useUIState	Use useChat for QCX-TERRA analysis submission.

---

New Files to Create

File	Purpose
app/api/chat/route.ts	Rewrite existing route handler to use streamText with tools, orchestrating the researcher/writer/inquiry/suggestion flow
components/chat-provider.tsx	Thin wrapper providing useChat context to child components (so they can all access the same chat instance)
components/tool-renderer.tsx	Client-side component that maps toolInvocations to UI components (SearchSection, VideoSearchSection, MapQueryHandler, etc.)

---

Migration Strategy

Phase 1: Server-side (route handler + agents)

1. Create the new app/api/chat/route.ts route handler using streamText
2. Refactor agents to return data only (remove uiStream params)
3. Refactor tools to return data only (remove UI rendering)

Phase 2: Client-side (useChat + component updates)

4. Create ChatProvider context wrapping useChat
5. Update Chat component to use useChat instead of useUIState/useAIState
6. Update ChatPanel to use useChat for submission
7. Update all display components to accept plain data props instead of StreamableValue
8. Update interactive components to use useChat for actions
9. Remove <AI> wrapper from page files

Phase 3: Cleanup

10. Remove createAI export and old RSC code from app/actions.tsx
11. Remove unused ai/rsc imports throughout

---

Verification Strategy

Check	Command
TypeScript	npx tsc --noEmit
Lint	bun run lint
Build	bun run build
E2E Tests	bun run test:e2e (Playwright)

---

Key Design Decisions

1. Tool results rendered client-side: Instead of streaming React components from the server, tools return JSON data. The client maps toolInvocations to the appropriate React components.

2. Chat state via useChat: The useChat hook from @ai-sdk/react replaces useUIState/useAIState/useActions. It handles message state, streaming, and submission.

3. Multi-step flow preserved: The task manager -> inquire/researcher -> writer -> query suggestor flow will be orchestrated in the route handler using streamText with maxSteps.

4. Resolution search: The map capture + analysis flow will use a separate API endpoint or a custom request body field to handle file uploads, since useChat supports attachments.

5. Suggestions: getSuggestions will become a simple server action or API endpoint returning plain JSON (no StreamableValue).

---

Dependency Changes

# package.json
+ "@ai-sdk/react": "latest"    # useChat, useCompletion hooks
# ai/rsc will still be in the "ai" package but unused

---

Risk Assessment

Risk	Mitigation
Complex multi-agent flow may break	Preserve exact same orchestration logic in route handler
Tool UI rendering differences	Test each tool type (search, video, geospatial, retrieve) individually
File upload (resolution search) needs special handling	Use useChat experimental attachments or a separate endpoint
Chat history persistence	Ensure onFinish callback in route handler saves messages to DB
Suggestions dropdown may lose streaming behavior	Use a separate streaming endpoint or accept slight UX change

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Replace the RSC streaming pattern (server pushes React components) with the AI SDK UI pattern (server streams data, client renders) by creating a new route handler at /api/chat/stream/route.ts that uses streamText with tools
• Migrate all client components from RSC hooks (useUIState, useAIState, useActions) to the useChat hook which provides messages, input handling, and loading state
• Refactor tools to return structured data instead of pushing UI, then render tool-specific UI client-side based on toolInvocations in useChat messages
• Move chat persistence from the createAI onSetAIState callback to explicit saves in the route handler, maintaining compatibility with the existing database schema

Design Choices

Design Choice 1: Tool Result Rendering Strategy

Options Considered:

1. Use useChat's built-in tool call/result parts and render tool-specific UI client-side based on tool name and result data
2. Stream custom data annotations alongside text and parse them client-side
3. Use a hybrid approach with some server rendering

Chosen Option: 1

Rationale: Leverage useChat's native tool handling where tool calls and results appear as message parts, allowing client components to render appropriate UI based on tool name and structured result data.

Design Choice 2: Inquiry/Copilot Flow Handling

Options Considered:

1. Model inquiry as a special message type with structured data that the client renders as the Copilot component
2. Create a separate route/endpoint for inquiry flows
3. Use tool calls to represent inquiry requests

Chosen Option: 1

Rationale: Treat inquiry as a structured response type within the standard chat flow, where the response includes inquiry data that triggers Copilot rendering client-side.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Route Handler & Streaming Infrastructure

Establish the new streaming endpoint that replaces the submit server action, adapting the existing agent orchestration logic to work within a route handler context.

Task 1: Create Streaming Chat Route Handler

Create the core route handler that accepts chat messages and returns a streaming response compatible with useChat.

• Create app/api/chat/stream/route.ts as the new streaming endpoint
• Accept POST requests with { messages, chatId, mapData, drawnFeatures } in the request body
• Implement the task-manager routing logic (currently in app/actions.tsx processEvents) to determine whether to inquire or proceed
• Use streamText from ai package with the existing model selection logic from lib/utils/registry.ts
• Return response via result.toDataStreamResponse() for useChat compatibility
• Handle authentication check similar to current submit action

Task 2: Adapt Tool Definitions for streamText

Refactor tools to return structured data instead of pushing UI components.

• Update lib/agents/tools/index.tsx to export tools without uiStream dependency
• Modify search.tsx tool to return search results as structured JSON (remove uiStream.append(<SearchSection>))
• Modify retrieve.tsx tool to return retrieved content as data
• Modify geospatial.tsx tool to return map query results as structured data (remove inline UI updates)
• Modify video-search.tsx tool to return video results as structured data
• Ensure all tool execute functions return data that can be serialized in the stream

Task 3: Adapt Agent Logic for Route Handler

Restructure the researcher and writer agents to work with the route handler pattern.

• Refactor lib/agents/researcher.tsx to configure streamText with tools and return the stream result (remove uiStream parameter and manual stream event handling)
• Refactor lib/agents/writer.tsx similarly for the no-tools fallback case
• Update the agent signature to accept messages and return a streamText result that the route handler can return directly
• Preserve system prompt construction and model configuration logic

Task 4: Handle Inquiry Flow in Route Handler

Adapt the inquiry/clarification flow to work within the streaming response.

• Modify lib/agents/inquire.tsx to use streamObject and return the inquiry data as part of the response stream
• Configure the route handler to detect inquiry vs proceed paths and handle accordingly
• Return inquiry data in a format that useChat can deliver to the client (e.g., as a structured message or data annotation)

🤖 Prompt for AI agents

Create the new streaming backend infrastructure to replace the `submit` server
action. The goal is a working `/api/chat/stream` route handler that agents and
tools can plug into.

**1. Create `app/api/chat/stream/route.ts`**
- Accept POST requests with body `{ messages, chatId, mapData, drawnFeatures }`
- Replicate the authentication check from the existing `submit` action in
`app/actions.tsx`
- Port the task-manager routing logic (currently `processEvents` in
`app/actions.tsx`) to determine whether to call the inquiry path or the
researcher/writer path
- Use `streamText` from the `ai` package; use existing model selection logic
from `lib/utils/registry.ts`
- Return the stream via `result.toDataStreamResponse()`
- For the inquiry path, use `streamObject` in `lib/agents/inquire.tsx` and
return inquiry data in a format consumable by `useChat` (e.g., data annotation)

**2. Refactor tool definitions in `lib/agents/tools/`**
- Update `index.tsx` to remove any `uiStream` parameter from tool exports
- In each tool (`search.tsx`, `retrieve.tsx`, `geospatial.tsx`,
`video-search.tsx`): remove all `uiStream.append(...)` / `uiStream.update(...)`
calls and instead return structured, serializable JSON from each tool's
`execute` function

**3. Refactor agent files**
- `lib/agents/researcher.tsx`: Remove `uiStream` parameter; configure
`streamText` with the updated tools; return the `streamText` result directly so
the route handler can forward it
- `lib/agents/writer.tsx`: Apply the same pattern for the no-tools fallback case
- `lib/agents/inquire.tsx`: Switch to `streamObject` and return structured
inquiry data compatible with the `useChat` data stream
- Preserve all existing system prompt construction and model configuration logic
in each agent

Phase 2: Client Migration to useChat

Replace the RSC-specific hooks and providers with the standard useChat hook across all consuming components.

Task 1: Remove AI Provider and Migrate Chat Component

Replace the createAI provider pattern with direct useChat usage.

• Update app/page.tsx to remove <AI> provider wrapper
• Update components/chat.tsx to use useChat({ api: '/api/chat/stream' }) instead of useUIState and useAIState
• Map useChat return values (messages, input, setInput, handleSubmit, isLoading, etc.) to existing component needs
• Pass chat-specific configuration (chatId, initial messages) via useChat options
• Remove imports from ai/rsc in favor of ai/react

Task 2: Migrate Chat Panel Submission

Update the primary input component to use useChat's submission mechanism.

• Update components/chat-panel.tsx to receive useChat handlers from parent or use hook directly
• Replace useActions().submit with useChat's handleSubmit or append methods
• Adapt form submission to pass additional data (drawnFeatures, file attachments) via useChat's body option
• Remove useUIState setter calls (optimistic updates handled by useChat automatically)
• Update readStreamableValue usage for suggestions to use fetch-based streaming or separate endpoint

Task 3: Update Message Rendering Components

Adapt components that render messages to work with useChat's message format.

• Update components/chat-messages.tsx to render messages from useChat's messages array
• Modify message iteration to handle useChat's message structure ({ id, role, content, toolInvocations })
• Update components/message.tsx BotMessage to accept content directly instead of StreamableValue<string>
• Update components/message.tsx UserMessage to work with useChat message format
• Remove useStreamableValue hook usage from these components

Task 4: Migrate Collapsible Message Pattern

Adapt the collapsible message wrapper to work without StreamableValue.

• Update components/collapsible-message.tsx to manage collapse state via local state or parent props instead of useStreamableValue
• Determine collapse state based on message completion status from useChat (e.g., isLoading flag or presence of content)
• Remove StreamableValue<boolean> dependency

🤖 Prompt for AI agents

Migrate all client-side components from RSC-specific hooks to the standard
`useChat` hook. The goal is to fully remove `ai/rsc` imports and replace them
with `ai/react`.

**1. `app/page.tsx`**
- Remove the `<AI>` provider wrapper component

**2. `components/chat.tsx`**
- Replace `useUIState` and `useAIState` with `useChat({ api: '/api/chat/stream'
})`
- Pass `initialMessages` and `chatId` (via `body`) through `useChat` options
- Distribute `messages`, `input`, `setInput`, `handleSubmit`, `isLoading`, etc.
to child components
- Replace all `ai/rsc` imports with `ai/react`

**3. `components/chat-panel.tsx`**
- Receive `useChat` handlers (e.g., `handleSubmit`, `append`, `setMessages`)
from the parent or invoke `useChat` directly
- Replace `useActions().submit` with `handleSubmit` or `append`
- Pass additional data (drawnFeatures, file attachments) via the `body` option
of `useChat`
- Remove manual `useUIState` setter calls — `useChat` manages optimistic updates
automatically
- Replace `readStreamableValue` usage for suggestions with a fetch-based
approach or separate endpoint

**4. `components/chat-messages.tsx`**
- Iterate over the `messages` array from `useChat` (structure: `{ id, role,
content, toolInvocations }`)
- Remove any RSC-specific message shape assumptions

**5. `components/message.tsx`**
- Update `BotMessage` to accept `content: string` directly instead of
`StreamableValue<string>`
- Update `UserMessage` for the `useChat` message format
- Remove all `useStreamableValue` hook usage

**6. `components/collapsible-message.tsx`**
- Replace `StreamableValue<boolean>` and `useStreamableValue` with local React
state or a prop
- Derive collapse state from `isLoading` or message content presence

Phase 3: Tool Result & Specialized Component Updates

Update components that render tool-specific UI to consume tool results from useChat's message format.

Task 1: Implement Tool Result Rendering

Create client-side rendering for tool call results that were previously pushed from the server.

• Create a tool result renderer component (e.g., components/tool-result-renderer.tsx) that switches on tool name
• Render SearchSection when tool name is search with results from toolInvocations
• Render geospatial/map UI when tool name is geospatialQueryTool
• Render video results when tool name is videoSearch
• Integrate this renderer into the message display flow in chat-messages.tsx

Task 2: Update Search Section Component

Adapt the search results display to receive data props instead of streaming values.

• Update components/search-section.tsx to accept results: SearchResults prop directly
• Remove useStreamableValue hook and JSON parsing logic
• Keep all existing rendering logic (result cards, source display, etc.)

Task 3: Adapt Copilot/Inquiry Flow

Update the Copilot component to work with the new inquiry data delivery mechanism.

• Update components/copilot.tsx to receive inquiry data as props instead of via useStreamableValue
• Replace useActions().submit with a callback passed from parent that uses useChat's append/send
• Update components/copilot-display.tsx as needed for the new data format
• Ensure inquiry responses are properly sent back through the chat flow

Task 4: Migrate Follow-up and Related Query Components

Update components that display and handle follow-up queries.

• Update components/followup-panel.tsx to receive submit handler from parent instead of useActions
• Update components/search-related.tsx to work with useChat submission pattern
• Update components/query-suggestor related rendering to work with tool results or data annotations
• Remove useUIState and useActions imports from these components

🤖 Prompt for AI agents

Wire up client-side rendering for tool results and update all specialized
components to consume data from `useChat`'s `toolInvocations` instead of
server-pushed UI. The goal is full replacement of server-rendered tool UI with
client-side equivalents.

**1. Create `components/tool-result-renderer.tsx`**
- Accept a `toolInvocation` object (from `useChat` message parts) as a prop
- Switch on `toolInvocation.toolName`:
  - `search` → render `<SearchSection results={toolInvocation.result} />`
  - `geospatialQueryTool` → render geospatial/map UI with result data
  - `videoSearch` → render video results UI with result data
- Integrate this renderer in `components/chat-messages.tsx` for each tool
invocation in a message

**2. `components/search-section.tsx`**
- Replace `useStreamableValue` and JSON parsing with a direct `results:
SearchResults` prop
- Keep all existing card/source rendering logic unchanged

**3. `components/copilot.tsx` and `components/copilot-display.tsx`**
- Replace `useStreamableValue` with direct props for inquiry data
- Replace `useActions().submit` with a callback prop (provided by parent) that
calls `useChat`'s `append` or equivalent send function
- Ensure the user's inquiry answer is routed back through the standard chat flow

**4. `components/followup-panel.tsx`, `components/search-related.tsx`, and
`components/query-suggestor`**
- Remove `useActions` and `useUIState` imports
- Accept submit/append handler callbacks from parent components instead
- Update rendering to use tool result data or data annotations from `useChat`
messages

Phase 4: State Persistence & Auxiliary Flows

Handle chat persistence, share functionality, and auxiliary features that previously relied on RSC state callbacks.

Task 1: Implement Chat Persistence in Route Handler

Replace the onSetAIState persistence callback with explicit saves in the route handler.

• Add chat save logic to app/api/chat/stream/route.ts after stream completion
• Use existing saveChat from lib/actions/chat.ts or lib/actions/chat-db.ts
• Save messages to database with appropriate types (input, response, tool, etc.)
• Handle the initial chat creation vs. update logic

Task 2: Update Share/Search Page

Adapt the shared chat viewing page to work without the AI provider.

• Update app/search/[id]/page.tsx to pass initial messages directly to the Chat component
• Remove <AI> provider wrapper
• Ensure the Chat component can hydrate with existing messages without useChat making new requests
• Use useChat's initialMessages option to load persisted conversations

Task 3: Update Clear Chat Functionality

Migrate the clear chat action from RSC pattern to standard pattern.

• Update components/chat-panel.tsx clear logic to reset useChat state (via setMessages([]) from useChat)
• Update components/mobile-icons-bar.tsx similarly
• Optionally keep a server action for any server-side cleanup if needed
• Remove clearChat from the actions that were registered with createAI

Task 4: Remove RSC Infrastructure

Clean up the deprecated RSC code after migration is complete.

• Remove createAI configuration and AI export from app/actions.tsx
• Remove AIState and UIState type definitions (or repurpose for new message types)
• Remove getUIStateFromAIState reconstruction function
• Remove onGetUIState and onSetAIState callbacks
• Keep any utility functions that may still be useful
• Update or remove the submit server action (may keep for non-chat uses or delete entirely)

🤖 Prompt for AI agents

Finalize the migration by replacing the `onSetAIState` persistence callback with
explicit route handler saves, updating auxiliary pages and components, and
deleting all remaining RSC infrastructure.

**1. Chat persistence in `app/api/chat/stream/route.ts`**
- After the stream completes, call `saveChat` from `lib/actions/chat.ts` or
`lib/actions/chat-db.ts`
- Persist all messages with appropriate type labels (input, response, tool,
etc.)
- Handle both initial chat creation and update (upsert) logic

**2. `app/search/[id]/page.tsx`**
- Remove the `<AI>` provider wrapper
- Fetch persisted messages server-side and pass them as `initialMessages` to the
Chat component
- The Chat component should use `useChat`'s `initialMessages` option so no new
request is fired on hydration

**3. Clear chat — `components/chat-panel.tsx` and
`components/mobile-icons-bar.tsx`**
- Replace any `clearChat` server action calls with `setMessages([])` from
`useChat`
- Add an optional server action call for server-side cleanup if required
- Remove `clearChat` from any `createAI`-registered actions

**4. Remove RSC infrastructure from `app/actions.tsx`**
- Delete the `createAI` configuration and `AI` export
- Delete `AIState`, `UIState` type definitions (or repurpose as needed)
- Delete `getUIStateFromAIState`, `onGetUIState`, and `onSetAIState`
- Evaluate the `submit` server action: remove or retain only for non-chat uses
- Retain any utility functions still referenced elsewhere

Research

The application is a Next.js chat interface with sophisticated AI capabilities including multi-tool support (search, geospatial queries, video search), clarifying questions via a "Copilot" component, and follow-up suggestions. The current architecture centers on app/actions.tsx which exports a createAI provider wrapping the app, with server actions (submit, clearChat) that use createStreamableUI to push React components directly to the client. Client components consume this via useUIState, useAIState, and useActions hooks. The agent system (lib/agents/) receives uiStream objects and calls .update() / .append() to render UI during AI generation. Chat persistence happens via an onSetAIState callback in the createAI configuration.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Create the new streaming backend infrastructure to replace the `submit` server
action. The goal is a working `/api/chat/stream` route handler that agents and
tools can plug into.

**1. Create `app/api/chat/stream/route.ts`**
- Accept POST requests with body `{ messages, chatId, mapData, drawnFeatures }`
- Replicate the authentication check from the existing `submit` action in
`app/actions.tsx`
- Port the task-manager routing logic (currently `processEvents` in
`app/actions.tsx`) to determine whether to call the inquiry path or the
researcher/writer path
- Use `streamText` from the `ai` package; use existing model selection logic
from `lib/utils/registry.ts`
- Return the stream via `result.toDataStreamResponse()`
- For the inquiry path, use `streamObject` in `lib/agents/inquire.tsx` and
return inquiry data in a format consumable by `useChat` (e.g., data annotation)

**2. Refactor tool definitions in `lib/agents/tools/`**
- Update `index.tsx` to remove any `uiStream` parameter from tool exports
- In each tool (`search.tsx`, `retrieve.tsx`, `geospatial.tsx`,
`video-search.tsx`): remove all `uiStream.append(...)` / `uiStream.update(...)`
calls and instead return structured, serializable JSON from each tool's
`execute` function

**3. Refactor agent files**
- `lib/agents/researcher.tsx`: Remove `uiStream` parameter; configure
`streamText` with the updated tools; return the `streamText` result directly so
the route handler can forward it
- `lib/agents/writer.tsx`: Apply the same pattern for the no-tools fallback case
- `lib/agents/inquire.tsx`: Switch to `streamObject` and return structured
inquiry data compatible with the `useChat` data stream
- Preserve all existing system prompt construction and model configuration logic
in each agent
===============================================================================

Task: 2

Migrate all client-side components from RSC-specific hooks to the standard
`useChat` hook. The goal is to fully remove `ai/rsc` imports and replace them
with `ai/react`.

**1. `app/page.tsx`**
- Remove the `<AI>` provider wrapper component

**2. `components/chat.tsx`**
- Replace `useUIState` and `useAIState` with `useChat({ api: '/api/chat/stream'
})`
- Pass `initialMessages` and `chatId` (via `body`) through `useChat` options
- Distribute `messages`, `input`, `setInput`, `handleSubmit`, `isLoading`, etc.
to child components
- Replace all `ai/rsc` imports with `ai/react`

**3. `components/chat-panel.tsx`**
- Receive `useChat` handlers (e.g., `handleSubmit`, `append`, `setMessages`)
from the parent or invoke `useChat` directly
- Replace `useActions().submit` with `handleSubmit` or `append`
- Pass additional data (drawnFeatures, file attachments) via the `body` option
of `useChat`
- Remove manual `useUIState` setter calls — `useChat` manages optimistic updates
automatically
- Replace `readStreamableValue` usage for suggestions with a fetch-based
approach or separate endpoint

**4. `components/chat-messages.tsx`**
- Iterate over the `messages` array from `useChat` (structure: `{ id, role,
content, toolInvocations }`)
- Remove any RSC-specific message shape assumptions

**5. `components/message.tsx`**
- Update `BotMessage` to accept `content: string` directly instead of
`StreamableValue<string>`
- Update `UserMessage` for the `useChat` message format
- Remove all `useStreamableValue` hook usage

**6. `components/collapsible-message.tsx`**
- Replace `StreamableValue<boolean>` and `useStreamableValue` with local React
state or a prop
- Derive collapse state from `isLoading` or message content presence
===============================================================================

Task: 3

Wire up client-side rendering for tool results and update all specialized
components to consume data from `useChat`'s `toolInvocations` instead of
server-pushed UI. The goal is full replacement of server-rendered tool UI with
client-side equivalents.

**1. Create `components/tool-result-renderer.tsx`**
- Accept a `toolInvocation` object (from `useChat` message parts) as a prop
- Switch on `toolInvocation.toolName`:
  - `search` → render `<SearchSection results={toolInvocation.result} />`
  - `geospatialQueryTool` → render geospatial/map UI with result data
  - `videoSearch` → render video results UI with result data
- Integrate this renderer in `components/chat-messages.tsx` for each tool
invocation in a message

**2. `components/search-section.tsx`**
- Replace `useStreamableValue` and JSON parsing with a direct `results:
SearchResults` prop
- Keep all existing card/source rendering logic unchanged

**3. `components/copilot.tsx` and `components/copilot-display.tsx`**
- Replace `useStreamableValue` with direct props for inquiry data
- Replace `useActions().submit` with a callback prop (provided by parent) that
calls `useChat`'s `append` or equivalent send function
- Ensure the user's inquiry answer is routed back through the standard chat flow

**4. `components/followup-panel.tsx`, `components/search-related.tsx`, and
`components/query-suggestor`**
- Remove `useActions` and `useUIState` imports
- Accept submit/append handler callbacks from parent components instead
- Update rendering to use tool result data or data annotations from `useChat`
messages
===============================================================================

Task: 4

Finalize the migration by replacing the `onSetAIState` persistence callback with
explicit route handler saves, updating auxiliary pages and components, and
deleting all remaining RSC infrastructure.

**1. Chat persistence in `app/api/chat/stream/route.ts`**
- After the stream completes, call `saveChat` from `lib/actions/chat.ts` or
`lib/actions/chat-db.ts`
- Persist all messages with appropriate type labels (input, response, tool,
etc.)
- Handle both initial chat creation and update (upsert) logic

**2. `app/search/[id]/page.tsx`**
- Remove the `<AI>` provider wrapper
- Fetch persisted messages server-side and pass them as `initialMessages` to the
Chat component
- The Chat component should use `useChat`'s `initialMessages` option so no new
request is fired on hydration

**3. Clear chat — `components/chat-panel.tsx` and
`components/mobile-icons-bar.tsx`**
- Replace any `clearChat` server action calls with `setMessages([])` from
`useChat`
- Add an optional server action call for server-side cleanup if required
- Remove `clearChat` from any `createAI`-registered actions

**4. Remove RSC infrastructure from `app/actions.tsx`**
- Delete the `createAI` configuration and `AI` export
- Delete `AIState`, `UIState` type definitions (or repurpose as needed)
- Delete `getUIStateFromAIState`, `onGetUIState`, and `onSetAIState`
- Evaluate the `submit` server action: remove or retain only for non-chat uses
- Retain any utility functions still referenced elsewhere

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!