---
title: Using Next.js RSC
description: Chat interface for your LlamaIndexTS application using Next.js RSC
---
import { ChatDemoRSC } from '../../../../../components/demo/chat/rsc/demo';
import "@llamaindex/chat-ui/styles/code.css";
import "@llamaindex/chat-ui/styles/katex.css";

Using [chat-ui](https://github.com/run-llama/chat-ui), it's easy to add a chat interface to your LlamaIndexTS application using [Next.js RSC](https://nextjs.org/docs/app/building-your-application/rendering/server-components) and [Vercel AI RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview).

With RSC, the chat messages are not returned as JSON from the server (like when using an [API route](./chat)), instead the chat message components are rendered on the server side.
This is for example useful for rendering a whole chat history on the server before sending it to the client. [Check here](https://sdk.vercel.ai/docs/getting-started/navigating-the-library#when-to-use-ai-sdk-rsc), for a discussion of when to use use RSC.

For implementing a chat interface with RSC, you need to create an AI action and then connect the chat interface to use it.

## Create an AI action

First, define an [AI context provider](https://sdk.vercel.ai/examples/rsc/state-management/ai-ui-states) with a chat server action:

```json doc-gen:file
{
  "file": "./src/components/demo/chat/rsc/ai-action.tsx",
	"codeblock": true
}
```

The chat server action is using LlamaIndexTS to generate a response based on the chat history and the user input.

## Create the chat UI

The entrypoint of our application initializes the AI provider for the application and adds a `ChatSection` component:

```json doc-gen:file
{
  "file": "./src/components/demo/chat/rsc/demo.tsx",
	"codeblock": true
}
```

The `ChatSection` component is created by using chat components from @llamaindex/chat-ui:

```json doc-gen:file
{
  "file": "./src/components/demo/chat/rsc/chat-section.tsx",
	"codeblock": true
}
```

It is using a `useChatRSC` hook to conntect the chat interface to the `chat` AI action that we defined earlier:

```json doc-gen:file
{
  "file": "./src/components/demo/chat/rsc/use-chat-rsc.tsx",
	"codeblock": true
}
```

## Try RSC Chat ⬇️

<ChatDemoRSC />

## Next Steps

The steps above are the bare minimum to get a chat interface working with RSC. From here, you can go two ways:

1. Use our [full-stack RSC example](https://github.com/run-llama/nextjs-rsc) based on [create-llama](https://github.com/run-llama/create-llama) to get started quickly with a fully working chat interface or
2. Learn more about [AI RSC](https://sdk.vercel.ai/examples/rsc), [chat-ui](https://github.com/run-llama/chat-ui) and [LlamaIndexTS](https://github.com/run-llama/llamaindex-ts) to customize the chat interface and AI actions to your needs.

