mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Maxim
a9b2dbff75
Full RN 0.85.2 demo showing chat with useAgent, frontend tools (theme toggle, app mode), generative UI (pie chart), HITL (meeting scheduler), shared state (task manager), and thread management. Points to langgraph-py example runtime.
104 lines
2.6 KiB
Markdown
104 lines
2.6 KiB
Markdown
# React Native CopilotKit Demo
|
|
|
|
A bare React Native 0.85 app demonstrating `@copilotkit/react-native` with `useAgent` and `useCopilotKit` hooks.
|
|
|
|
> Make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment) before proceeding.
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js >= 22.11
|
|
- pnpm (workspace root uses pnpm)
|
|
- Ruby + Bundler (for CocoaPods on iOS)
|
|
- Xcode (iOS) and/or Android Studio (Android)
|
|
|
|
## Setup
|
|
|
|
### 1. Install monorepo dependencies
|
|
|
|
From the **repository root**:
|
|
|
|
```sh
|
|
pnpm install
|
|
```
|
|
|
|
### 2. Build the CopilotKit packages
|
|
|
|
The demo uses workspace-linked `@copilotkit/*` packages, so they need to be built first:
|
|
|
|
```sh
|
|
pnpm nx run-many -t build --projects=@copilotkit/core,@copilotkit/shared,@copilotkit/react-core,@copilotkit/react-native
|
|
```
|
|
|
|
### 3. Install CocoaPods (iOS only)
|
|
|
|
From this directory (`examples/v2/react-native/demo`):
|
|
|
|
```sh
|
|
bundle install
|
|
cd ios && bundle exec pod install && cd ..
|
|
```
|
|
|
|
## Running the app
|
|
|
|
### Start Metro
|
|
|
|
```sh
|
|
pnpm start
|
|
```
|
|
|
|
To clear Metro's cache (recommended after rebasing or changing native deps):
|
|
|
|
```sh
|
|
pnpm start -- --reset-cache
|
|
```
|
|
|
|
### iOS
|
|
|
|
In a separate terminal:
|
|
|
|
```sh
|
|
pnpm run ios
|
|
```
|
|
|
|
### Android
|
|
|
|
Make sure `ANDROID_HOME` is set. On macOS, add to your `~/.zshrc`:
|
|
|
|
```sh
|
|
export ANDROID_HOME=$HOME/Library/Android/sdk
|
|
export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools
|
|
```
|
|
|
|
Then launch an emulator from Android Studio (or connect a physical device) and run:
|
|
|
|
```sh
|
|
pnpm run android
|
|
```
|
|
|
|
## Project structure
|
|
|
|
```
|
|
App.tsx — CopilotKitProvider setup with runtime URL
|
|
src/ChatScreen.tsx — Chat UI using useAgent + useCopilotKit hooks
|
|
index.js — Entry point with polyfill imports
|
|
metro.config.js — pnpm monorepo compatibility config
|
|
```
|
|
|
|
## Configuration
|
|
|
|
The app connects to a hosted CopilotKit runtime by default. To use a local runtime, edit `App.tsx`:
|
|
|
|
```tsx
|
|
// const RUNTIME_URL = "https://langgraph-py.examples.copilotkit.ai/api/copilotkit";
|
|
const RUNTIME_URL = "http://localhost:3000/api/copilotkit";
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
- **Metro can't resolve modules**: Run `pnpm start -- --reset-cache` to clear the Metro cache.
|
|
- **CocoaPods errors**: Re-run `cd ios && bundle exec pod install`.
|
|
- **Android SDK not found**: Make sure `ANDROID_HOME` is set (see Android section above).
|
|
- **No emulators found**: Open Android Studio, go to Device Manager, and create/start an AVD.
|
|
- **Build failures after pulling changes**: Rebuild the CopilotKit packages (step 2 above).
|
|
- See the React Native [Troubleshooting guide](https://reactnative.dev/docs/troubleshooting) for general issues.
|