Use Google Jules AI on Your Smartphone! Introducing a React Native Mobile Client

Introduction

Have you heard of "Jules", the AI coding assistant provided by Google? Jules is an AI agent that works with GitHub to automatically support code reviews, bug fixes, and feature implementations. It supports major languages such as TypeScript, Python, Go, and Java, automatically creating pull requests and suggesting code improvements.

Today, I'll introduce "Jules Mobile Client", a React Native mobile client that lets you use Jules from your smartphone!

Why I built it

With Google releasing the Jules API, third-party applications can now utilize Jules. This allows developers to leverage Jules' functionality through their own custom interfaces.

However, when actually using Jules' web interface on a smartphone browser, I found the performance to be quite sluggish. Performance issues were particularly noticeable when displaying complex chat histories or real-time responses.

Driven by the need to use Jules smoothly while on the go, I developed a mobile client that leverages native app performance. By adopting React Native, I achieved snappy performance while supporting both iOS and Android platforms.

Project Overview

Jules Mobile Client is a cross-platform mobile app using Google's Jules API. It runs on both iOS and Android, making it easy to use Jules from your phone while out and about.

https://github.com/linkalls/jules-mobile-client

Key Features

• 📱 Cross-platform: Runs on both iOS and Android using Expo
• 🌙 Dark Mode Support: Full support for light/dark themes
• 🌐 Internationalization: Supports Japanese and English
• 🔐 Secure Storage: API keys are stored securely using expo-secure-store
• 💬 Real-time Chat: Interactive dialogue with Jules sessions
• 📝 Markdown Support: Rendering with syntax highlighting
• ⚡ Performance Optimization: Memoized components and efficient list rendering

Tech Stack

The main technologies used in this project are as follows:

Technology	Usage
Expo SDK 54	React Native framework
Expo Router	File-based routing
React Native 0.81	Mobile UI framework
TypeScript	Type safety
expo-secure-store	Secure storage
react-native-markdown-display	Markdown rendering

Main Features

Chat Functionality

The core feature of Jules Mobile Client is its chat functionality with Jules. Users can send instructions to Jules in natural language from the chat screen and receive responses in real-time.

Chat history is persisted, so you can check your previous conversations even after restarting the app. Additionally, each message is rendered in Markdown format, and syntax highlighting is applied to code blocks.

Session Management

Interactions with Jules are managed in units called "sessions." By starting a new session, you can separate conversations for different tasks or projects.

On the session list screen, you can review past sessions or resume a specific session. Since a preview of the last message is displayed for each session, you can quickly find the session you are looking for.

Secure API Key Management

To use the Jules API, you need a Google API key. You can obtain an API key through the Google Cloud Console.

How to obtain an API key:

1. Access the Google Cloud Console.
2. Create or select a project.
3. Go to "APIs & Services" -> "Credentials".
4. Select "Create Credentials" -> "API key".
5. Copy the generated API key.

This app uses expo-secure-store to store the API key securely. When you enter the API key in the settings screen upon the first launch, it is encrypted and saved in the device's secure storage. From then on, the API key is automatically loaded, so there is no need to enter it every time.

For more details, please refer to the Jules API documentation.

Theme Switching

You can switch between light and dark modes to suit your preference or environment. This can be easily changed from the settings screen, and the entire app's UI will reflect the change immediately.

Setup Guide

Prerequisites

• Node.js 18 or higher
• npm or yarn
• For iOS development: Xcode (macOS)
• For Android development: Android Studio

Installation Steps

1. Clone the repository

git clone https://github.com/linkalls/jules-mobile-client.git
cd jules-mobile-client

2. Install dependencies

npm install
# or
yarn install

3. Start the development server

npm start
# or
yarn start

4. Run with the Expo Go app
   Install the Expo Go app on your smartphone and scan the QR code to run it.

How to Build

To build the app for production, use the following commands:

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

• Note: An Expo account is required to use EAS Build.

Implementation Highlights

Performance Optimization

Performance is crucial for mobile applications. In this project, the following optimizations have been implemented:

1. Leveraging Memoization

To prevent unnecessary re-renders, I actively use React.memo, useMemo, and useCallback.

// Memoization of the message component
const MessageItem = React.memo(({ message }: { message: Message }) => {
  return (
    <View style={styles.messageContainer}>
      <Markdown>{message.content}</Markdown>
    </View>
  );
});

// Memoization of callback functions
const handleSendMessage = useCallback((text: string) => {
  sendMessage(text);
}, [sendMessage]);

2. FlatList Optimization

I use FlatList to display chat history, reducing memory usage through virtualization.

<FlatList
  data={messages}
  renderItem={({ item }) => <MessageItem message={item} />}
  keyExtractor={(item) => item.id}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
  removeClippedSubviews={true}
/>

3. Lazy Loading

By not loading images or content until they are needed, I've improved the initial display speed.

// Lazy loading for images
<Image
  source={{ uri: imageUrl }}
  style={styles.image}
  resizeMode="contain"
  loadingIndicatorSource={require('./loading.png')}
/>

Internationalization Support

The app supports both Japanese and English. I use the i18next library to manage UI text through language files.

It automatically detects the user's device language and displays the appropriate language. Users can also switch the language manually via the settings screen.

Error Handling

Appropriate error messages are displayed for network errors or API call failures. When an error occurs, it clearly communicates to the user what happened and provides an option to retry.

Development Insights

Improving Usability

Since screen real estate is limited in mobile environments, I paid special attention to UI layout and navigation. Key features are placed so they can be accessed with a single tap, achieving intuitive operation.

Markdown Rendering

Jules' responses often contain code in Markdown format, so rendering it properly is crucial. I used react-native-markdown-display to correctly display code blocks, lists, links, and more.

Specifically for code blocks, I applied language-specific syntax highlighting to enhance readability.

Ensuring Type Safety

By adopting TypeScript, bugs can be caught early during development. I defined API response types and prevent runtime errors through type checking.

Future Outlook

While the current version implements basic features, I am considering adding the following features in the future:

• Voice input support: Ability to send instructions to Jules using voice
• File upload: Upload code files directly for analysis
• Push notifications: Notifications for completion of long-running tasks
• Sharing functionality: Share session content with other users
• Offline support: Make some features available even when offline

Conclusion

Jules Mobile Client is an app designed to comfortably use Google's Jules AI in a mobile environment. By leveraging React Native for cross-platform support, it is available to both iOS and Android users.

Since it is published as an open-source project, please check out the GitHub repository. I look forward to your feedback and contributions!

https://github.com/linkalls/jules-mobile-client

Please try out this new experience of utilizing an AI assistant from your mobile device.