Skip to content

README.md

Latest commit

 

History

History
89 lines (66 loc) · 2.29 KB

README.md

File metadata and controls

89 lines (66 loc) · 2.29 KB

@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