muratcakmak/expo-ai-elements

React Native를 위한 오픈 소스 AI 채팅 UI 컴포넌트 — 몇 분 만에 여러분의 모바일 앱에 ChatGPT 수준의 인터페이스를 도입하세요.

Vercel AI Elements의 React Native 포트입니다. 즉시 사용 가능하며, 조합 가능하고, 프로덕션(production) 준비가 되어 있습니다.

스트리밍 마크다운 (Streaming markdown)— LaTeX 수학 지원이 포함된 스로틀링(throttled)된 네이티브 렌더링 ($inline$ 및 $$block$$)

25개의 프로덕션 준비 완료 컴포넌트— 채팅, 코드, 추론(reasoning), 콘텐츠, 입력 및 유틸리티

복사-붙여넣기 아키텍처— shadcn/ui 패턴을 따르며, 모든 코드 라인을 직접 소유합니다

다크/라이트 모드— Uniwind를 통한 자동 테마 지원

Vercel AI SDK 호환— useChat 및 useCompletion 훅과 함께 작동합니다

React Native Reusables (React Native용 shadcn/ui) + Uniwind (React Native용 Tailwind CSS)로 구축되었습니다.

Chat |
Tool Calls |
Reasoning |
Chain of Thought |
Plan |
Test Results |
Terminal |
File Tree |
Artifact |

npx @react-native-reusables/cli@latest add https://raw.githubusercontent.com/muratcakmak/expo-ai-elements/main/public/r/conversation.json
npx @react-native-reusables/cli@latest add https://raw.githubusercontent.com/muratcakmak/expo-ai-elements/main/public/r/message.json
npx @react-native-reusables/cli@latest add https://raw.githubusercontent.com/muratcakmak/expo-ai-elements/main/public/r/message-response.json
...

레지스트리 인덱스에서 사용 가능한 모든 컴포넌트를 찾아보세요.

npm install expo-ai-elements
npx expo install react-native-enriched-markdown react-native-reanimated react-native-gesture-handler react-native-svg lucide-react-native expo-clipboard expo-haptics

프로젝트에 Uniwind (React Native용 Tailwind CSS)와 React Native Reusables가 설정되어 있어야 합니다.

컴포넌트는 shadcn/ui 복사-붙여넣기 패턴을 따릅니다 — 모든 코드 라인을 직접 소유합니다:

import {
Conversation, Message, MessageContent, MessageText,
MessageResponse, PromptInput, Suggestions, Suggestion,
...

모든 컴포넌트는 완전한 커스터마이징을 위해 서브 컴포넌트와 함께 조합 가능합니다:

모든 컴포넌트는 완전한 커스터마이징을 위해 서브 컴포넌트와 함께 조합 가능합니다:

import {
CodeBlock, CodeBlockHeader, CodeBlockTitle,
CodeBlockCopyButton, CodeBlockContent,
... 

6개 카테고리에 걸쳐 25개의 컴포넌트가 제공됩니다:

카테고리	컴포넌트
Chat	Conversation, Message, MessageResponse, Suggestion, Checkpoint, Citation, Streaming LaTeX
Code	CodeBlock, Terminal, StackTrace, TestResults, SchemaDisplay
Reasoning	Reasoning, ChainOfThought, Tool, Plan, Task, Agent
Content	Artifact, FileTree, WebPreview, Attachments
Input	PromptInput, SpeechInput, OpenInChat
Utilities	Shimmer

The 저장소에는 모든 컴포넌트에 대한 대화형 미리보기와 시뮬레이션 스트리밍이 포함된 채팅 데모를 갖춘 전체 데모 앱이 포함되어 있습니다.

git clone https://github.com/muratcakmak/expo-ai-elements.git
cd expo-ai-elements
bun install
... 

레이어	기술
Framework	Expo SDK 55, React Native 0.83, React 19
Styling	Uniwind (Tailwind CSS for RN)
Base UI	React Native Reusables (shadcn/ui)
Markdown	react-native-enriched-markdown + react-native-streamdown
Threading	react-native-worklets 0.7
AI SDK	Vercel AI SDK (ai + @ai-sdk/react )
Animations	react-native-reanimated 4.3
Icons	lucide-react-native

app/
_layout.tsx # Drawer sidebar layout
index.tsx # Home screen with component grid
... 

스트리밍 지연(Streaming jank): EnrichedMarkdownText는 모든 prop 변경 시 네이티브 레이아웃을 재계산합니다. 이를 완화하기 위해 업데이트가 약 80ms로 제한됩니다. 올바른 수정(react-native-streamdown과 worklet 기반 처리)은 추가적인 metro 설정을 필요로 하는 react-native-worklets 번들 모드를 요구합니다. worklets 번들 모드 문서를 참조하십시오.LaTeX 블록 수학($$...$$)은 EnrichedMarkdownText에서 `flavor=