If you're building a React Native/Expo app and want to add AI-powered features, Vercel AI is a fantastic choice. It provides a simple and efficient way to integrate AI models into your app. In this guide, we'll walk through the process of integrating Vercel AI into a React Native/Expo project. We'll also use NativeWind for styling, as it’s a great way to bring Tailwind-like utility classes to React Native. Let’s get started! 💪🏻
Prerequisites
Before diving in, make sure you have the following set up:
- Node.js installed on your machine.
- Expo CLI installed globally (npm install -g expo-cli).
- A basic understanding of React Native and Expo.
- A Vercel account (you can sign up at vercel.com).
Step 1: Set Up Your React Native/Expo Project
If you don’t already have a project, create one using Expo:
npx create-expo-app@latest AIChatApp
cd AIChatApp
This will set up a new Expo project. Once the project is created, start the development server:
npm start
Step 2: Install Required Dependencies
To integrate Vercel AI, you’ll need to install the ai package from Vercel. Additionally, we’ll install NativeWind for styling.
Run the following command:
npm install ai @react-native-async-storage/async-storage nativewind tailwindcss
- ai: The Vercel AI SDK for integrating AI models.
- @react-native-async-storage/async-storage: For storing any necessary data locally.
- nativewind: To use Tailwind-like utility classes in React Native.
- tailwindcss: Required for NativeWind to work.
Step 3: Configure NativeWind
NativeWind allows you to use Tailwind CSS classes in React Native. To set it up:
Create a tailwind.config.js file in the root of your project:
npx tailwindcss init
Update the tailwind.config.js file to include the following:
module.exports = {
content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
Modify your babel.config.js to include NativeWind:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['nativewind/babel'],
};
};
Restart your development server to apply the changes.
Step 4: Set Up Vercel AI
Now, let’s integrate Vercel AI into your project.
Get an API Key: Go to your Vercel dashboard and create an API key for your project. You’ll need this to authenticate requests to the AI models.
Create a .env File: Store your API key securely in a .env file:
VERCEL_AI_API_KEY=your_api_key_here
Make sure to add .env to your .gitignore file to avoid committing sensitive information.
Install react-native-dotenv: To load environment variables in your project, install the following package:
npm install react-native-dotenv
Then, update your babel.config.js to include the plugin:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['nativewind/babel', 'module:react-native-dotenv'],
};
};
Step 5: Create an AI-Powered Component
Let’s create a simple chat interface that uses Vercel AI to generate responses.
Create a Chat Component: In your components folder, create a new file called Chat.js.
import React, { useState } from 'react';
import { View, TextInput, Button, Text, ScrollView } from 'react-native';
import { useCompletion } from 'ai/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const Chat = () => {
const [input, setInput] = useState('');
const { completion, complete } = useCompletion({
api: 'https://api.vercel.ai/v1/complete',
headers: {
Authorization: `Bearer ${process.env.VERCEL_AI_API_KEY}`,
},
});
const handleSend = async () => {
await complete(input);
setInput('');
};
return (
<View className="flex-1 p-4">
<ScrollView className="flex-1 mb-4">
<Text className="text-lg">{completion}</Text>
</ScrollView>
<View className="flex-row">
<TextInput
className="flex-1 border border-gray-300 p-2 rounded-l"
value={input}
onChangeText={setInput}
placeholder="Type a message..."
/>
<Button title="Send" onPress={handleSend} />
</View>
</View>
);
};
export default Chat;
Use the Chat Component: In your App.js, import and use the Chat component:
import React from 'react';
import { SafeAreaView } from 'react-native';
import Chat from './components/Chat';
export default function App() {
return (
<SafeAreaView className="flex-1">
<Chat />
</SafeAreaView>
);
}
Step 6: Test Your App
Run your app using npm start and test the chat interface. You should be able to type a message, send it, and see the AI-generated response.
Step 7: Deploy to Vercel (Optional)
If you want to deploy your app, you can use Vercel’s deployment services. Simply connect your GitHub repository to Vercel and deploy your app with a single click.
Conclusion
Congratulations! You’ve successfully integrated Vercel AI into your React Native/Expo project. With this setup, you can now build AI-powered features like chatbots, text completion, and more. NativeWind also makes styling your app a breeze, giving you the flexibility of Tailwind CSS in React Native.
Feel free to explore more advanced features of Vercel AI and customize your app further. Happy coding! 🚀