DEV Community

Cover image for How to Use GenKit in Your React.js Project
Sudhanshu Gaikwad
Sudhanshu Gaikwad

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Now install GenKit:

npm install @genkit-ai/core @genkit-ai/llm
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Step 4 — Store Your API Key Securely

In .env:

REACT_APP_OPENAI_KEY=your_openai_api_key
Enter fullscreen mode Exit fullscreen mode

Then restart your app:

npm start
Enter fullscreen mode Exit fullscreen mode

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

Conclusion

GenKit makes adding AI features to React super easy. With just a few lines of code, you can bring natural language capabilities to your project.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.