Skip to content

Commit a9b2dbf

Browse files
mxmzbjpr5
mxmzb
authored and
jpr5
committed
feat: add React Native demo app
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.
1 parent 31061a1 commit a9b2dbf

55 files changed

Lines changed: 5466 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/v2/react-native/demo/.bundle/config‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎examples/v2/react-native/demo/.gitignore‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
**/.xcode.env.local
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
*.hprof
33+
.cxx/
34+
*.keystore
35+
!debug.keystore
36+
.kotlin/
37+
38+
# node.js
39+
#
40+
node_modules/
41+
npm-debug.log
42+
yarn-error.log
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
**/fastlane/report.xml
52+
**/fastlane/Preview.html
53+
**/fastlane/screenshots
54+
**/fastlane/test_output
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# Ruby / CocoaPods
60+
**/Pods/
61+
/vendor/bundle/
62+
63+
# Temporary files created by Metro to check the health of the file watcher
64+
.metro-health-check*
65+
66+
# testing
67+
/coverage
68+
69+
# Yarn
70+
.yarn/*
71+
!.yarn/patches
72+
!.yarn/plugins
73+
!.yarn/releases
74+
!.yarn/sdks
75+
!.yarn/versions

‎examples/v2/react-native/demo/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎examples/v2/react-native/demo/App.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { StatusBar, useColorScheme } from "react-native";
2+
import { SafeAreaProvider } from "react-native-safe-area-context";
3+
import { CopilotKitProvider } from "@copilotkit/react-native";
4+
import { ChatScreen } from "./src/ChatScreen";
5+
6+
const RUNTIME_URL =
7+
"https://langgraph-py.examples.copilotkit.ai/api/copilotkit";
8+
9+
function App() {
10+
const isDarkMode = useColorScheme() === "dark";
11+
12+
return (
13+
<SafeAreaProvider>
14+
<StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
15+
<CopilotKitProvider runtimeUrl={RUNTIME_URL}>
16+
<ChatScreen />
17+
</CopilotKitProvider>
18+
</SafeAreaProvider>
19+
);
20+
}
21+
22+
export default App;

‎examples/v2/react-native/demo/Gemfile‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
source 'https://rubygems.org'
2+
3+
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4+
ruby ">= 2.6.10"
5+
6+
# Exclude problematic versions of cocoapods and activesupport that causes build failures.
7+
gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
8+
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
9+
gem 'xcodeproj', '< 1.26.0'
10+
gem 'concurrent-ruby', '< 1.3.4'
11+
12+
# Ruby 3.4.0 has removed some libraries from the standard library.
13+
gem 'bigdecimal'
14+
gem 'logger'
15+
gem 'benchmark'
16+
gem 'mutex_m'
17+
gem 'nkf'

‎examples/v2/react-native/demo/README.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# React Native CopilotKit Demo
2+
3+
A bare React Native 0.85 app demonstrating `@copilotkit/react-native` with `useAgent` and `useCopilotKit` hooks.
4+
5+
> Make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment) before proceeding.
6+
7+
## Prerequisites
8+
9+
- Node.js >= 22.11
10+
- pnpm (workspace root uses pnpm)
11+
- Ruby + Bundler (for CocoaPods on iOS)
12+
- Xcode (iOS) and/or Android Studio (Android)
13+
14+
## Setup
15+
16+
### 1. Install monorepo dependencies
17+
18+
From the **repository root**:
19+
20+
```sh
21+
pnpm install
22+
```
23+
24+
### 2. Build the CopilotKit packages
25+
26+
The demo uses workspace-linked `@copilotkit/*` packages, so they need to be built first:
27+
28+
```sh
29+
pnpm nx run-many -t build --projects=@copilotkit/core,@copilotkit/shared,@copilotkit/react-core,@copilotkit/react-native
30+
```
31+
32+
### 3. Install CocoaPods (iOS only)
33+
34+
From this directory (`examples/v2/react-native/demo`):
35+
36+
```sh
37+
bundle install
38+
cd ios && bundle exec pod install && cd ..
39+
```
40+
41+
## Running the app
42+
43+
### Start Metro
44+
45+
```sh
46+
pnpm start
47+
```
48+
49+
To clear Metro's cache (recommended after rebasing or changing native deps):
50+
51+
```sh
52+
pnpm start -- --reset-cache
53+
```
54+
55+
### iOS
56+
57+
In a separate terminal:
58+
59+
```sh
60+
pnpm run ios
61+
```
62+
63+
### Android
64+
65+
Make sure `ANDROID_HOME` is set. On macOS, add to your `~/.zshrc`:
66+
67+
```sh
68+
export ANDROID_HOME=$HOME/Library/Android/sdk
69+
export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools
70+
```
71+
72+
Then launch an emulator from Android Studio (or connect a physical device) and run:
73+
74+
```sh
75+
pnpm run android
76+
```
77+
78+
## Project structure
79+
80+
```
81+
App.tsx — CopilotKitProvider setup with runtime URL
82+
src/ChatScreen.tsx — Chat UI using useAgent + useCopilotKit hooks
83+
index.js — Entry point with polyfill imports
84+
metro.config.js — pnpm monorepo compatibility config
85+
```
86+
87+
## Configuration
88+
89+
The app connects to a hosted CopilotKit runtime by default. To use a local runtime, edit `App.tsx`:
90+
91+
```tsx
92+
// const RUNTIME_URL = "https://langgraph-py.examples.copilotkit.ai/api/copilotkit";
93+
const RUNTIME_URL = "http://localhost:3000/api/copilotkit";
94+
```
95+
96+
## Troubleshooting
97+
98+
- **Metro can't resolve modules**: Run `pnpm start -- --reset-cache` to clear the Metro cache.
99+
- **CocoaPods errors**: Re-run `cd ios && bundle exec pod install`.
100+
- **Android SDK not found**: Make sure `ANDROID_HOME` is set (see Android section above).
101+
- **No emulators found**: Open Android Studio, go to Device Manager, and create/start an AVD.
102+
- **Build failures after pulling changes**: Rebuild the CopilotKit packages (step 2 above).
103+
- See the React Native [Troubleshooting guide](https://reactnative.dev/docs/troubleshooting) for general issues.

‎examples/v2/react-native/demo/__tests__/App.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import React from "react";
6+
import ReactTestRenderer from "react-test-renderer";
7+
import App from "../App";
8+
9+
test("renders correctly", async () => {
10+
await ReactTestRenderer.act(() => {
11+
ReactTestRenderer.create(<App />);
12+
});
13+
});

‎examples/v2/react-native/demo/android/app/build.gradle‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
3+
apply plugin: "com.facebook.react"
4+
5+
/**
6+
* This is the configuration block to customize your React Native Android app.
7+
* By default you don't need to apply any configuration, just uncomment the lines you need.
8+
*/
9+
react {
10+
/* Folders */
11+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
12+
// root = file("../../")
13+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
14+
// reactNativeDir = file("../../node_modules/react-native")
15+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
16+
// codegenDir = file("../../node_modules/@react-native/codegen")
17+
// The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
18+
// cliFile = file("../../node_modules/react-native/cli.js")
19+
20+
/* Variants */
21+
// The list of variants to that are debuggable. For those we're going to
22+
// skip the bundling of the JS bundle and the assets. Default is "debug", "debugOptimized".
23+
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
24+
// debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
25+
26+
/* Bundling */
27+
// A list containing the node command and its flags. Default is just 'node'.
28+
// nodeExecutableAndArgs = ["node"]
29+
//
30+
// The command to run when bundling. By default is 'bundle'
31+
// bundleCommand = "ram-bundle"
32+
//
33+
// The path to the CLI configuration file. Default is empty.
34+
// bundleConfig = file(../rn-cli.config.js)
35+
//
36+
// The name of the generated asset file containing your JS bundle
37+
// bundleAssetName = "MyApplication.android.bundle"
38+
//
39+
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
40+
// entryFile = file("../js/MyApplication.android.js")
41+
//
42+
// A list of extra flags to pass to the 'bundle' commands.
43+
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
44+
// extraPackagerArgs = []
45+
46+
/* Hermes Commands */
47+
// The hermes compiler command to run. By default it is 'hermesc'
48+
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
49+
//
50+
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
51+
// hermesFlags = ["-O", "-output-source-map"]
52+
53+
/* Autolinking */
54+
autolinkLibrariesWithApp()
55+
}
56+
57+
/**
58+
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
59+
*/
60+
def enableProguardInReleaseBuilds = false
61+
62+
/**
63+
* The preferred build flavor of JavaScriptCore (JSC)
64+
*
65+
* For example, to use the international variant, you can use:
66+
* `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
67+
*
68+
* The international variant includes ICU i18n library and necessary data
69+
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
70+
* give correct results when using with locales other than en-US. Note that
71+
* this variant is about 6MiB larger per architecture than default.
72+
*/
73+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
74+
75+
android {
76+
ndkVersion rootProject.ext.ndkVersion
77+
buildToolsVersion rootProject.ext.buildToolsVersion
78+
compileSdk rootProject.ext.compileSdkVersion
79+
80+
namespace "com.reactnativecopilotkit"
81+
defaultConfig {
82+
applicationId "com.reactnativecopilotkit"
83+
minSdkVersion rootProject.ext.minSdkVersion
84+
targetSdkVersion rootProject.ext.targetSdkVersion
85+
versionCode 1
86+
versionName "1.0"
87+
}
88+
signingConfigs {
89+
debug {
90+
storeFile file('debug.keystore')
91+
storePassword 'android'
92+
keyAlias 'androiddebugkey'
93+
keyPassword 'android'
94+
}
95+
}
96+
buildTypes {
97+
debug {
98+
signingConfig signingConfigs.debug
99+
}
100+
release {
101+
// Caution! In production, you need to generate your own keystore file.
102+
// see https://reactnative.dev/docs/signed-apk-android.
103+
signingConfig signingConfigs.debug
104+
minifyEnabled enableProguardInReleaseBuilds
105+
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
106+
}
107+
}
108+
}
109+
110+
dependencies {
111+
// The version of react-native is set by the React Native Gradle Plugin
112+
implementation("com.facebook.react:react-android")
113+
114+
if (hermesEnabled.toBoolean()) {
115+
implementation("com.facebook.react:hermes-android")
116+
} else {
117+
implementation jscFlavor
118+
}
119+
}

‎examples/v2/react-native/demo/android/app/debug.keystore‎

2.2 KB
Binary file not shown.

‎examples/v2/react-native/demo/android/app/proguard-rules.pro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Add project specific ProGuard rules here.
2+
# By default, the flags in this file are appended to flags specified
3+
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4+
# You can edit the include path and order by changing the proguardFiles
5+
# directive in build.gradle.
6+
#
7+
# For more details, see
8+
# http://developer.android.com/guide/developing/tools/proguard.html
9+
10+
# Add any project specific keep options here:

0 commit comments

Comments
 (0)