# Restore Messages from Database
When building AI applications, you might want to restore previous conversations from a database to allow users to continue their conversations or review past interactions. The AI SDK provides mechanisms to restore conversation state through `initialAIState` and `onGetUIState`.
## Client
```tsx filename='app/layout.tsx'
import { ServerMessage } from './actions';
import { AI } from './ai';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Fetch stored messages from your database
const savedMessages: ServerMessage[] = getSavedMessages();
return (
{children}
);
}
```
```tsx filename='app/page.tsx'
'use client';
import { useState, useEffect } from 'react';
import { ClientMessage } from './actions';
import { useActions, useUIState } from '@ai-sdk/rsc';
import { generateId } from 'ai';
export default function Home() {
const [conversation, setConversation] = useUIState();
const [input, setInput] = useState('');
const { continueConversation } = useActions();
return (
{conversation.map((message: ClientMessage) => (
{message.role}: {message.display}
))}
setInput(e.target.value)}
placeholder="Type your message..."
/>
);
}
```
## Server
The server-side implementation handles the restoration of messages and their transformation into the appropriate format for display.
```tsx filename='app/ai.ts'
import { createAI } from '@ai-sdk/rsc';
import { ServerMessage, ClientMessage, continueConversation } from './actions';
import { Stock } from '@ai-studio/components/stock';
import { generateId } from 'ai';
export const AI = createAI({
actions: {
continueConversation,
},
onGetUIState: async () => {
'use server';
// Get the current AI state (stored messages)
const history: ServerMessage[] = getAIState();
// Transform server messages into client messages
return history.map(({ role, content }) => ({
id: generateId(),
role,
display:
role === 'function' ? : content,
}));
},
});
```
```tsx filename='app/actions.tsx'
'use server';
import { getAIState } from '@ai-sdk/rsc';
export interface ServerMessage {
role: 'user' | 'assistant' | 'function';
content: string;
}
export interface ClientMessage {
id: string;
role: 'user' | 'assistant' | 'function';
display: ReactNode;
}
// Function to get saved messages from database
export async function getSavedMessages(): Promise {
'use server';
// Implement your database fetching logic here
return await fetchMessagesFromDatabase();
}
```
## Navigation
- [Generate Text](/v5/cookbook/rsc/generate-text)
- [Generate Text with Chat Prompt](/v5/cookbook/rsc/generate-text-with-chat-prompt)
- [Stream Text](/v5/cookbook/rsc/stream-text)
- [Stream Text with Chat Prompt](/v5/cookbook/rsc/stream-text-with-chat-prompt)
- [Generate Object](/v5/cookbook/rsc/generate-object)
- [Stream Object](/v5/cookbook/rsc/stream-object)
- [Call Tools](/v5/cookbook/rsc/call-tools)
- [Call Tools in Parallel](/v5/cookbook/rsc/call-tools-in-parallel)
- [Save Messages To Database](/v5/cookbook/rsc/save-messages-to-database)
- [Restore Messages From Database](/v5/cookbook/rsc/restore-messages-from-database)
- [Render Visual Interface in Chat](/v5/cookbook/rsc/render-visual-interface-in-chat)
- [Stream Updates to Visual Interfaces](/v5/cookbook/rsc/stream-updates-to-visual-interfaces)
- [Record Token Usage after Streaming User Interfaces](/v5/cookbook/rsc/stream-ui-record-token-usage)
[Full Sitemap](/sitemap.md)