DEV Community

Cover image for AI-Powered Frontend UI Components Generator (Next.js, GPT4, Langchain, & CopilotKit)
Bonnie for Tech Content Marketers

Posted on • Updated on

AI-Powered Frontend UI Components Generator (Next.js, GPT4, Langchain, & CopilotKit)

TL;DR

In this article, you will learn how to build an AI-powered frontend UI components generator that enables you to generate Next.js Tailwind CSS UI components with an implementation tutorial.

We'll cover how to:

  • Build the UI components generator web app using Next.js, TypeScript, and Tailwind CSS.
  • Use CopilotKit to integrate AI functionalities into the UI components generator.
  • Integrate an embedded code editor to make changes to the generated code.

Prerequisites

To fully understand this tutorial, you need to have a basic understanding of React or Next.js.

Here are the tools required to build the AI-powered UI components generator:

  • Ace Code Editor - an embeddable code editor written in JavaScript that matches the features and performance of native editors.
  • Langchain - provides a framework that enables AI agents to search the web and research any topic.
  • OpenAI API - provides an API key that enables you to carry out various tasks using ChatGPT models.
  • Tavily AI - a search engine that enables AI agents to conduct research and access real-time knowledge within the application.
  • CopilotKit - an open-source copilot framework for building custom AI chatbots, in-app AI agents, and text areas.

Project Set up and Package Installation

First, create a Next.js application by running the code snippet below in your terminal:



npx create-next-app@latest aiuigenerator


Enter fullscreen mode Exit fullscreen mode

Select your preferred configuration settings. For this tutorial, we'll be using TypeScript and Next.js App Router.

Image description

Next, install Ace code editor, and Langchain packages and their dependencies.



npm install react-ace @langchain/langgraph


Enter fullscreen mode Exit fullscreen mode

Finally, install the CopilotKit packages. These packages enable us to retrieve data from the React state and add AI copilot to the application.



npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend


Enter fullscreen mode Exit fullscreen mode

Congratulations! You're now ready to build an AI-powered blog.

Building The UI Components Generator Frontend

In this section, I will walk you through the process of creating the UI components generator frontend with static content to define the generator’s user interface.

To get started, go to /[root]/src/app in your code editor and create a folder called components. Inside the components folder, create two files named Header.tsx, and CodeTutorial.tsx .

In the Header.tsx file, add the following code that defines a functional component named Header that will render the generator’s navbar.



"use client";

import Link from "next/link";

export default function Header() {
  return (
    <>
      <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 ">
        <nav
          className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8"
          aria-label="Global">
          <div className="flex items-center justify-between">
            <Link
              className="w-full flex-none text-xl text-white font-semibold p-6"
              href="/"
              aria-label="Brand">
              AI-UI-Components-Generator
            </Link>
          </div>
        </nav>
      </header>
    </>
  );
}


Enter fullscreen mode Exit fullscreen mode

In the CodeTutorial.tsx file, add the following code that defines a functional component named CodeTutorial that renders the UI components generator homepage that will display the generated UI components, embedded code editor and generated implementation tutorial.



"use client";

import Markdown from "react-markdown";
import { useState } from "react";
import AceEditor from "react-ace";
import React from "react";

export default function CodeTutorial() {
  const [code, setCode] = useState<string[]>([
    `<h1 class="text-red-500">Hello World</h1>`,
  ]);
  const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || "");
  const [codeTutorial, setCodeTutorial] = useState(``);

  function onChange(newCode: any) {
    setCodeToDisplay(newCode);
  }

  return (
    <>
      <main className=" min-h-screen px-4">
        <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 ">
          <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto">
            <div
              className="w-full min-h-[60vh] rounded-lg"
              dangerouslySetInnerHTML={{ __html: codeToDisplay }}
            />
          </div>
          <AceEditor
            placeholder="Placeholder Text"
            mode="html"
            theme="monokai"
            name="blah2"
            className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg"
            onChange={onChange}
            fontSize={14}
            lineHeight={19}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={codeToDisplay}
            setOptions={{
              enableBasicAutocompletion: true,
              enableLiveAutocompletion: true,
              enableSnippets: false,
              showLineNumbers: true,
              tabSize: 2,
            }}
          />
        </div>
        <div className="w-10/12 mx-auto">
          <div className="mt-8">
            <h1 className="text-white text-center text-xl font-semibold p-6">
              Code Tutorial
            </h1>
            {codeTutorial ? (
              <Markdown className="text-white">{codeTutorial}</Markdown>
            ) : (
              <div className="text-white">
                The Code Tutorial Will Appear Here
              </div>
            )}
          </div>
        </div>
      </main>
    </>
  );
}
```

Next, go to `/[root]/src/page.tsx` file, and add the following code that imports `CodeTutorial` and `Header` components and defines a functional component named `Home`.

```tsx
import React from "react";
import Header from "./components/Header";
import CodeTutorial from "./components/CodeTutorial";

export default function Home() {
  return (
    <>
      <Header />
      <CodeTutorial />
    </>
  );
}

```

Next, remove the CSS code in the globals.css file and add the following CSS code.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  height: 100vh;
  background-color: rgb(16, 23, 42);
}

pre {
  margin: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background-color: black;
  overflow: auto;
}

h2,
p {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

code {
  margin-bottom: 2rem;
}

```

Finally, run the command `npm run dev` on the command line and then navigate to http://localhost:3000/. 

Now you should view the UI Components generator frontend on your browser, as shown below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png)

## **Integrating AI Functionalities To The Components Generator Using CopilotKit**

In this section, you will learn how to add an AI copilot to the UI components generator to generate UI components code and implementation tutorial using CopilotKit.

CopilotKit offers both frontend and [backend](https://docs.copilotkit.ai/getting-started/quickstart-backend) packages. They enable you to plug into the React states and process application data on the backend using AI agents.

First, let's add the CopilotKit React components to the blog frontend.

### **Adding CopilotKit to the UI Component Generator Frontend**

Here, I will walk you through the process of integrating the UI components generator with the CopilotKit frontend to facilitate UI components code and implementation tutorial generation. 

To get started, use the code snippet below to import `useMakeCopilotReadable`, and `useCopilotAction`, custom hooks at the top of the `/[root]/src/app/components/CodeTutorial.tsx` file.

```tsx
import {
  useCopilotAction,
  useMakeCopilotReadable,
} from "@copilotkit/react-core";
```

Inside the `CodeTutorial` function, below the state variables, add the following code that uses the `useMakeCopilotReadable` hook to add the code that will be generated as context for the in-app chatbot. The hook makes the code readable to the copilot.

```tsx
useMakeCopilotReadable(codeToDisplay);
```

Below the code above, add the following code that uses the `useCopilotAction` hook to set up an action called `generateCodeAndImplementationTutorial` which will enable generation of UI components code and implementation tutorial.

The action takes in two parameters called `code` and `tutorial` which enables generation of a UI component code and implementation tutorial.

The action contains a handler function that generates a UI component code and implementation tutorial based on a given prompt. 

Inside the handler function, `codeToDisplay` state is updated with the newly generated code while `codeTutorial` state is updated with the newly generated tutorial, as shown below.

```tsx
useCopilotAction(
    {
      name: "generateCodeAndImplementationTutorial",
      description:
        "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.",
      parameters: [
        {
          name: "code",
          type: "string",
          description: "Code to be generated",
          required: true,
        },
        {
          name: "tutorial",
          type: "string",
          description:
            "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.",
          required: true,
        },
      ],
      handler: async ({ code, tutorial }) => {
        setCode((prev) => [...prev, code]);
        setCodeToDisplay(code);
        setCodeTutorial(tutorial);
      },
    },
    [codeToDisplay, codeTutorial]
  );
```

After that, go to `/[root]/src/app/page.tsx` file and import CopilotKit frontend packages and styles at the top using the code below.

```tsx
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
```

Then use `CopilotKit` to wrap the `CopilotSidebar` and  `CodeTutorial` components, as shown below. The `CopilotKit` component specifies the URL for CopilotKit's backend endpoint (`/api/copilotkit/`) while the `CopilotSidebar` renders the in-app chatbot that you can give prompts to generate UI components code and implementation tutorial.

```tsx
export default function Home() {
  return (
    <>
      <Header />
      <CopilotKit url="/api/copilotkit">
        <CopilotSidebar
          instructions="Help the user generate code. Ask the user if to generate its tutorial."
          defaultOpen={true}
          labels={{
            title: "Code & Tutorial Generator",
            initial: "Hi! 👋 I can help you generate code and its tutorial.",
          }}>
          <CodeTutorial />
        </CopilotSidebar>
      </CopilotKit>
    </>
  );
}
```

After that, run the development server and navigate to http://localhost:3000. You should see that the in-app chatbot was integrated into the UI components generator.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png)

### **Adding CopilotKit Backend to the UI Components Generator**

Here, I will walk you through the process of integrating the UI components generator with the CopilotKit backend that handles requests from frontend, and provides function calling and various LLM backends such as GPT. 

Also, we will integrate an AI agent named Tavily that can research any topic on the web.

To get started, create a file called `.env.local` in the root directory. Then add the environment variables below in the file that hold your `ChatGPT` and `Tavily` Search API keys.

```
OPENAI_API_KEY="Your ChatGPT API key"
TAVILY_API_KEY="Your Tavily Search API key"
```

To get the ChatGPT API key, navigate to https://platform.openai.com/api-keys.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png)

To get the Tavily Search API key, navigate to https://app.tavily.com/home


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png)

After that, go to `/[root]/src/app` and create a folder called `api`. In the `api` folder, create a folder called `copilotkit`. 

In the `copilotkit` folder, create a file called `research.ts`. Then Navigate to [this research.ts gist file](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c), copy the code, and add it to the **`research.ts`** file

Next, create a file called `route.ts` in the `/[root]/src/app/api/copilotkit` folder. The file will contain code that sets up a backend functionality to process POST requests. It conditionally includes a "research" action that performs research on a given topic.

Now import the following modules at the top of the file.

```tsx
import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit.
import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research.
import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata.

```

Below the code above, define a runtime environment variable and a function named `researchAction` that researches a certain topic using the code below.

```tsx
// Define a runtime environment variable, indicating the environment where the code is expected to run.
export const runtime = "edge";

// Define an annotated function for research. This object includes metadata and an implementation for the function.
const researchAction: AnnotatedFunction<any> = {
  name: "research", // Function name.
  description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description.
  argumentAnnotations: [ // Annotations for arguments that the function accepts.
    {
      name: "topic", // Argument name.
      type: "string", // Argument type.
      description: "The topic to research. 5 characters or longer.", // Argument description.
      required: true, // Indicates that the argument is required.
    },
  ],
  implementation: async (topic) => { // The actual function implementation.
    console.log("Researching topic: ", topic); // Log the research topic.
    return await researchWithLangGraph(topic); // Call the research function and return its result.
  },
};

```

Then add the code below under the code above to define an asynchronous function that handles POST requests.

```tsx
// Define an asynchronous function that handles POST requests.
export async function POST(req: Request): Promise<Response> {
  const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions.

  // Check if a specific environment variable is set, indicating access to certain functionality.
  if (process.env.TAVILY_API_KEY) {
    actions.push(researchAction); // Add the research action to the actions array if the condition is true.
  }

  // Instantiate CopilotBackend with the actions defined above.
  const copilotKit = new CopilotBackend({
    actions: actions,
  });

  // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter.
  return copilotKit.response(req, new OpenAIAdapter());
}

```

## How To Generate UI Components

Now go to the in-app chatbot you integrated earlier and give it a prompt like, “generate a contact form.” 

Once it is done generating, you should see the contact form component generated together with its implementation tutorial, as shown below. You can also modify the generated code using the embedded code editor.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png)

Congratulations! You’ve completed the project for this tutorial.

## Conclusion

[CopilotKit](https://copilotkit.ai/) is an incredible tool that allows you to add AI Copilots to your products within minutes. Whether you're interested in AI chatbots and assistants or automating complex tasks, CopilotKit makes it easy.

If you need to build an AI product or integrate an AI tool into your software applications, you should consider CopilotKit.

You can find the source code for this tutorial on GitHub: [https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator](https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator)
Enter fullscreen mode Exit fullscreen mode

Top comments (19)

Collapse
 
kenzic profile image
Chris McKenzie

Thank for taking the time to write this. Found the guide very helpful!

NOTE: for those trying to follow along and noticing a lot of the apis have change, you'll want to install the packages at the versions listed here: github.com/TheGreatBonnie/AIPowere...

Collapse
 
fernandezbaptiste profile image
Bap

Brilliant piece - thanks for sharing this. 🌟

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Bap.

Collapse
 
nyochembeng profile image
Nyochembeng Enzo

Thanks for the tutorials man 👍. Great job. It is very interesting and rich. I'll consider CopilotKit in any software project I'm working on as you propose 👍.

Collapse
 
the_greatbonnie profile image
Bonnie

CopilotKit is the future of web development.

Collapse
 
nyochembeng profile image
Nyochembeng Enzo

Hello @the_greatbonnie, I'm getting these errors:

ace.js:805 
 GET http://localhost:3000/_next/static/chunks/app/mode-html.js net::ERR_ABORTED 404 (Not Found)
ace.js:805 
 GET http://localhost:3000/_next/static/chunks/app/theme-monokai.js net::ERR_ABORTED 404 (Not Found)
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

And I don't understand how to resolve it. Can you help me please?

Collapse
 
alexhales67 profile image
Alexhales67

Like a v0 but with tutorials!

Collapse
 
the_greatbonnie profile image
Bonnie

Yeah

Collapse
 
philltech_pro profile image
Philani

Fantastic 🤩

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Philani.

Collapse
 
gotohuman profile image
Till - gotoHuman.com

Great tutorial!
Actually makes me wonder if we should include proper code support in gotoHuman for similar use cases without a chatbot

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Till.

Collapse
 
sauravkumarmahato profile image
Saurav Kumar Mahato

Very Detailed..

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Saurav.

Collapse
 
handymangirl profile image
Handyman-Girl

I have what you guys are going to consider a stupid question but I wasn’t to do this tutorial. How do I go to /[root]/src/app/page.tsx file. I do not find this file anywhere on my computer and if I put it into the terminal it says no such file. PLEASE HELP and I really am sorry to bother you. Thank you.

Collapse
 
mastadev72 profile image
MastaDev72

it looks nice but alot of code is depricated, so makes no sense to put it online, update your code or remove this article, people like to learn from this but now the learn B**lsh*t and get errors they can't hanlde

Collapse
 
time121212 profile image
tim brandom

This is awesome!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Tim.