The last few days have been exciting for AI.
Yet as developers, many of us don’t yet understand how accessible AI already is.
Today, we’ll cover awesome projects that you can easily build with AI. No need to be an AI expert, and each of these comes with either a tutorial or code walk-through.
Let’s jump in!
1. CopilotKit – AI Copilots for your product in hours.
Integrating AI features in React is tough, that’s where Copilot comes into the picture. A simple and fast solution to integrate production-ready Copilots into any product!
You can integrate key AI features into React apps using two React components. They also provide built-in (fully-customizable) Copilot-native UX components like <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.
Get started with the following npm command.
Copilot Portal is one of the components provided with CopilotKit which is an in-app AI chatbot that can see the current app state and take action inside your app. It communicates with the app frontend and backend, as well as 3rd party services via plugins.
This is how you can integrate a Chatbot.
A CopilotKit must wrap all components which interact with CopilotKit. It’s recommended you also get started with CopilotSidebar (you can swap to a different UI provider later).
import { CopilotKit } from “@copilotkit/react-core“;
import { CopilotSidebar } from “@copilotkit/react-ui“;
import “@copilotkit/react-ui/styles.css“;
export default function RootLayout({children}) {
return (
<CopilotKit url=“/path_to_copilotkit_endpoint/see_below“>
<CopilotSidebar>
{children}
</CopilotSidebar>
</CopilotKit>
);
}
You can set up Copilot Backend endpoints using this quickstart quide.
After this, you can let Copilot take action. You can read on how to provide external context. You can do so using useMakeCopilotReadable and useMakeCopilotDocumentReadable react hooks.
import { useMakeCopilotActionable } from ‘@copilotkit/react-core‘;
// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
{
name: “setEmployeesAsSelected“, // no spaces allowed in the function name
description: ““Set the given employees as ‘selected’“,“
argumentAnnotations: [
{
name: “employeeIds“,
type: “array“, items: { type: “string“ }
description: ““The IDs of employees to set as selected“,“
required: true
}
],
implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
},
[]
);
You can read the docs and check the demo video.
You can integrate Vercel AI SDK, OpenAI APIs, Langchain, and other LLM providers with ease. You can follow this guide to integrate a chatbot into your application.
The basic idea is to build AI Chatbots very fast without struggling while making any LLM-based applications.
The use cases are huge, and as developers, we should definitely try to use CopilotKit in our next project.
CopilotKit has 5.8k+ Stars on GitHub with 200+ releases meaning they’re constantly improving.
🎯 Popular Apps built with CopilotKit.
We can build lots of innovative apps with CopilotKit, so let’s explore a few that stand out!
✅ AI-powered blogging platform.
You can read this article using Next.js, Langchain, Supabase, and CopilotKit to build this amazing app.
LangChain & Tavily is used as a web-searching AI agent, Supabase for storing and retrieving the blogging platform article data, and CopilotKit is for integration of the AI into the app.
You can check the GitHub Repository.
✅ V0.dev clone.
If you’re not familiar, V0 by Vercel is an AI-powered tool that lets you generate UI based on prompts, along with a lot of other useful features. The shadcn components can now be edited in v0 on the docs itself (shown on their website).
You can use Next.js, GPT4, and CopilotKit to create a clone of V0. This detailed tutorial was featured in the Top 7, and overall it’s a great project to add to your portfolio.
The generated output of the sign page is shown below.
You can easily toggle between the React Code and UI by clicking on the button at the top right. Such a cool concept!
You can check the GitHub Repository.
You can read this article using Next.js, OpenAI, Radix UI for accessibility, Recharts for creating interactive charts, and CopilotKit to build this awesome project.
You can watch this demo by David!
This is my favorite one if you want to learn more with less.
I loved the UI (which is not the case with general tutorials) that is exactly what makes it a clean project to have on your bucket list of coding 🙂
You can check the live demo of the app.
You can check the GitHub Repository.
✅ spreadsheet app with an AI-copilot.
You can read this article using Next.js, GPT-4, LangChain, and CopilotKit to build this awesome tool.
To make the work easier, it uses React Spreadsheet package to create simple with customizable spreadsheets for React and Tavily AI as a search engine that enables AI agents to conduct research and access real-time knowledge
You can watch this demo!
You can also check the live demo. I can say for sure that this is a unique case and you can get a lot of inspiration.
You can check the GitHub Repository.
You can read this article using Next.js, OpenAI, and CopilotKit to build this awesome use case.
Not only you can generate your resume with ChatGPT, but you can export it into PDF and even improve it further by having a conversation with it. How cool, right 🙂
You can check the GitHub Repository.
You can read this article using Next.js, OpenAI, and CopilotKit to build a Text to Powerpoint app.
It’s a simple yet very powerful concept, the article has also clearly instructed on how to add a background image to any of those slides.
You can check the GitHub Repository.
✅ StudyPal: Your AI-Powered Personalized Learning Companion.
You can choose your desired subject from a curated list, setting the stage for a personalized learning journey.
You need to provide details about your educational background, enabling StudyPal to tailor materials and exercises to their current knowledge level.
An Additional Details section allows students to specify focus areas, ensuring content alignment with their learning objectives.
You can read this article using React, Node, and CopilotKit to build this awesome use case.
You can watch this demo of the app.
You can check the GitHub Repository.
2. What is langchain?
The rest of the projects will be related to langchain and AI (some are using python). It’s better to understand a bit about that.
LangChain is a framework for developing applications powered by large language models (LLMs).
Overall, LangChain simplifies every stage of the LLM application lifecycle. You can read more on the official docs.
I recommend watching this tutorial by freeCodeCamp if you want to learn more about langchain.
🎯 Popular Apps built using Langchain/AI/Python.
We can build lots and lots of high-level apps using langchain, so let’s explore a few that stand out!
✅ Voice Assistant on Mac – Your voice-controlled Mac assistant.
Your voice-controlled Mac assistant. GPT Automator lets you perform tasks on your Mac using your voice. For example, opening applications, looking up restaurants, and synthesizing information. Awesome 😀
It was built during the London Hackathon.
It has two main parts:
a. Voice to command: It generates the command using Whisper running locally (a fork of Buzz).
b. Command to Action: You give the command to a LangChain agent equipped with custom tools we wrote. These tools include controlling the operating system of the computer using AppleScript and controlling the active browser using JavaScript. Finally, like any good AI, we have the agent speak out the final result using AppleScript saying “{Result}” (try typing “Hello World!” into your Mac terminal if you haven’t used it before”).
A custom tool we made to have the LLM control the computer using AppleScript. The prompt is the docstring:
def computer_applescript_action(apple_script):
“””
Use this when you want to execute a command on the computer. The command should be in AppleScript.
Here are some examples of good AppleScript commands:
Command: Create a new page in Notion
AppleScript: tell application “Notion”
activate
delay 0.5
tell application “System Events” to keystroke “n” using {{command down}}
end tell
…
Write the AppleScript for the Command:
Command:
“””
p = subprocess.Popen([‘osascript’, ‘-‘], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
stdout, stderr = p.communicate(applescript.encode(‘utf-8’))
if p.returncode != 0:
raise Exception(stderr)
decoded_text = stdout.decode(“utf-8”)
return decoded_text
If you are wondering how it works, GPT Automator converts your audio input to text using OpenAI’s Whisper. Then, it uses a LangChain Agent to choose a set of actions, including generating AppleScript (for desktop automation) and JavaScript (for browser automation) commands from your prompt using OpenAI’s GPT-3 (“text-davinci-003”) and then executing the resulting script.
Just remember, this is not for production use. This project executes code generated from natural language and may be susceptible to prompt injection and similar attacks. This work was made as a proof-of-concept.
You can read the installation guide.
Let’s look at some of the prompts and what it will do:
⚡ Find the result of a calculation.
Prompt: “What is 2 + 2?”
It will write AppleScript to open up a calculator and type in 5 * 5.
⚡ Find restaurants nearby.
Prompt: “Find restaurants near me”
It will open up Chrome, google search for a restaurant nearby, parse the page, and then return the top results. Sometimes it’s cheeky, and instead will open up the Google Maps result and say “The best restaurants are the ones at the top of the page on Google Maps”. Other times it opens the top link on Google – and gets stuck on the Google accessibility page…
Here’s what’s printed to the terminal as it runs:
> Entering new AgentExecutor chain…
I need to search for a restaurant near Manchester.
Action: chrome_open_url
Action Input: https://www.google.com/search?q=restaurant+near+Manchester
Observation:
Thought: I need to read the page
Action: chrome_read_the_page
Action Input:
Observation: Accessibility links
Skip to main content
… # Shortned for brevity
Dishoom Manchester
4.7
(3.3K) · £££ · Indian
32 Bridge St · Near John Rylands Library
Closes soon ⋅ 11 pm
Stylish eatery for modern Indian fare
San Carlo
4.2
(2.8K) · £££ · Italian
42 King St W · Near John Rylands Library
Closes soon ⋅ 11 pm
Posh, sceney Italian restaurant
Turtle Bay Manchester Northern Quarter
4.7
Thought: I now know the final answer
Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert’s Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana.
I cannot guarantee that those restaurants are worth it, visit at your own risk. haha!
⚡ If you ask GPT Automator to wipe your computer it will.
Yes, it will wipe your computer if you ask!
My inner self screaming to do it 🙂
You can see the full demo here!
You can read more on Chidi’s blog.
It is more like a side project so they have around 200 stars on GitHub but it is very cool.
You can check the GitHub Repository.
✅ Instrukt – Integrated AI in the terminal.
Instrukt is a terminal-based AI-integrated environment. It offers a platform where users can:
Create and instruct modular AI agents.
Generate document indexes for question-answering.
Create and attach tools to any agent.
Instruct them in natural language and, for safety, run them inside secure containers (currently implemented with Docker) to perform tasks in their dedicated, sandboxed space.
Built using Langchain, Textual, and Chroma.
Get started with the following command.
There are a lot of exciting features such as:
A terminal-based interface for power keyboard users to instruct AI agents without ever leaving the keyboard.
Index your data and let agents retrieve it for question-answering. You can create and organize your indexes with an easy UI.
Index creation will auto-detect programming languages and optimize the splitting/chunking strategy accordingly.
Run agents inside secure docker containers for safety and privacy.
Integrated REPL-Prompt for quick interaction with agents, and a fast feedback loop for development and testing.
You can automate repetitive tasks with custom commands. It also has a built-in prompt/chat history.
You can read about all the features.
You can read the installation guide.
You can also debug and introspect agents using an in-built IPython console which is a neat little feature.
Instrukt is licensed with an AGPL license meaning that it can be used by anyone for whatever purpose.
It is safe to say that Instrukt is a Terminal AI Commander at your fingertips.
It is a new project so they have around 200+ stars on GitHub but the use case is very good.
You can check the GitHub Repository.
✅ ChatFiles – Upload your file and have a conversation with it.
Document Chatbot — multiple files and powered by GPT / Embedding. You can upload any documents and have a conversation with it, the UI is very good considering they have used another famous open source project for it.
It uses Langchain and Chatbot-ui under the hood. Built using Nextjs, TypeScript, Tailwind, and Supabase (Vector DB).
If you’re wondering about the approach and the technical architecture, then here it is!
The environment is only for trial and supports a maximum file size of 10 MB which is a drawback, if you want a bigger size then you can install it locally.
They have provided starter questions that you can use. You can check the live demo.
They have 3k stars on GitHub and are on the v0.3 release.
You can check the GitHub Repository.
✅ Ultimate AI Automation with Multi-Agent Collaboration – LangGraph + GPT Researcher.
LangGraph is a library for building stateful, multi-actor applications with LLMs. This example uses Langgraph to automate the process of in-depth research on any given topic.
In simple terms, this example showcases how a team of AI agents can work together to conduct research on a given topic, from planning to publication. This example will also leverage the leading autonomous research agent GPT Researcher which I already covered in one of my past articles.
The research team consists of seven LLM agents:
⚡ Chief Editor – Oversees the research process and manages the team. This is the “master” agent that coordinates the other agents using LangGraph. This agent acts as the main LangGraph interface.
⚡ GPT Researcher – A specialized autonomous agent that conducts in-depth research on a given topic.
⚡ Editor – Responsible for planning the research outline and structure.
⚡ Reviewer – Validates the correctness of the research results given a set of criteria.
⚡ Reviser – Revises the research results based on the feedback from the reviewer.
⚡ Writer – Responsible for compiling and writing the final report.
⚡ Publisher – Responsible for publishing the final report in various formats.
The automation process is based on the following stages (architecture) which is clearly shown in the article.
Planning stage.
Data collection and analysis.
Review and revision.
Writing and submission.
Publication.
You can read the detailed steps docs on what is going on.
The final running of the assistant will result in a final research report in formats such as Markdown, PDF, and Docx.
You can read this article that covers How to Build the Ultimate AI Automation with Multi-Agent Collaboration where Assaf Elovic, Head of R&D at Wix, walks through how to build an autonomous research assistant using LangGraph with a team of specialized agents. It has easy to follow code samples and clearly instructs on what is going on. A must read for developers!
The best part is that you just need to edit the task.json file in the main directory if you wish to change the research query and customize the report. Truly awesome 🙂
It is under the GPT Researcher which has 10k stars but it is updated frequently since the last commit was just a a couple of days ago.
You can check the GitHub Repository.
✅ wingmanAI.
WingmanAI is a powerful tool for interacting with real-time transcription of both system and microphone audio.
It uses ChatGPT and lets you interact in real-time with the transcripts as an extensive memory base for the bot, providing a unique communication platform.
The bot can even answer questions about past conversations when you load the transcripts for a designated person.
Breakdown of all the awesome features:
⚡ It can transcribe both system output and microphone input audio, allowing you to view the live transcription in an easy-to-read format.
⚡ The bot maintains a record of the conversation but in a token-efficient manner, as only the current chunk of the transcript is passed to the bot.
⚡ You can chat with a ChatGPT-powered bot that reads your transcripts in real time.
⚡ You can keep appending to the saved transcripts, building a vast database over time for the bot to pull from.
⚡ It allows you to save transcripts for future use. You can load them up anytime later, and any query made to the bot will be cross-referenced with a vector database of the saved transcript, providing the bot with a richer context.
You can read the installation instructions.
You just need to put the OpenAI API key in the keys.env file and run main.py.
The only downside is that the app is currently compatible only with Windows. Windows users are now more happy 🙂
You can watch the complete demo video. The gif attached below is short (only 30s out of 86s) due to restrictions.
I was very surprised by the concept because I never thought it was possible in such a way. It feels really great when developers create something cool with a very minimal concept 🙂
It has 420+ stars on GitHub and isn’t maintained anymore. But you can use it to build something better.
You can check the GitHub Repository.
✅ examor.
An app that allows you to take exams based on your knowledge notes. It lets you focus on what you have learned and written 🧠.
It continuously prompts you with questions to review your note contents which is so useful for students, scholars, interviewees, and lifelong learners.
The project admin is refactoring the project using next.js which is very good for developers using next.js.
Let’s break down some of the awesome features:
⚡ You can upload associated documents when you create notes. The application generates a set of questions from these documents, based on their content. These questions will be presented to you in the future. When creating notes, you as a user can also choose the types of questions you want to generate.
⚡ After you receive daily questions, you can provide answers. GPT will score, validate, and provide the correct answers. The score is determined by evaluating the correctness of the answers and the linked document (0 ~ 10 points). This score influences the subsequent Ebbinghaus review process. It will be optimized in the future release version.
⚡ Roles can provide more possibilities for question generation and assessment. You can set roles on the configuration page. For more information about various roles, it’s recommended to refer to the detailed Role Manual guide.
⚡ When practicing questions, you can answer using different methods. The image below shows an example of a single-choice question.
⚡ It has a list of several modules such as Examine, Note, Notes Management, and Random Question using these you can import questions in your notes, delete or add new files to your uploaded notes, and much more.
I loved the whole concept and this will catch the attention of any person who has ever faced the problem of revising notes.
You can read the docs that contains detailed guidelines on how to properly use this.
It has 1k stars on GitHub and is on the v0.4.2 release.
You can check the GitHub Repository.
✅ SpeechGPT.
SpeechGPT is a web application that enables you to converse with ChatGPT.
You can utilize this app to improve your language-speaking skills or simply have fun chatting with ChatGPT.
Most of you would say what’s unique about this but it actually is.
Let’s break some awesome features:
⚡ All the data is stored locally which leads to stronger privacy.
⚡ As per docs, it supports over 100 languages but I can only see support for three languages on the live demo.
⚡ Includes both built-in speech recognition and integration with Azure Speech Services.
⚡ Includes built-in speech synthesis, as well as integration with Amazon Polly and Azure Speech Services.
Follow this tutorial in docs to understand how to use this.
You can see the live demo at speechgpt.app. This is a perfect example of how a couple of extra features can take your app to the next level!
SpeechGPT has 2.7k stars on GitHub and is on the v0.5.1 release.
You can check the GitHub Repository.
✅ NextChat – ChatGPT Next Web.
This is not a typical side project because the codebase is large enough but it’s worth looking at as an inspiration.
All you need is a One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gemini Pro support (Web / PWA / Linux / Win / MacOS).
Some of the awesome features are:
⚡ Privacy First, all data is stored locally in the browser.
⚡ Fast first screen loading speed (~100kb), support streaming response.
⚡ Automatically compresses chat history to support long conversations while also saving your tokens.
⚡ Compact client (~5MB) on Linux/Windows/MacOS.
⚡ You can deploy for free with one click on Vercel in under 1 minute.
⚡ Fully compatible with self-deployed LLMs.
⚡ Markdown support: LaTex, mermaid, code highlight, etc.
You can check the live demo of NextChat and the docs including the list of all env variables mainly API keys.
It’s not hard to work on it locally and they have also provided a GitHub actions workflow that will automatically update it every hour.
NextChat has 69k+ stars on GitHub and are on the v2.2 release.
You can check the GitHub Repository.
I have a couple of great recommendations if you prefer watching tutorials to build projects.
🎯 LangChain GEN AI Tutorial – 6 End-to-End Projects using OpenAI, Google Gemini Pro, LLAMA2 – 4 hours.
The projects that are covered in the tutorial:
✅ LangChain Crash Course – sets the foundation.
✅ Chat With PDF Using Langchain And Astradb.
✅ Blog Generation Using Llama 2 LLM Models.
✅ End To End LLm Projects Using Pinecone VectorDB.
✅ Google Gemini Pro Demo.
✅ Multi-Language Invoice Extractor LLM Project.
✅ Conversational Q&A Chatbot Using Gemini Pro API.
🎯 LangChain Crash Course by Streamlit.
The projects that are covered in the tutorial:
✅ Invoice Data Extractor.
✅ Basic QA Over Custom Data.
✅ Summarization and Useful Chain Types.
✅ WordPress Code Assistant.
✅ Convert Voice Memos to Text.
You can find the crash course. There will be a section on hands-on projects in the sidebar!
So many awesome projects 🙂
Seriously though, I have seen a lot of developers building the same apps where there is no limit to the inspiration you can get. I hope you loved this one.
Go on, save it, and build each of these to show who is the tech boss!
Let me know which project surprised you the most.
Have a great day! Till next time.
Follow Copilotkit for more content like this.
