@crafter/rn-ai-elements

React Native AI UI component library — a React Native/Expo port of Vercel ai-elements, tightly integrated with the Vercel AI SDK.

Features

• 48 components for chat, code, voice, and workflow AI experiences
• Streaming markdown engine built for React Native
• Theme system with light/dark mode and full design token customization
• Expo Go compatible — 42 of 48 components work without a dev build
• Tree-shakeable sub-path exports (/chatbot, /code, /voice, /workflow)
• Copy-paste CLI for full customization

Installation

npx expo install @crafter/rn-ai-elements react-native-reanimated

Peer Dependencies

Package	Required?
react-native-reanimated	Required
ai + @ai-sdk/react	Optional (for AI SDK integration)
react-native-gesture-handler	Optional (workflow components)
react-native-svg	Optional (workflow components)

Quick Start

import { AIElementsProvider, Conversation, PromptInput } from '@crafter/rn-ai-elements';

export default function App() {
  return (
    <AIElementsProvider mode="system">
      <Conversation messages={messages} />
      <PromptInput
        value={input}
        onChangeText={setInput}
        onSubmit={handleSend}
      />
    </AIElementsProvider>
  );
}

Components

Chatbot (Phase 1 — v0.1.0)

Conversation, Message, PromptInput, Reasoning, Suggestion, Shimmer, Tool, Sources, Attachments, AIImage

Code (Phase 2 — v0.2.0)

CodeBlock, Terminal, FileTree, StackTrace, Snippet, Agent, Artifact, TestResults, EnvironmentVariables

Voice (Phase 3 — v0.3.0)

AudioPlayer, SpeechInput, Transcription, MicSelector, VoiceSelector, Persona

Workflow (Phase 4 — v1.0.0)

Canvas, Node, Edge, Connection, Controls, Panel, Toolbar, OpenInChat

Theme Customization

<AIElementsProvider
  mode="dark"
  theme={{
    colors: {
      primary: '#6366F1',
      background: '#0F0F23',
    },
    radius: { md: 12 },
  }}
>
  {children}
</AIElementsProvider>

Documentation

Visit rn-elements.crafterstation.com for full documentation.

Contributing

See CONTRIBUTING.md for guidelines.

License

Apache-2.0