@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

package/.docs/raw/docs/react-native/index.mdx

@@ -1,289 +0,0 @@
----
-title: React Native AI Chat
-description: Build AI chat for iOS and Android with @assistant-ui/react-native — streaming, tools, attachments, and platform-native components from the same primitives as the web SDK.
----
-
-## Quick Start
-
-The fastest way to get started with assistant-ui for React Native.
-
-<Steps>
-  <Step>
-
-### Create a new project
-
-```sh
-npx assistant-ui@latest create --example with-expo my-chat-app
-cd my-chat-app
-```
-
-  </Step>
-  <Step>
-
-### Configure API endpoint
-
-Create a `.env` file pointing to your chat API:
-
-```
-EXPO_PUBLIC_CHAT_ENDPOINT_URL="http://localhost:3000/api/chat"
-```
-
-  </Step>
-  <Step>
-
-### Start the app
-
-```sh
-npx expo start
-```
-
-  </Step>
-</Steps>
-
-## Manual Setup
-
-If you prefer to add assistant-ui to an existing Expo project, follow these steps.
-
-<Steps>
-  <Step>
-
-### Install dependencies
-
-<InstallCommand expo={["@assistant-ui/react-native", "@assistant-ui/react-ai-sdk"]} />
-
-  </Step>
-  <Step>
-
-### Setup Backend Endpoint
-
-Create a backend API route using the Vercel AI SDK. This is the same endpoint you'd use with `@assistant-ui/react` on the web:
-
-<Tabs groupId="provider" items={["OpenAI", "Anthropic", "Google"]}>
-
-```ts title="app/api/chat/route.ts" tab="OpenAI"
-import { openai } from "@ai-sdk/openai";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-  });
-  return result.toUIMessageStreamResponse();
-}
-```
-
-```ts title="app/api/chat/route.ts" tab="Anthropic"
-import { anthropic } from "@ai-sdk/anthropic";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-  const result = streamText({
-    model: anthropic("claude-sonnet-4-6"),
-    messages: await convertToModelMessages(messages),
-  });
-  return result.toUIMessageStreamResponse();
-}
-```
-
-```ts title="app/api/chat/route.ts" tab="Google"
-import { google } from "@ai-sdk/google";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-  const result = streamText({
-    model: google("gemini-2.0-flash"),
-    messages: await convertToModelMessages(messages),
-  });
-  return result.toUIMessageStreamResponse();
-}
-```
-
-</Tabs>
-
-<Callout type="info">
-  This is the same backend you'd use with `@assistant-ui/react` on the web. If you already have an API route, you can reuse it as-is.
-</Callout>
-
-  </Step>
-  <Step>
-
-### Set up the runtime
-
-```tsx title="hooks/use-app-runtime.ts"
-import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
-
-const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";
-
-export function useAppRuntime() {
-  return useChatRuntime({
-    transport: new AssistantChatTransport({
-      api: `${API_URL}/api/chat`,
-    }),
-  });
-}
-```
-
-  </Step>
-  <Step>
-
-### Use it in your app
-
-Wrap your app with `AssistantRuntimeProvider` and build your chat UI:
-
-```tsx title="app/index.tsx"
-import {
-  AssistantRuntimeProvider,
-  useAuiState,
-  useAui,
-} from "@assistant-ui/react-native";
-import type { ThreadMessage } from "@assistant-ui/react-native";
-import {
-  View,
-  Text,
-  TextInput,
-  FlatList,
-  Pressable,
-  KeyboardAvoidingView,
-  Platform,
-} from "react-native";
-import { useAppRuntime } from "@/hooks/use-app-runtime";
-
-function MessageBubble({ message }: { message: ThreadMessage }) {
-  const isUser = message.role === "user";
-  const text = message.content
-    .filter((p) => p.type === "text")
-    .map((p) => ("text" in p ? p.text : ""))
-    .join("\n");
-
-  return (
-    <View
-      style={{
-        alignSelf: isUser ? "flex-end" : "flex-start",
-        backgroundColor: isUser ? "#007aff" : "#f0f0f0",
-        borderRadius: 16,
-        padding: 12,
-        marginVertical: 4,
-        marginHorizontal: 16,
-        maxWidth: "80%",
-      }}
-    >
-      <Text style={{ color: isUser ? "#fff" : "#000" }}>{text}</Text>
-    </View>
-  );
-}
-
-function Composer() {
-  const aui = useAui();
-  const text = useAuiState((s) => s.composer.text);
-  const isEmpty = useAuiState((s) => s.composer.isEmpty);
-
-  return (
-    <View
-      style={{
-        flexDirection: "row",
-        padding: 12,
-        alignItems: "flex-end",
-      }}
-    >
-      <TextInput
-        value={text}
-        onChangeText={(t) => aui.composer.setText(t)}
-        placeholder="Message..."
-        multiline
-        style={{
-          flex: 1,
-          borderWidth: 1,
-          borderColor: "#ddd",
-          borderRadius: 20,
-          paddingHorizontal: 16,
-          paddingVertical: 10,
-          maxHeight: 120,
-        }}
-      />
-      <Pressable
-        onPress={() => aui.composer.send()}
-        disabled={isEmpty}
-        style={{
-          marginLeft: 8,
-          backgroundColor: !isEmpty ? "#007aff" : "#ccc",
-          borderRadius: 20,
-          width: 36,
-          height: 36,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Text style={{ color: "#fff", fontWeight: "bold" }}>↑</Text>
-      </Pressable>
-    </View>
-  );
-}
-
-function ChatScreen() {
-  const messages = useAuiState(
-    (s) => s.thread.messages,
-  ) as ThreadMessage[];
-
-  return (
-    <KeyboardAvoidingView
-      style={{ flex: 1 }}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-    >
-      <FlatList
-        data={messages}
-        keyExtractor={(m) => m.id}
-        renderItem={({ item }) => <MessageBubble message={item} />}
-      />
-      <Composer />
-    </KeyboardAvoidingView>
-  );
-}
-
-export default function App() {
-  const runtime = useAppRuntime();
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <ChatScreen />
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-  </Step>
-</Steps>
-
-## What's Next?
-
-<Cards>
-  <Card
-    title="Migration from Web"
-    description="Already using assistant-ui? Migrate your web app to React Native."
-    href="/docs/react-native/migration"
-  />
-  <Card
-    title="Custom Backend"
-    description="Connect to your own backend API or manage threads server-side."
-    href="/docs/react-native/custom-backend"
-  />
-  <Card
-    title="Primitives"
-    description="Composable native UI components for building chat interfaces."
-    href="/docs/react-native/primitives"
-  />
-  <Card
-    title="Example App"
-    description="Full Expo example with drawer navigation, thread list, and styled UI."
-    href="https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-expo"
-  />
-</Cards>

package/.docs/raw/docs/react-native/migration.mdx

@@ -1,142 +0,0 @@
----
-title: Migration from Web
-description: Migrate an existing @assistant-ui/react app to React Native.
----
-
-If you already have an assistant-ui web app, most of your code transfers directly. The runtime core is shared between `@assistant-ui/react` and `@assistant-ui/react-native` via `@assistant-ui/core` — only the UI layer changes.
-
-## What stays the same
-
-- **Runtime setup** — `useChatRuntime`, `useLocalRuntime`, `ChatModelAdapter`, and all runtime options work identically.
-- **AI SDK integration** — `@assistant-ui/react-ai-sdk` works with React Native. Your `useChatRuntime` + `AssistantChatTransport` setup transfers directly.
-- **Tool definitions** — `Tools({ toolkit })` and toolkit renderers use the same API.
-- **State hooks** — `useAuiState`, `useAui`, and selector patterns are the same.
-- **Backend code** — Your API routes, streaming endpoints, and server-side logic need zero changes.
-
-## What changes
-
-| Web (`@assistant-ui/react`) | React Native (`@assistant-ui/react-native`) |
-|---|---|
-| `AssistantRuntimeProvider` | `AssistantRuntimeProvider` (same name) |
-| DOM primitives (`div`, `button`, `input`) | Native primitives (`View`, `Pressable`, `TextInput`) |
-| CSS / Tailwind styling | React Native `StyleSheet` or inline styles |
-| `@assistant-ui/ui` (shadcn components) | Build your own native UI with primitives |
-
-## Step-by-step
-
-<Steps>
-  <Step>
-
-### Install the React Native package
-
-<InstallCommand expo={["@assistant-ui/react-native"]} />
-
-  </Step>
-  <Step>
-
-### Keep your runtime hook
-
-Your `useChatRuntime` setup works as-is — no changes needed:
-
-```tsx title="hooks/use-app-runtime.ts"
-// This file is identical to your web version
-import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
-
-export function useAppRuntime() {
-  return useChatRuntime({
-    transport: new AssistantChatTransport({
-      api: "/api/chat",
-    }),
-  });
-}
-```
-
-<Callout type="tip">
-  If you use a monorepo, you can share this file between web and native projects directly.
-</Callout>
-
-  </Step>
-  <Step>
-
-### Replace the provider
-
-```tsx
-// Before (web)
-// import { AssistantRuntimeProvider } from "@assistant-ui/react";
-
-// After (React Native) — same component name, different package
-import { AssistantRuntimeProvider } from "@assistant-ui/react-native";
-
-export default function App() {
-  const runtime = useAppRuntime();
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {/* your native UI */}
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-  </Step>
-  <Step>
-
-### Rebuild the UI layer
-
-This is the main migration effort. Web components (`Thread`, `ThreadList` from `@assistant-ui/ui`) don't render in React Native. Replace them with native primitives:
-
-```tsx
-// Web — DOM-based
-// import { Thread } from "@/components/assistant-ui/thread";
-
-// React Native — use primitives or build custom
-import {
-  ThreadPrimitive,
-  ComposerPrimitive,
-  MessagePrimitive,
-} from "@assistant-ui/react-native";
-import { View } from "react-native";
-
-function MyMessage() {
-  return (
-    <View style={{ padding: 12 }}>
-      <MessagePrimitive.Content />
-    </View>
-  );
-}
-
-function ChatScreen() {
-  return (
-    <ThreadPrimitive.Root style={{ flex: 1 }}>
-      <ThreadPrimitive.Messages>
-        {() => <MyMessage />}
-      </ThreadPrimitive.Messages>
-      <ComposerPrimitive.Root>
-        <ComposerPrimitive.Input placeholder="Message..." />
-        <ComposerPrimitive.Send />
-      </ComposerPrimitive.Root>
-    </ThreadPrimitive.Root>
-  );
-}
-```
-
-See the [Primitives reference](/docs/react-native/primitives) for the full list of available components.
-
-  </Step>
-</Steps>
-
-## Monorepo code sharing
-
-In a monorepo, you can share everything except the UI layer:
-
-```
-packages/
-  shared/
-    hooks/          ← useAppRuntime with useChatRuntime (shared)
-    tools/          ← tool definitions (shared)
-  web/
-    components/     ← DOM-based UI
-  native/
-    components/     ← React Native UI
-```
-
-The runtime hook, tool definitions, and backend code are platform-agnostic. Only the UI components need separate implementations for web and native.