How to Use GenKit in Your React.js Project

#ai #frontend #vue

If you’ve been exploring AI-powered applications in React, you might have come across GenKit — an AI toolkit that helps you build intelligent features like chatbots, text generation, and more.

In this post, we’ll learn how to integrate GenKit into a React.js app with a simple example:
An AI-powered text generator.

Step 1 — Install GenKit

First, make sure you have a React project ready.
If not, create one:

npx create-react-app genkit-demo
cd genkit-demo

Now install GenKit:

npm install @genkit-ai/core @genkit-ai/llm

Step 2 — Set up GenKit in Your Project

We’ll create a simple function to call GenKit’s text generation API.

// src/genkit.js
import { Genkit, LLM } from "@genkit-ai/core";
import { OpenAI } from "@genkit-ai/llm-openai"; // Example provider

// Initialize GenKit
const genkit = new Genkit({
  llm: new OpenAI({
    apiKey: process.env.REACT_APP_OPENAI_KEY, // Store securely in .env
  }),
});

export async function generateText(prompt) {
  const result = await genkit.llm.generate({
    prompt: prompt,
    maxTokens: 100,
  });

  return result.outputText;
}

Step 3 — Create a Simple React UI

// src/App.js
import React, { useState } from "react";
import { generateText } from "./genkit";

function App() {
  const [prompt, setPrompt] = useState("");
  const [output, setOutput] = useState("");

  const handleGenerate = async () => {
    const text = await generateText(prompt);
    setOutput(text);
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>🧠 GenKit AI Text Generator</h2>
      <textarea
        rows="4"
        cols="50"
        placeholder="Enter your prompt..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <br />
      <button onClick={handleGenerate}>Generate</button>
      <div style={{ marginTop: "20px", padding: "10px", border: "1px solid gray" }}>
        <strong>Output:</strong>
        <p>{output}</p>
      </div>
    </div>
  );
}

export default App;

Step 4 — Store Your API Key Securely

In .env:

REACT_APP_OPENAI_KEY=your_openai_api_key

Then restart your app:

npm start

Tips

You can swap the LLM provider (e.g., Anthropic, Gemini) easily.
GenKit can also do streaming outputs, chat sessions, embeddings, and tool integration.
Always keep your API key secure (never commit .env to GitHub).