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:
- Node.js installed on your machine.
- Expo CLI installed (npm install -g expo-cli).
- A basic understanding of React Native and Expo.
- 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! 🚀