AI

AI integration on web, extension, and mobile uses the same battle-tested Vercel AI SDK, so the overall approach is similar across platforms.

In this section, we'll focus on consuming AI responses in the mobile app. For server-side implementation details, refer to the web documentation.

Features

The most common AI integration features are also supported in the mobile app:

• Chat: Build chat interfaces inside native mobile apps.
• Streaming: Receive AI responses as soon as the model starts generating them, without waiting for the full response.
• Image generation: Generate images based on a given prompt.

You can easily compose your application using these building blocks or extend them to suit your specific needs.

Usage

AI integration in the mobile app works the same way as in the web app and the browser extension. We use the same API endpoint, and since TurboStarter ships with built-in streaming support on mobile, we can display answers incrementally as they're generated.

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { Text, View } from "react-native";

const AI = () => {
  const { messages } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/ai/chat",
    }),
  });

  return (
    <View>
      {messages.map((message) => (
        <Text key={message.id}>
          {message.parts.map((part, i) => {
            switch (part.type) {
              case "text":
                return <Text key={`${message.id}-${i}`}>{part.text}</Text>;
            }
          })}
        </Text>
      ))}
    </View>
  );
};

export default AI;

By leveraging this integration, we can easily manage the state of the AI request and update the UI as soon as the response is ready.

TurboStarter ships with a ready-to-use implementation of AI chat, allowing you to see this solution in action. Feel free to reuse or modify it according to your needs.