Ai sdk react native markdown

[jcourson-bg]

Background

This change introduces first-class support for efficient markdown rendering in React Native applications using the AI SDK. The existing approach of parsing raw markdown strings on the client-side in React Native is performance-intensive, leading to janky UI and high resource usage.

This PR implements the solution pioneered by the v0 team: offloading markdown parsing to the server, streaming JSON tree patches to the client, and rendering native components directly from the JSON tree.

Summary

A new package, @ai-sdk/react-native, has been created to provide:

• Server-side markdown parsing: Utilities to convert markdown strings into a JSON tree structure.
• Efficient streaming: A mechanism to stream minimal JSON patches (diffs) of the markdown tree to the client, rather than full snapshots or raw text. This includes an append-text optimization for streaming text.
• Client-side React Native integration:
  • A useMarkdownChat hook to consume the streamed JSON tree patches and manage chat state.
  • A MarkdownRenderer component that renders the JSON markdown tree directly into React Native components, allowing for full customization of markdown elements.

This approach significantly reduces client-side work, improving performance and user experience in React Native AI chat applications.

Manual Verification

The core logic for markdown parsing, diffing, and patching is covered by unit tests.
To manually verify end-to-end functionality, a React Native example application would need to be set up, consuming the createMarkdownStreamResponse on the server and useMarkdownChat / MarkdownRenderer on the client.

Checklist

• Tests have been added / updated (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)
• A patch changeset for relevant packages has been added (for bug fixes / features - run pnpm changeset in the project root)
• I have reviewed this pull request (self-review)

Future Work

• Add a comprehensive example React Native application demonstrating full integration.
• Explore more advanced diffing algorithms for complex tree changes beyond simple appends and additions.
• Further optimize MarkdownRenderer for large trees, potentially with virtualization.

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[jcourson-bg]

@cursoragent how to build this to run on my machine i will package json it relative to the fike

[cursor]

Using in Your React Native Project

Once built, you can link it to your React Native app:

Option 1: Local file reference

// In your React Native app's package.json
{
  "dependencies": {
    "@ai-sdk/react-native": "file:/path/to/ai/packages/react-native"
  }
}

Option 2: Using pnpm workspace link (for development)

cd /path/to/your-react-native-app
pnpm link /path/to/ai/packages/react-native

Quick Usage Example

Server (Next.js API):

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { createMarkdownStreamResponse } from '@ai-sdk/react-native/server';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o'), messages });
  return createMarkdownStreamResponse(result.textStream);
}

Client (React Native):

import { useChat, MarkdownText } from '@ai-sdk/react-native';
import { View, ScrollView } from 'react-native';

function Chat() {
  const { messages, sendMessage } = useChat({ api: '/api/chat' });

  return (
    <ScrollView>
      {messages.map(msg => (
        <View key={msg.id}>
          {msg.parts.map((part, i) => 
            part.type === 'text' ? <MarkdownText key={i} text={part.text} /> : null
          )}
        </View>
      ))}
    </ScrollView>
  );
}

Commands Summary

Command	Description
pnpm install	Install all dependencies
pnpm build	Build all packages
pnpm --filter @ai-sdk/react-native build	Build only react-native
pnpm --filter @ai-sdk/react-native test	Run tests
pnpm --filter @ai-sdk/react-native build:watch	Watch mode for development

---

 

_{Learn more about Cursor Agents}