Forem: Avinash Prasad

Build an AI UI Generator with Gemini API, Next.js (Tutorial)

Avinash Prasad — Sun, 07 Jul 2024 08:32:14 +0000

In this tutorial, we will build an AI UI Generator using Next.js and the Gemini API. It is similar to v.0 by Vercel which allows you to generate UI with a simple prompt and use it in your web apps.

This type of dynamic code generation can be the beginning of a new paradigm in software development where User Interfaces are generated by AI according to user's needs. This concept is being termed as "Generative UI".

Here's an example of how our application will work:

Let's begin by creating a new Next.js project.

Step 1: Create a new Next.js project

npx create-next-app@13.4 ui-generator

You will be prompted to select settings for the new project, make sure to follow these choices:

For TypeScript, select No because this tutorial uses JavaScript.
Feel free to choose any option for enabling ESLint.
Choose Yes for Tailwind CSS.
Exclude the src/ directory by selecting No, which is the default option.
Enable App Router by selecting Yes, which is the recommended option.
Lastly, select No for import alias configuration.

Change the working directory to your new Next.js project, ui-generator and run the application to make sure everything is fine:

cd ui-generator
npx run dev

Step 2: Building the Frontend

In the new app router in Next.js, app/page.js hosts the code for the home page. Remove everything inside it apart from the outer divs, and now we have an empty canvas to create anything we want.

Create a simple interface for this application which includes an input box to enter a prompt, a div placeholder for the code to be generated, and button to copy code:

'use client'

export default function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center p-12">
      <div className="max-w-5xl w-full flex-col items-center justify-center text-sm lg:flex">
        <p className='text-3xl mb-4 font-bold text-gray-600'>UI Generator</p>
        <div className="relative flex items-center w-full h-12 rounded-lg focus-within:shadow-md bg-transparent overflow-hidden">
          <input
            className="peer h-full w-full outline-none bg-gray-100 text-sm text-gray-700 pl-4 pr-12"
            type="text"
            placeholder="Enter a prompt..."
          />
          <div onClick={handleGenerate} className="absolute right-0 flex items-center justify-center h-full w-12 bg-blue-500 hover:bg-blue-600 text-white cursor-pointer">
            <p className='text-2xl'>➔</p>
          </div>
        </div>

        <div className='flex'>
          <button className='bg-blue-500 text-white px-5 py-3 mt-7 hover:bg-blue-600 m-2' onClick={handleCopy}>Copy Code</button>
        </div>

        <div className='bg-transparent border-2 border-gray-300 rounded mt-7 p-2 flex justify-center'>
          {/* Generated code */}
        </div>

      </div>
    </main>
  )
}

Step 3: Obtain the Gemini API Key

Before we start working on our back-end of the application, we need to obtain the Gemini API key to be able to leverage Google's generative AI tools.

Go to https://ai.google.dev/aistudio to get the Gemini API key for free.

Create a .env file in the root of your project and store your API key:

GEMINI_API_KEY=[YOUR API KEY]

Step 4: Create server-side function to handle POST Requests

Install the Google AI JavaScript SDK enables you to use Google's generative AI models. Make sure you are in your project's root directory and run the following command in your terminal:

npm install @google/generative-ai

In Next.js app router, you can define custom route handlers in route.js file inside the app director. For example the file app/api/generate/route.js maps to /api/generate route.

Let's create a function to handle POST requests in /api/generate/route.js :

import { GoogleGenerativeAI } from '@google/generative-ai';
import { NextResponse } from 'next/server';

export async function POST(req, res) {
    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY)

    try {
        const model = genAI.getGenerativeModel({ model: "gemini-pro" });

        const data = await req.json()
        const prompt = data.body + ". Write jsx code and use tailwindcss for modern UI. Don't make any imports. Only output code.";

        const result = await model.generateContent(prompt);
        const response = await result.response;
        const code = await response.text()

        return NextResponse.json({code: code})
    } catch (error) {
        console.error(error)     
    }
}

Here, we create an instance of GoogleGenerativeAI from the API key we stored in the .env file, define a model that uses gemini-pro model.

We retrieve the JSON data from the request body and store it in a variable data. But we don't directly pass it as a prompt to the Gemini API. Instead, we add some "prompt injection", i.e. additional instruction for the AI model so that we can have control over the output we get.

Then we pass the prompt to Gemini using the generateContent() method. Finally we pass the generated output as a JSON response object.

Step 5: Create a client side function to handle POST request

First, we will define two state variables in our home page page.js :

const [prompt, setPrompt] = useState('');
const [code, setCode] = useState('');

Set an onChange listener to bind the state variable prompt to the input text:

<input
  className="peer h-full w-full outline-none bg-gray-100 text-sm text-gray-700 pl-4 pr-12"
  type="text"
  value={prompt}
  onChange={(e) => setPrompt(e.target.value)}
  placeholder="Enter a prompt..."
/>

Create a function called handleGenerate() above the return function:

const handleGenerate = async () => {
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ body: prompt })
      });

      const data = await response.json();
      if (response.ok) {
        setCode(data.code);

      } else {
        console.error(data.error);
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

This function initiates an HTTP POST request to the endpoint /api/generate using the fetch function. It sends the prompt as a request object.

Set an onClick listener in your send button to execute the handleGenerate function:

<div onClick={handleGenerate} className="absolute right-0 flex items-center justify-center h-full w-12 bg-blue-500 hover:bg-blue-600 text-white cursor-pointer">
    <p className='text-2xl'>➔</p>
</div>

We need to display the code which is stored in the code state variable somewhere:

<div className='bg-transparent rounded mt-7 p-2 flex justify-center'>
    {code}
</div>

Now test the application by running npm run dev and test the application by entering a prompt such as "create a pricing section for my website".

Step 6: Rendering Generated JSX Code

Now the final piece of the puzzle is rendering the generated code into user interface instead of just displaying the code. For that, we will use a library called html-react-parser .

Open a new terminal, change directory to the root of your project and run:

npm install html-react-parser

To use html-react-parser , in your page.js make the following import:

import parser from 'html-react-parser';

Now use the parse method to convert String into JSX code:

<div className='bg-transparent rounded mt-7 p-2 flex justify-center'>
    {parse(code)}
</div>

Step 7: Function to Copy code

You can write a function to copy code:

const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      alert("Code copied to clipboard")
    } catch (err) {
      console.error('Failed to copy: ', err)
    }
  }

It uses the navigator.clipboard.writeText method to write the text stored in the variable code to the system clipboard.

Wrapping Up

You can get the full code for this project at the github repo: https://github.com/avionmission/ui-generator

Mastering Navigation Menus in React Native: 3 Types You Must Know [With Examples]

Avinash Prasad — Fri, 07 Apr 2023 14:15:25 +0000

Designing a mobile app navigation menu can make a big impact on the user experience. A clear and intuitive navigation menu can help users easily find the information and features they need, while a confusing or cluttered menu can lead to frustration and user drop-off.

In this post, we'll learn how to build different types of navigation menu that enhances the user experience, and how to build each one of them using React Native and react-navigations library.

Let's start with a simple navigation from one screen to another.

1. Simple Navigation (using Stack Navigator)

React Navigation is a popular library used for implementing navigation in React Native apps. It provides a flexible and easy-to-use API for managing the navigation hierarchy between screens in your app.

"The Stack Navigator" allows users to move between screens by pushing and popping them onto a stack. When a new screen is pushed onto the stack, it appears on top of the previous screen. When a screen is popped from the stack, it is removed from the navigation hierarchy and the previous screen is displayed.

Let's use the Stack Navigator to create a navigation flow between two screens in a React Native app. We will define two screens, Screen1 and Screen2, and used the Stack Navigator to allow users to move between them.

Step 1: Set Up a New React Native Project

First, create a new React Native project using the following command (this is the command i prefer to use):

npx create-expo-app NavigationExamples

This will create a new project called NavigationExample in your current directory.

Step 2: Install Dependencies.

Next, navigate to the project directory and install the required dependencies using the following commands:

cd NavigationExample 
npm install @react-navigation/native 
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

Step 3: Define your Screens

In order to navigate between screens, we need to create two screen components, so let's screate two javascript files Screen1.js and Screen2.js in \screens directory:

Screen1.js :

import {StyleSheet, View, Text, Button } from  'react-native'
import  React  from  'react'

const  Screen1 = ({navigation}) => {
    return (
    <View  style={styles.container}>
    <Text>Screen1</Text>
    <Button  title="Go to Screen 2"  onPress={() =>  navigation.navigate('Screen2')}/>
    </View>
    )
} 

const  styles = StyleSheet.create({
    container: {
    flex:  1,
    backgroundColor:  '#fff',
    alignItems:  'center',
    justifyContent:  'center',
    },
});

export  default  Screen1;

Screen2.js

import {StyleSheet, View, Text, Button } from  'react-native'
import  React  from  'react'

const  Screen2 = ({navigation}) => {
    return (
    <View  style={styles.container}>
    <Text>Screen1</Text>
    <Button  title="Go to Screen 1"  onPress={() =>  navigation.navigate('Screen1')}/>
    </View>
    )
} 

const  styles = StyleSheet.create({
    container: {
    flex:  1,
    backgroundColor:  '#fff',
    alignItems:  'center',
    justifyContent:  'center',
    },
});

export  default  Screen2;

You'll notice we are passing the prop navigation to both Screen1 and Screen2 . React Navigation provides the navigation prop to screens. It contains methods and properties that allow us to navigate to other screens, customize the header, and pass parameters between screens. In the code example provided, we passed the navigation prop to the Screen1 component so that we could use the navigation.navigate method to move to the Screen2 component when the button is pressed.

Step 4: Create a Stack Navigator

To enable navigation between the screens, we need to create a Stack Navigator. A Stack Navigator is a type of navigator that allows users to move between screens by pushing and popping them on a stack.
App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';

export default function App() {

  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1}/>
        <Stack.Screen name="Screen2" component={Screen2}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In the above code, we import the createStackNavigator function from React Navigation and use it to create a Stack Navigator. We then define two screens using the Stack.Screen component, giving each screen a unique name and component.

You can run the app using the command npx expo start and it should work perfectly.

2. Navigation Drawer in React Native

A classic type of menu that slides in from the left or right side of the screen when users tap on a menu icon. This type of menu is useful for apps with a large number of sections or features.

Step 1: Install Dependencies

To use a navigation drawer, we need to install the @react-navigation/drawer package. Run the following command to install it:

npm install @react-navigation/drawer

Step 2: Define Your Screens

We will use the same two screens as before but remove the buttons on each screen.

Step 3: Setting up Drawer Navigator

We will import createDrawerNavigator from @react-navigation/drawer and used it to create the drawer navigator:

App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';

export default function App() {

  const Drawer = createDrawerNavigator();

  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name='Screen1' component={Screen1}/>
        <Drawer.Screen name='Screen2' component={Screen2}/>  
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you are getting any errors, it is possible you're missing some dependencies of React Navigation which you can install by running:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Bottom Navigation Bar

A modern type of menu typically appears at the bottom of the screen and displays multiple tabs that users can switch between. This type of menu is ideal for apps with distinct sections or workflows.

Let's start by installing dependencies:

npm install @react-navigations/bottom-tabs

To implement a bottom navigation bar in React Native, we will define a createBottomTabNavigator() object and use to handle navigation like this:

App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';
import {Ionicons} from '@expo/vector-icons'

export default function App() {

  const Tab = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name='Screen1' component={Screen1}/>
        <Tab.Screen name='Screen2' component={Screen2}/>  
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

When you run the app, you will notice that we have a bottom navigation bar which we can use to switch between Screen1 and Screen2, but we have not se icons for those options. We can do that using screenOptions property of Tab.Navigator in this way:

First you need to import:

import {Ionicons} from  '@expo/vector-icons'

And then,

<Tab.Navigator
  screenOptions={({route}) => ({
    tabBarIcon: ({focused, color, size}) => {
      let iconName;

      if (route.name === 'Screen1') {
        iconName = focused ? 'home' : 'home-outline'
      } else if (route.name === 'Screen2') {
        iconName = focused ? 'settings' : 'settings-outline'
      }

      return <Ionicons name={iconName} size={size} color={color}/>
    },
  })}
  >
  <Tab.Screen name='Screen1' component={Screen1}/>
  <Tab.Screen name='Screen2' component={Screen2}/>  
</Tab.Navigator>

The route parameter is passed to the screenOptions function to determine which screen is currently active. The focused, color, and size parameters are used to style the icon based on its state.

The if statements are used to determine which icon to display based on the name of the route. If the route name is Screen1, the home icon is displayed if the tab is focused and the home-outline icon is displayed if the tab is not focused. If the route name is Screen2, the settings icon is displayed if the tab is focused and the settings-outline icon is displayed if the tab is not focused.

Finally, the Ionicons component is used to render the selected icon with the appropriate size and color.

With this knowledge, you'll be able to create navigation menus that are flexible, easy to use, and intuitive for your users. We hope that this article has provided you with the tools you need to create great navigation menus for your React Native apps.

If you have any questions or comments about this article, please leave them in the comment section below. And don't forget to follow me on twitter for more tips and tutorials on React Native development. Happy coding!

If you want me to turn your app idea into a fully functional MVP using React Native, don't hesitate to reach out! Contact me at avionmission@gmail.com to discuss how I can help you bring your vision to life.