React Native Ai Chatbot Tutorial With Grok Api

You can also watch the YouTube video:

React Native AI Chatbot Tutorial with Grok Api

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 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

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:

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<IMessage[]>([]);
  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 (
    <View className="flex-1 justify-center items-center gap-5 p-6 bg-secondary/30">
      <Card className="w-full h-full max-w-sm p-6 rounded-2xl">
        <CardHeader className="items-center">
          <View className="p-3" />
          <CardTitle className="pb-2 text-center">
            AI Chatbot with Grok API
          </CardTitle>
        </CardHeader>
        <KeyboardAwareScrollView>
          <CardContent>
            <ScrollView className="min-h-[480px] max-h-[480px]">
              {loading ? <Skeleton className="h-48 w-72" /> : null}
              {[...messages].reverse()?.map((message) => (
                <Card key={message.id} className="mt-8">
                  <CardHeader>
                    <CardTitle>
                      {message.role === "assistant" ? "Grok 🤖" : "Me 🧑"}
                    </CardTitle>
                  </CardHeader>

                  <CardContent>
                    <Text className="text-black dark:text-white">{message.content}</Text>
                  </CardContent>
                </Card>
              ))}
            </ScrollView>
          </CardContent>

          <CardFooter className="mt-8">
            <Input
              placeholder="Write some stuff..."
              value={message}
              onChangeText={onChangeText}
              aria-labelledby="inputLabel"
              aria-errormessage="inputError"
            />

            <Button
              disabled={loading}
              variant="outline"
              className="shadow shadow-foreground/5"
              onPress={sendMessage}
            >
              <Text className="text-black dark:text-white">{loading ? "Loading" : "Send"}</Text>
            </Button>
          </CardFooter>
        </KeyboardAwareScrollView>
      </Card>
    </View>
  );
}

Now we can use our ai chatbot to get answers for our questions.

I hope you found this post useful, thnx for reading.