7 | Github Assistant is a chatbot that utilises GPT and Vercel AI SDK to generate UI elements on the fly based on user input by calling functions and APIs. It queries the user input and responds with interactive UI elements within the AI stream to make the experience of a developer a lot smoother.
8 |
9 |
10 | View LIVE
11 |
12 |
16 | NOTE: Actions related to GitHub without tight rate limits require authentication. Testing the app with a session is recommended. 17 |
18 | 19 | ## 🔍 Overview 20 | 21 | - 📖 [Walk-through](#walk-through) 22 | - ⚙️ [Run on local](#run-on-local) 23 | - 🧱 [Tech Stack & Features](#tech-stack-&-features) 24 | 25 | ## 📖 Walk-through 26 |NOTE: Please beware that the search queries are conducted by the LLM (GPT-3-turbo) so sometimes it might bring out unexpected results.
27 | 28 | Username search ~ Brings out the related profile UI component with related information and actions. 29 | > Example: `Search for the username 'kayaayberk'` 30 | 31 | Search list of users ~ Brings out the people who appeared in the search conducted by the LLM presented in a UI component with different actions. 32 | > Example: `Search for the people named John with more than 5 repositories located in London.` 33 | 34 | Repository search ~ Brings out the first 4 repositories that appeared in the search with related actions presented in a UI component. 35 | > Example: `Search for the repositories that have 'state management' in description with more than 5.000 stars.` 36 | 37 | Directory content search ~ Brings out the searched repository directory with its content on each file. 38 | > Example: `Search for ReduxJs/redux content directory.` 39 | 40 | Readme search ~ Brings out the full README.md of a searched repository in an organised format. 41 | > Example: `Search for the readme of Shadcn/ui` 42 | 43 |44 | You can also interact with these actions within the AI stream through presented UI components. Each component includes related actions. 45 |
46 | 47 | ### Actions & Function calling 48 | Actions and functions related to generative UI elements as well as the AI provider can be found in: 49 | - `/lib/chat/actions.tsx` 50 | - `/lib/chat/submit-user-action.tsx` 51 | - `/lib/chat/submit-user-message.tsx` 52 | 53 | ## ⚙️ Run on your local 54 | 55 | #### 1. Clone the repository 56 | ```bash 57 | git clone https://github.com/kayaayberk/generative-ui-github-assistant.git 58 | ``` 59 | 60 | #### 2. Install dependencies & run on localhost 61 | ```bash 62 | cd generative-ui-github-assistant 63 | npm install 64 | npm run dev 65 | ``` 66 | 67 | #### 3. Set up .env.local 68 | 69 | ```bash 70 | OPENAI_API_KEY=[YOUR_OPENAI_API_KEY] 71 | 72 | ## Clerk Auth 73 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=[YOUR_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY] 74 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=[PREFERRED_URL] 75 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=[PREFERRED_URL] 76 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=[PREFERRED_URL] 77 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=[PREFERRED_URL] 78 | 79 | ## Neon Database 80 | DATABASE_URL=[YOUR_NEON_DATABASE_URL] 81 | 82 | ## GitHub OAuth app 83 | GITHUB_CLIENT_ID=[YOUR_GITHUB_CLIENT_ID] 84 | GITHUB_CLIENT_SECRET=[YOUR_GITHUB_CLIENT_SECRET] 85 | ``` 86 | 87 | ## 🧱 Stack & Features 88 | 89 | #### Frameworks & Libraries & Languages 90 | 91 | - [React](https://react.dev/) 92 | - [Next.js](https://nextjs.org/) 93 | - [Vercel AI SDK](https://sdk.vercel.ai/docs) 94 | - [Typescript](https://www.typescriptlang.org/docs/) 95 | - [Zod](https://github.com/colinhacks/zod) 96 | - [Clerk Auth](https://clerk.com/docs) 97 | 98 | #### Platforms 99 | 100 | - [OpenAI](https://platform.openai.com/docs/introduction) 101 | - [Neon Database](https://neon.tech/) 102 | - [Drizzle ORM](https://orm.drizzle.team/docs/overview) 103 | - [Vercel](https://www.contentful.com/) 104 | - [GitHub API](https://docs.github.com/en/rest?apiVersion=2022-11-28) 105 | 106 | #### UI 107 | 108 | - [Tailwind CSS](https://tailwindcss.com/) 109 | - [Shadcn/ui](https://ui.shadcn.com/) 110 | - [Phosphor Icons](https://phosphoricons.com/) 111 | -------------------------------------------------------------------------------- /app/actions.ts: -------------------------------------------------------------------------------- 1 | 'use server' 2 | 3 | import { db } from '@/db' 4 | import { eq } from 'drizzle-orm' 5 | import { type Chat } from '@/lib/types' 6 | import { InsertChat, SelectChat, chat } from '@/db/schema' 7 | import { revalidatePath } from 'next/cache' 8 | import { QueryCache } from '@tanstack/react-query' 9 | import { clerkClient, currentUser } from '@clerk/nextjs' 10 | 11 | type GetChatResult = SelectChat[] | null 12 | type SetChetResults = InsertChat[] 13 | 14 | /** 15 | * `getChat` function retrieves a chat based on its ID and the logged-in user's ID, ensuring that 16 | * the user is the author of the chat. 17 | * @param {string} id - The `id` parameter is a string that represents the unique identifier of the 18 | * chat you want to retrieve. 19 | * @param {string} loggedInUserId - The `loggedInUserId` parameter represents 20 | * the ID of the user who is currently logged in and trying to access the chat. This parameter is used 21 | * to ensure that only the author of the chat can access and view the chat details. If the 22 | * `loggedInUserId` does not 23 | * @returns The `getChat` function is returning a Promise that resolves to a `GetChatResult`. If the 24 | * `receivedChat` array is empty or the author of the chat is not the same as the `loggedInUserId`, the 25 | * function returns `null`. Otherwise, it returns the `receivedChat` array. 26 | */ 27 | export async function getChat(id: string, loggedInUserId: string) { 28 | const receivedChat = await db 29 | .select({ 30 | id: chat.id, 31 | title: chat.title, 32 | author: chat.author, 33 | path: chat.path, 34 | messages: chat.messages, 35 | createdAt: chat.createdAt, 36 | }) 37 | .from(chat) 38 | .where(eq(chat.id, id)) 39 | 40 | if (!receivedChat.length || receivedChat[0].author !== loggedInUserId) { 41 | return null 42 | } 43 | return receivedChat 44 | } 45 | 46 | /** 47 | * `getChats` function retrieves chats for a specific user ID from a database and returns them as 48 | * an array of Chat objects. 49 | * @param {string | null} userId - The `userId` parameter is a string that represents the user for whom 50 | * we want to retrieve chats. It can also be `null` if the user is not authenticated. 51 | * @returns The function `getChats` returns a Promise that resolves to a `GetChatResult`, which is an 52 | * array of `Chat` objects. If the `userId` parameter is null, an empty array is returned. If there is 53 | * an error during the database query, an empty array is also returned. 54 | */ 55 | export async function getChats(userId?: string | null) { 56 | if (!userId) { 57 | return [] 58 | } 59 | 60 | try { 61 | const receivedChats: SelectChat[] = await db 62 | .select() 63 | .from(chat) 64 | .where(eq(chat.author, userId)) 65 | 66 | return receivedChats as Chat[] 67 | } catch (e) { 68 | console.error(`getChats error: ${e}`) 69 | return [] 70 | } 71 | } 72 | 73 | /** 74 | * The function `saveChat` saves a chat object to a database with conflict resolution logic. 75 | * @param {Chat} savedChat - The `savedChat` parameter is an object of type `Chat` that contains the 76 | * data to be saved in the database. 77 | */ 78 | export async function saveChat(savedChat: Chat) { 79 | const user = await currentUser() 80 | 81 | if (user) { 82 | await db 83 | .insert(chat) 84 | .values(savedChat) 85 | .onConflictDoUpdate({ 86 | target: chat.id, 87 | set: { id: savedChat.id, messages: savedChat.messages }, 88 | }) 89 | } 90 | } 91 | 92 | /** 93 | * The function `getMissingKeys` returns an array of environment variable keys that are required but 94 | * not present in the current environment. 95 | * @returns The `getMissingKeys` function is returning an array of keys that are missing from the 96 | * `process.env` object. The keys that are missing are those that are listed in the `keysRequired` 97 | * array but are not found in the `process.env` object. 98 | * From Vercel, see here: https://github.com/vercel/ai-chatbot/blob/main/app/actions.ts 99 | */ 100 | export async function getMissingKeys() { 101 | const keysRequired = ['OPENAI_API_KEY'] 102 | return keysRequired 103 | .map((key) => (process.env[key] ? '' : key)) 104 | .filter((key) => key !== '') 105 | } 106 | 107 | export async function removeChat({ id, path }: { id: string; path: string }) { 108 | const user = await currentUser() 109 | 110 | if (!user) { 111 | return { 112 | error: 'Unauthorized', 113 | } 114 | } 115 | 116 | if (user) { 117 | const uid = String( 118 | await db 119 | .select({ author: chat.author }) 120 | .from(chat) 121 | .where(eq(chat.author, user.id)), 122 | ) 123 | } 124 | 125 | await db.delete(chat).where(eq(chat.id, id)) 126 | await db.delete(chat).where(eq(chat.path, path)) 127 | const queryCache = new QueryCache({ 128 | onError: (error) => { 129 | console.log(error) 130 | }, 131 | onSuccess: (data) => { 132 | console.log(data) 133 | }, 134 | onSettled: (data, error) => { 135 | console.log(data, error) 136 | }, 137 | }) 138 | const query = queryCache.find({ queryKey: ['profiles'] }) 139 | 140 | revalidatePath('/') 141 | return revalidatePath(path) 142 | } 143 | 144 | export const getGithubAccessToken = async (userId: string) => { 145 | if (!userId) { 146 | throw new Error('userId not found') 147 | } 148 | const provider = 'oauth_github' 149 | 150 | const clerkResponse = await clerkClient.users.getUserOauthAccessToken( 151 | userId, 152 | provider, 153 | ) 154 | 155 | const accessToken = clerkResponse[0].token 156 | return accessToken as string 157 | } 158 | 159 | export const clearAllChats = async (userId: string) => { 160 | const user = await currentUser() 161 | if (!user || !userId) { 162 | return { 163 | error: 'Unauthorized', 164 | } 165 | } 166 | 167 | if (user) { 168 | const allChats: Chat[] = await db 169 | .select() 170 | .from(chat) 171 | .where(eq(chat.author, user.id)) 172 | 173 | if (allChats.length) { 174 | await db.delete(chat).where(eq(chat.author, userId)) 175 | } 176 | return revalidatePath(allChats.map((chat) => chat.path).join(', ')) 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /app/chat/[id]/page.tsx: -------------------------------------------------------------------------------- 1 | import Chat from '@/components/Chat' 2 | import { AI } from '@/lib/chat/actions' 3 | import { currentUser } from '@clerk/nextjs' 4 | import { notFound, redirect } from 'next/navigation' 5 | import { getChat, getMissingKeys } from '@/app/actions' 6 | 7 | export interface ChatPageProps { 8 | params: { 9 | id: string 10 | } 11 | } 12 | export default async function ChatPage({ params }: ChatPageProps) { 13 | const user = await currentUser() 14 | const missingKeys = await getMissingKeys() 15 | 16 | if (!user) { 17 | redirect(`/api/auth/login?post_login_redirect_url=/chat/${params.id}`) 18 | } 19 | 20 | const chat = await getChat(params.id, user.id) 21 | 22 | if (!chat) { 23 | redirect('/chat') 24 | } 25 | 26 | if (chat[0].author !== user?.id) { 27 | notFound() 28 | } 29 | 30 | return ( 31 |71 | Rate limit remaining: 72 | {rateLimitRemaining} 73 |
74 |79 | GitHub assistant is a personal and experimental project. Please do not 80 | abuse it in term of token usage. 81 |
82 |57 | Actions related to GitHub are tightly rate-limited. Please sign in 58 | with GitHub not to get rate-limited. 59 |
60 |{children}
104 |