Build Your First Gen AI App with React & LLMs: A Beginner's Guide

So you want to build an AI application but don't know where to start? You're in the right place. This guide will walk you through building a simple "AI Story Generator" using React (with the Next.js framework) and a Large Language Model (LLM) from Google.

What We're Building

We'll create a simple web app with a single text box. A user can type in a prompt (e.g., "A brave knight who is afraid of spiders"), click a button, and the app will generate a short story based on that prompt.

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript.
• A little familiarity with React is helpful, but not strictly required.
• Node.js and npm installed on your computer.

Step 1: Set Up Your Next.js Project

Next.js is a powerful React framework that makes building web applications easier. Open your terminal and run the following command to create a new project:

npx create-next-app@latest ai-story-app

Follow the prompts. We recommend using TypeScript for this project. Once it's done, navigate into your new project directory:

cd ai-story-app

Step 2: Get Your AI Model API Key

To use an LLM, you need an API key. We'll use Google's Gemini Pro model, which you can access through Google AI Studio.

1. Go to Google AI Studio.
2. Sign in with your Google account.
3. Click "Get API key" and create a new key in a new or existing project.
4. Copy your API key.

Important: Keep this key safe! Never commit it directly into your code. We'll use an environment variable to store it. Create a new file in the root of your project called .env.local and add your key:

GEMINI_API_KEY=YOUR_API_KEY_HERE

Step 3: Install Genkit

We will use Genkit, an open-source framework from Google, to make calling the LLM easier.

Run the following command in your terminal:

npm install genkit @genkit-ai/google-genai zod

Step 4: Create the AI Flow

Now, let's write the server-side code that will call the AI model. We'll create a "flow" in Genkit.

Create a new file at src/ai/story-flow.ts and add the following code:

'use server';
import { ai } from '@/ai/genkit';
import { z } from 'zod';

// Define the expected input and output using Zod schemas
const StoryInputSchema = z.object({ prompt: z.string() });
const StoryOutputSchema = z.object({ story: z.string() });

// Define the prompt that will be sent to the LLM
const storyPrompt = ai.definePrompt({
  name: 'storyPrompt',
  input: { schema: StoryInputSchema },
  output: { schema: StoryOutputSchema },
  prompt: `You are a master storyteller. Write a short, creative, and engaging story (no more than 200 words) based on the following prompt: {{{prompt}}}`,
});

// Define the flow that orchestrates the AI call
export const storyFlow = ai.defineFlow(
  {
    name: 'storyFlow',
    inputSchema: StoryInputSchema,
    outputSchema: StoryOutputSchema,
  },
  async (input) => {
    const { output } = await storyPrompt(input);
    return output!;
  }
);

Step 5: Build the React Frontend

Now, let's build the user interface. Open src/app/page.tsx and replace its content with the following:

'use client';
import { useState } from 'react';
import { storyFlow } from '@/ai/story-flow';

export default function Home() {
  const [prompt, setPrompt] = useState('');
  const [story, setStory] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    setStory('');

    try {
      const result = await storyFlow({ prompt });
      setStory(result.story);
    } catch (err) {
      setError('Sorry, something went wrong. Please try again.');
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ padding: '2rem', maxWidth: '600px', margin: 'auto' }}>
      <h1>AI Story Generator</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Enter a story prompt..."
          style={{ width: '100%', minHeight: '100px', padding: '0.5rem' }}
        />
        <button type="submit" disabled={isLoading} style={{ marginTop: '1rem', width: '100%', padding: '0.75rem' }}>
          {isLoading ? 'Generating...' : 'Generate Story'}
        </button>
      </form>
      {story && (
        <div style={{ marginTop: '2rem', padding: '1rem', border: '1px solid #ccc', borderRadius: '8px' }}>
          <h2>Your Story</h2>
          <p>{story}</p>
        </div>
      )}
      {error && <p style={{ color: 'red', marginTop: '1rem' }}>{error}</p>}
    </div>
  );
}

Step 6: Run Your App

You're all set! Run your development server from the terminal:

npm run dev

Open your browser to http://localhost:3000, type in a creative prompt, and watch the AI bring your story to life!

Ready to Innovate?

Instillsoft can help you build cutting-edge solutions. Contact us to learn more about our AI development and training services.