How to integrate GitHub CopilotKit with Prisma Integration into your nextJs project Using OpenAI

Gulshan Sharma — Tue, 24 Dec 2024 07:46:01 +0000

What is GitHub CopilotKit:

Build deeply integrated AI assistants & agents designed to work alongside your users inside applications.End-to-end systems integrations with deep customizability and support for the leading LLM ecosystem solutions.

GitHub CopilotKit can seamlessly integrate with multiple AI providers, including OpenAI, Azure OpenAI, and Google Gemini, offering flexibility and scalability to meet diverse business needs. This multi-provider compatibility allows organizations to leverage advanced AI models from different platforms, ensuring access to cutting-edge technologies and features. By supporting multiple providers, Copilot enables users to select the most suitable AI service based on performance, cost, compliance, or specific use-case requirements. This adaptability also reduces dependency on a single provider, enhancing reliability and enabling hybrid AI strategies for improved efficiency and innovation. Document

Create a NextJs Project

Create an app using nextJs: documention

npx create-next-app@latest

Intgreate prisma
Install Prisma ORM: documention

npm install prisma --save-dev
npm install @prisma/client  
npx prisma init     
prisma generate

Schema structure in Prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
model Blogs{
  id        Int    @id @default(autoincrement())
  title     String
  content   String
  createdAt DateTime @default(now())
}

Schema deploy on database server in Prisma:

npm prisma migrate dev     
npm prisma migrate deploy

The resources to create a free tire PostgreSQL Database:
neon
supabase

Steps to integration of GitHub CopilotKit:

Add GitHub CopilotKit into the app/layout.js

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

 <CopilotKit runtimeUrl="/api/copilotkit"> 
         {children}
  </CopilotKit>

.env configure environment variables

DATABASE_URL="postgresql://xxxxxxx"
OPENAI_API_KEY=xxxxxxx

Customize the app/page.js for CopilotPopup

"use client";
import { useEffect, useState } from "react";
import { CopilotPopup } from "@copilotkit/react-ui";

export default function Home() {
  const [blogs, setBlogs] =useState([])

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/blogs');
      const blogData = await response.json();
      setBlogs(blogData);
    };
    fetchData();
  }, []);
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
    <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
    <table className="table-auto border-collapse border border-gray-300 w-full">
          <thead>
            <tr className="bg-gray-200">
              <th className="border border-gray-300 px-4 py-2">ID</th>
              <th className="border border-gray-300 px-4 py-2">Title</th>
              <th className="border border-gray-300 px-4 py-2">Content</th>
            </tr>
          </thead>
          <tbody>

            {blogs ? blogs.map((blog, idex) => (
            <tr key={idex}>
              <td className="border border-gray-300 px-4 py-2">{blog.id}</td>
              <td className="border border-gray-300 px-4 py-2">{blog.title}</td>
              <td className="border border-gray-300 px-4 py-2">{blog.content}</td>
            </tr>
            )) : <tr><td colSpan={4}> No records found</td></tr>}
          </tbody>
        </table>
        <CopilotPopup
      instructions={"You are assisting the blogs as best as you can. Answer in the best way possible given the data you have."}
      labels={{
        title: "Blog Assistant",
        initial: "Need any help?",
      }}
    />
    </main>

  </div>
  );
}

Create an API endpoint for api/copilotkit/route.js and blog data api/blogs/route.js

api/copilotkit/route.js

import {
    CopilotRuntime,
    OpenAIAdapter,
    copilotRuntimeNextJSAppRouterEndpoint
  } from '@copilotkit/runtime';
  import { PrismaClient } from '@prisma/client';
  const serviceAdapter = new OpenAIAdapter();
  const prisma = new PrismaClient();
  const runtime = new CopilotRuntime({
    actions: ({properties,url}) => {
        return [
            {
                name: "updateDb",
                description: "Update blog item to the list",
                parameters: [
                  {
                    name: "id",
                    type: "number",
                    description: "The ID of the post item to data fetch",
                    required: true,
                  },
                  {
                    name: "updateTitle",
                    type: "string",
                    description: "The update title of the blog post to be updated",
                    required: true,
                  },
                  {
                    name: "updateContent",
                    type: "string",
                    description: "The update content of the blog post to be updated",
                    required: true,
                  }
                ],
                handler: async ({ id, updateTitle, updateContent }) => {
                  await prisma.blogs.update({
                    where: {
                      id : Number(id),
                    },
                    data: {
                      title: updateTitle,
                      content: updateContent
                    }
                  })
                },
              },
              {
                name: "addDb",
                description: "Add blog item to the list",
                parameters: [
                  {
                    name: "createTitle",
                    type: "string",
                    description: "The add title of the blog post to be updated",
                    required: true,
                  },
                  {
                    name: "createContent",
                    type: "string",
                    description: "The add content of the blog post to be updated",
                    required: true,
                  }
                ],
                handler: async ({ createTitle, createContent }) => {
                  await prisma.blogs.create({
                    data: {
                      title: createTitle,
                      content: createContent
                    }
                  })
                },
              }
        ]
    }
  });

  export const POST = async (req) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
      runtime,
      serviceAdapter,
      endpoint: '/api/copilotkit',
    });
    return handleRequest(req);
  };

api/blogs/route.js

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function GET() {
  try {
    const tableData = await prisma.blogs.findMany();
    return NextResponse.json(tableData);
  } catch (error) {
    console.error('Error fetching data:', error);
    return NextResponse.json({ error: 'Error fetching data' }, { status: 500 });
  } finally {
    await prisma.$disconnect();
  }
}

To run Copiltkit make a build and run the project

We can directly run it on locally because of the strict mode in nextJs. so first we have to make a build and then run the project

npm run build
npm run start

Finally your website is ready to use the Copilotkit

Hey, My name is Gulshan, If you have enjoyed and learned something useful, like this post, add a comment.

Don't forget to give it a start 😅.

Happy Coding 🧑‍💻

DEV Community: Gulshan Sharma

How to integrate GitHub CopilotKit with Prisma Integration into your nextJs project Using OpenAI