You can also watch the YouTube video: [React Native AI Chatbot Tutorial with Grok Api](https://www.youtube.com/watch?v=yFtEXK_gh8g) We'll use Grok Api to make AI Chatbot in our React Native app. I'll use ShadCN UI with React Native Reusables but you don't have to use it. You can use React Native CLI, Expo, whatever you want. If you'll use ShadCN UI like me then we need to clone react native reusables repository: ``` git clone https://github.com/mrzachnugent/react-native-reusables.git ``` Then copy the starter base and rename it: ``` cp -R react-native-reusables/packages/templates/starter-base/ ./rn-ai-chatbot ``` install the dependencies, and fix packages if needed. ``` cd rn-ai-chatbot && yarn install && npx expo install --fix ``` Enable new arch support in app.json to avoid future warnings. ``` { "expo": { "newArchEnabled": true, ... } } ``` Run the project ``` yarn android ``` Our React Native app ready to build. Now we need to sign in/sign up [x.ai](https://x.ai/) to get our api key. You don't need to sign up if you have X (aka Twitter) account. You can sign in with your X account. **X AI** gives us $25 USD free credit to explore the Grok Api. You can find and create api keys from [console.x.ai](https://console.x.ai/) Now we can build a ai chatbot with our api key. We'll need a few dependencies we can install them before we start: ``` yarn add react-native-keyboard-aware-scroll-view ``` And ``` npx @react-native-reusables/cli@latest add skeleton input ``` Now we can edit our `app/index.tsx` to achieve final result: ```js import * as React from "react"; import { ScrollView, View } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import { Button } from "~/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "~/components/ui/card"; import { Input } from "~/components/ui/input"; import { Skeleton } from "~/components/ui/skeleton"; import { Text } from "~/components/ui/text"; interface IMessage { role: string; content: string; id: number; } export default function Screen() { const [message, setMessage] = React.useState(""); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const onChangeText = (text: string) => { setMessage(text); }; const sendMessage = async () => { try { setLoading(true); setMessages((prevMessages) => [ ...prevMessages, { role: "user", content: message, id: Math.floor(100000000 + Math.random() * 900000000), }, ]); const response = await fetch("https://api.x.ai/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer YOUR_API_KEY_HERE`, }, body: JSON.stringify({ messages: [ { role: "system", content: "You are Grok, a chatbot inspired by the Hitchhikers Guide to the Galaxy.", }, { role: "user", content: message, }, ], model: "grok-beta", stream: false, temperature: 0, }), }); const data = await response.json(); setMessages((prevMessages) => [ ...prevMessages, { role: data.choices[0].message.role, content: data.choices[0].message.content, id: Math.floor(100000000 + Math.random() * 900000000), }, ]); setLoading(false); setMessage(""); } catch (error) { console.error("Error:", error); } }; return ( AI Chatbot with Grok API {loading ? : null} {[...messages].reverse()?.map((message) => ( {message.role === "assistant" ? "Grok 🤖" : "Me 🧑"} {message.content} ))} ); } ``` Now we can use our ai chatbot to get answers for our questions. I hope you found this post useful, thnx for reading.