Integrating Claude with React Native / Expo: A Step-by-Step Guide

Integrating Claude with React Native / Expo: A Step-by-Step Guide cover

So, you’re looking to integrate Claude, Anthropic’s conversational AI, into your React Native or Expo app? Great choice! Claude can add a ton of value to your app, whether it’s for customer support, personalized recommendations, or just a fun chatbot experience. In this guide, we’ll walk through how to set up Claude in a React Native/Expo project and style it using NativeWind, a utility-first CSS framework for React Native. Let’s dive in!

Prerequisites

Before we start, make sure you have the following:

  1. Node.js installed on your machine.
  2. Expo CLI installed (npm install -g expo-cli).
  3. A basic understanding of React Native and Expo.
  4. An API key from Anthropic to access Claude (sign up on their platform if you haven’t already).

Step 1: Set Up Your Expo Project

If you don’t already have a project, let’s create one:

npx create-expo-app@latest ClaudeApp

Choose the "blank" template when prompted. Once the project is created, navigate into the folder:

cd ClaudeApp

Step 2: Install Dependencies

We’ll need a few packages to get Claude working and to style our app with NativeWind.

Install NativeWind and its dependencies:

NativeWind uses Tailwind CSS under the hood, so we’ll need to set it up.

npm install nativewind
npm install --save-dev tailwindcss

Install Claude API client:

You’ll need a package to interact with Claude’s API. For this guide, we’ll use axios for HTTP requests.

npm install axios

Install React Navigation (optional):

If your app requires navigation (e.g., between a chat screen and other screens), install React Navigation:

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context

Step 3: Configure NativeWind

NativeWind requires a bit of setup to work with Expo.

Create a tailwind.config.js file:

Run the following command to generate a Tailwind config file:

npx tailwindcss init

Open the tailwind.config.js file and configure it to include your project files:

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Update babel.config.js:

Open your babel.config.js and add the NativeWind plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

Create a global stylesheet (optional):

If you want to define custom styles, create a global.css file in your project root:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then import it in your App.js:

import './global.css';

Step 4: Set Up Claude API Integration

Now, let’s integrate Claude into your app.

Create an API utility file:

Create a folder called utils and add a file named claude.js:

import axios from 'axios';

const CLAUDE_API_KEY = 'YOUR_CLAUDE_API_KEY';
const API_URL = 'https://api.anthropic.com/v1/complete';

export const sendMessageToClaude = async (message) => {
  try {
    const response = await axios.post(
      API_URL,
      {
        prompt: message,
        max_tokens: 150,
        model: 'claude-v1',
      },
      {
        headers: {
          'Authorization': `Bearer ${CLAUDE_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data.choices[0].text;
  } catch (error) {
    console.error('Error communicating with Claude:', error);
    return null;
  }
};

Create a chat interface:

Let’s create a simple chat interface in App.js:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { sendMessageToClaude } from './utils/claude';

const App = () => {
  const [message, setMessage] = useState('');
  const [conversation, setConversation] = useState([]);

  const handleSend = async () => {
    if (message.trim()) {
      const userMessage = { text: message, sender: 'user' };
      setConversation((prev) => [...prev, userMessage]);

      const claudeResponse = await sendMessageToClaude(message);
      if (claudeResponse) {
        const botMessage = { text: claudeResponse, sender: 'claude' };
        setConversation((prev) => [...prev, botMessage]);
      }

      setMessage('');
    }
  };

  return (
    <View className="flex-1 p-4 bg-gray-100">
      <FlatList
        data={conversation}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View className={`my-2 p-3 rounded-lg ${item.sender === 'user' ? 'bg-blue-500 self-end' : 'bg-gray-300 self-start'}`}>
            <Text className="text-white">{item.text}</Text>
          </View>
        )}
      />
      <View className="flex-row mt-4">
        <TextInput
          className="flex-1 p-2 border border-gray-300 rounded-lg"
          value={message}
          onChangeText={setMessage}
          placeholder="Type a message..."
        />
        <Button title="Send" onPress={handleSend} />
      </View>
    </View>
  );
};

export default App;

Step 5: Run Your App

You’re all set! Run your app using:

expo start

Scan the QR code with the Expo Go app, and you should see your chat interface. Type a message, and Claude will respond.

Step 6: Customize and Expand

  • Add more features: You can enhance the chat interface with features like typing indicators, message timestamps, or even voice input.
  • Improve error handling: Add better error handling for API failures or network issues.
  • Style it further: Use NativeWind’s utility classes to make the chat interface look even better.

Final Thoughts

Integrating Claude into your React Native/Expo app is a powerful way to add conversational AI capabilities. With NativeWind, styling becomes a breeze, and you can focus on building a great user experience. Happy coding! 🚀

Recent Guides

Hestia Kit Premium

You have to be signed in to favorite this

Share

Hestia Kit Premium

This is Hestia Kit premium component