21 React Projects Too Awesome to Ignore
Anmol Baranwal
Posted on October 1, 2024
AI is going to take over the world soon, we just don't know which part yet.
A few React projects already use AI, so I am covering 21 projects that will be very useful for you as a developer.
Some are tools, some are packages but all are open-source so you can at least learn from the codebase.
1. CopilotKit - 10x easier to build AI Copilots.
You will agree that adding AI features in React is tough. That's where Copilot helps you as a framework for building custom AI Copilots in your application.
You can build in-app AI chatbots, and in-app AI Agents with simple components provided by Copilotkit which is at least 10x easier compared to building it from scratch.
You shouldn't reinvent the wheel if there is already a very simple and fast solution!
They also provide built-in (fully-customizable) Copilot-native UX components like <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.
Get started with the following npm command.
npm i @copilotkit/react-core @copilotkit/react-ui
This is how you can integrate a Chatbot.
A CopilotKit must wrap all components which interact with CopilotKit. You should also start with CopilotSidebar (you can swap to a different UI provider later).
"use client";
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 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 a lot of struggle, especially with LLM-based apps.
Also check out CopilotKit's CoAgents: A Framework for Human-in-the-Loop!
CopilotKit has 8.5k+ stars on GitHub with 300+ releases.
2. responsively - modified web browser for 5x faster responsive web development.
Responsively is a modified browser built using Electron that helps in responsive web development.
I know Chrome development tools work very well but you will be amazed by how easy it is to use Responsively.
At first glance, anyone would think it of an ordinary app but there are some very unique features:
✅ See all devices at once.
✅ Any click, scroll, or navigation you perform on one device will be replicated to all devices in real-time.
✅ It allows quick context switching by saving your favorite device combinations as Preview Suits to switch between them when you're testing.
✅ It comes with a large collection of device profiles out of the box. You can also add your own custom devices.
You must be thinking about the usual features that would be missing but that's not the case.
⚡ You will get all the basic browser features like cookie management, local storage, session storage, and bookmarks. You can also use the dev tools as in any browser.
⚡ You can also take screenshots of individual devices by clicking on the camera icon in the device toolbar with a quick screenshot of the viewport too.
⚡ The Unified Inspector allows you to inspect elements across all devices at once by pressing Cmd/Ctrl + I to activate it and hover over any element to see its details.
You can download the desktop app.
They have also provided browser extensions for Chrome, Edge, and Firefox to easily send links from your browser to the app and preview instantly.
I would highly recommend to at least check it out because it supports hot reloading as well. It might end up making your workflow much smoother.
Responsively has 22k stars on GitHub and is built using JavaScript.
3. drawdb - intuitive online database design tool and SQL generator.
DrawDB is a robust and user-friendly database entity relationship (DBER) editor right in your browser. Build diagrams with a few clicks, export SQL scripts, customize your editor, and more without creating an account.
There are a lot of features which you can explore yourself.
You can try it in the editor.
Please note that the diagrams are saved in your browser. Before clearing the browser, just make sure to back up your data.
They have 18.6k stars on GitHub.
4. Tooljet - Low-code platform for building business applications.
We all build frontend but it is generally way complex and a lot of factors are involved. A lot of people say it's easy but it's not.
ToolJet is a low-code framework to build and deploy internal tools with minimal engineering effort.
Their drag-and-drop frontend builder helps you to create complex, responsive frontends within minutes.
You can integrate:
-→ Data sources including databases like PostgreSQL, MongoDB and Elasticsearch.
-→ API endpoints with OpenAPI spec and OAuth2 support.
-→ SaaS tools such as Stripe, Slack, Google Sheets, Airtable, and Notion.
-→ Object storage services like S3, GCS, and Minio, to fetch and write data.
Basically, you can use it with everything :)
By the way, ToolJet can also integrate with OpenAI to access two main services. The Completions service enables ToolJet to produce text from a given prompt or context. Meanwhile, the Chat service facilitates user interaction with an AI-driven chatbot based on OpenAI's language models. You can read more on the docs.
This is how Tooljet works.
You can develop multi-step workflows in ToolJet to automate business processes. In addition to building and automating workflows, ToolJet allows for easy integration of these workflows within your applications.
You can read this quickstart guide that shows you how to create an employee directory application in minutes using ToolJet. This app will let you track and update employee information with a beautiful user interface.
See the list of features that is available including 45+ built-in responsive components, 50+ data sources, and a whole lot more.
You can read the docs and see the How to guides.
They have received funding from GitHub so that builds a huge trust.
They have 28.5k stars on GitHub and are built on JavaScript.
5. AppFlowy - open source alternative to Notion.
AppFlowy is an AI-powered secure workspace similar to the notion where you achieve more without losing control of your data.
You can organize and visualize your data in tables, boards, and calendars. They also provide mobile apps so that's a plus.
You can read the docs and read about installation methods.
They support self-hosting AppFlowy using Supabase. This is ideal for users who use Supabase for their infrastructure.
You should also check this to learn more about data storage, markdown, shortcuts, themes, AI involved, and plugins.
AppFlowy has 51k+ stars on GitHub.
6. Flowise - Drag & drop UI to build your customized LLM flow.
Flowise is an open-source UI visual tool to build your customized LLM orchestration flow & AI agents.
We shouldn't compare any projects but I can confidently say this might be the most useful one among the projects listed here!
Get started with the following npm command.
npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234
This is how you integrate the API.
import requests
url = "/api/v1/prediction/:id"
def query(payload):
response = requests.post(
url,
json = payload
)
return response.json()
output = query({
question: "hello!"
)}
You can read the docs.
Cloud host is not available so you would have to self-host using these instructions.
Let's explore some of the use cases:
⚡ Let's say you have a website (could be a store, an e-commerce site, or a blog), and you want to scrap all the relative links of that website and have LLM answer any question on your website. You can follow this step-by-step tutorial on how to achieve the same.
⚡ You can also create a custom tool that will be able to call a webhook endpoint and pass in the necessary parameters into the webhook body. Follow this guide which will be using Make.com to create the webhook workflow.
There are a lot of other use cases such as building a SQL QnA or interacting with API. Explore and build cool stuff!
FlowiseAI has 27.5k stars on GitHub and has more than 14k forks so it has a good overall ratio.
7. ChatFiles - Upload your file and have a conversation with it.
It's more like a document chatbot to interact with multiple files and is 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 3.2k stars on GitHub and are on the v0.3 release.
8. MindsDB - The platform for customizing AI from enterprise data.
MindsDB is the platform for customizing AI from enterprise data.
With MindsDB, you can deploy, serve, and fine-tune models in real-time, utilizing data from databases, vector stores, or applications, to build AI-powered apps - using universal tools developers already know.
With MindsDB and its nearly 200 integrations to data sources and AI/ML frameworks, any developer can use their enterprise data to customize AI for their purpose, faster and more securely.
You can read the docs and quickstart guide to get started.
They currently support a total of 3 SDKs that is using using Mongo-QL, Python, and JavaScript.
There are several applications of MindsDB such as integrating with numerous data sources and AI frameworks.
The other common use cases include fine-tuning models, chatbots, alert systems, content generation, natural language processing, classification, regressions, and forecasting. Read more about the use cases and each of them has an architecture diagram with a little info.
For instance, the chatbot architecture diagram with MindsDB. You can read about all the solutions provided along with their SQL Query examples.
// SQL Query Example for Chatbot
CREATE CHATBOT slack_bot USING database='slack',agent='customer_support';
Just to tell you about the overall possibilities, I came across a great article on How to Forecast Air Temperatures with AI + IoT Sensor Data with MindsDB.
They have 26k stars on GitHub and are on the v24.8.1.0 with more than 200 releases. By the way, this is the first time I've seen 4 parts in any release as I always followed the semantic release.
9. Twitter Agent - Scrape data from social media and chat with it using Langchain.
Media Agent scrapes Twitter and Reddit submissions, summarizes them, and chats with them in an interactive terminal. Such a cool concept!
You can read the instructions to install it locally.
It is built using:
- Langchain 🦜 to build and compose LLMs.
- ChromaDB to store vectors (a.k.a embeddings) and query them to build conversational bots.
- Tweepy to connect to your Twitter API and extract Tweets and metadata.
- Praw to connect to Reddit API.
- Rich to build a cool terminal UX/UI.
- Poetry to manage dependencies.
You can do a lot of cool stuff like:
- Scrapes tweets/submissions on your behalf either from a list of user accounts or a list of keywords.
- Embeds the tweets/submissions using OpenAI.
- Creates a summary of the tweets/submissions and provides potential questions to answer.
- Opens a chat session on top of the tweets.
- Saves the conversation with its metadata.
Watch the demo!
It has close to 111 stars on GitHub and it isn't maintained anymore (the concept is exciting). You can use it to build something better.
10. Replexica - AI-powered i18n toolkit for React.
The struggle with localization is definitely real, so having a little AI help with that is worth looking at.
Replexica is an i18n toolkit for React, to ship multi-language apps fast. It doesn't require extracting text into JSON files and uses AI-powered API for content processing.
Replexica is a platform, not a library. It's like having a team of translators and localization engineers working for you but without the overhead. All you need is an API key and voila!
A couple of exciting features that make it all worth it.
✅ Replexica automatically translates your app into multiple languages.
✅ Replexica ensures that translations are accurate and contextually correct, that they fit in the UI, and aim to translate better than a human would ever do. I don't trust an AI though!
✅ Replexica keeps your app localized as you add new features (more like a continuous localization).
Some of the i18n formats supported are:
- JSON-free Replexica compiler format.
- .md files for Markdown content.
- Legacy JSON and YAML-based formats.
To give a general idea behind Replexica, here's the only change that's needed to the basic Next.js app to make it multi-language.
Get started with the following npm command.
// install
pnpm add replexica @replexica/react @replexica/compiler
// login to Replexica API.
pnpm replexica auth --login
This is how you can use this.
// next.config.mjs
// Import Replexica Compiler
import replexica from '@replexica/compiler';
/** @type {import('next').NextConfig} */
const nextConfig = {};
// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
locale: {
source: 'en',
targets: ['es'],
},
};
// Wrap Next.js config with Replexica Compiler
export default replexica.next(
replexicaConfig,
nextConfig,
);
You can read the quickstart guide and also clearly documented stuff on what is used under the hood.
They have 1.1k stars on GitHub and are built on TypeScript. A project that will save you a lot of time!
11. DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML.
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML, and SVG. We as developers need it for our apps to keep them secure enough.
DOMPurify sanitizes HTML and prevents XSS attacks.
You can feed DOMPurify with a string full of dirty HTML and it will return a string (unless configured otherwise) with clean HTML.
DOMPurify will strip out everything that contains dangerous HTML and thereby prevent XSS attacks and other nastiness. It's also damn bloody fast.
They use the technologies the browser provides and turn them into an XSS filter. The faster your browser, the faster DOMPurify will be.
DOMPurify is written in JavaScript and works in all modern browsers. It doesn't break on MSIE or other legacy browsers.
Get started with the following npm command.
npm install dompurify
npm install jsdom
// or use the unminified development version
<script type="text/javascript" src="src/purify.js"></script>
This is how you can use this.
const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');
const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);
const clean = DOMPurify.sanitize('<b>hello there</b>');
If you run into problems, please refer to docs. They have documented running it using a script or on the server side.
You can see some of the purification samples and see the live demo.
Another useful alternative I've found is validator.js.
They have 13k+ Stars on GitHub and are used by 340k+ developers which makes them ultra credible.
12. Quivr - your GenAI Second Brain.
Quivr, your second brain, utilizes the power of GenerativeAI to be your personal assistant! Think of it as Obsidian, but turbocharged with AI capabilities.
You can read the installation guide.
You can read the docs and see the demo video.
They could provide a better free tier plan but it's more than enough to test things on your end.
It has 34k+ Stars on GitHub with 220+ releases which means they're constantly improving.
13. Appsmith - Platform to build admin panels, internal tools, and dashboards.
Admin panels and dashboards are some of the common parts of any software idea (in most cases) and I've tried to build it from scratch which is a lot of pain with unnecessary hard work.
For starters, watch this YouTube video that explains Appsmith in 100 seconds.
They provide Drag and drop widgets to build UI.
You can use 45+ customizable widgets to create beautiful responsive UI in minutes without writing a single line of HTML/CSS. Find the complete list of widgets.
Appsmith enables writing JavaScript code almost everywhere on the GUI inside widget properties, events listeners, queries, and other settings. Appsmith supports writing single-line code within {{ }} and interprets anything written between the brackets as a JavaScript expression.
/*Filter the data array received from a query*/
{{ QueryName.data.filter((row) => row.id > 5 ) }}
or
{{
storeValue("userID", 42);
console.log(appsmith.store.userID);
showAlert("userID saved");
}}
You need to use Immediately Invoked Function Expression (IIFE) to write multiple lines.
For instance, the invalid and valid code.
// invalid code
/*Call a query to fetch the results and filter the data*/
{{
const array = QueryName.data;
const filterArray = array.filter((row) => row.id > 5);
return filterArray;
}}
/* Check the selected option and return the value*/
{{
if (Dropdown.selectedOptionValue === "1") {
return "Option 1";
} else {
return "Option 2";
}
}}
// valid code
/* Call a query and then manipulate its result */
{{
(function() {
const array = QueryName.data;
const filterArray = array.filter((row) => row.id > 5);
return filterArray;
})()
}}
/* Verify the selected option and return the value*/
{{
(function() {
if (Dropdown.selectedOptionValue === "1") {
return "Option 1";
} else {
return "Option 2";
}
})()
}}
You can create anything from simple CRUD apps to complicated multi-step workflows with a few simple steps:
Integrate with a database or API. Appsmith supports the most popular databases and REST APIs.
Use built-in widgets to build your app layout.
Express your business logic using queries and JavaScript anywhere in the editor.
Appsmith supports version control using Git to build apps in collaboration using branches to track and roll back changes. Deploy the app and share it :)
You can read the docs and how to guides such as how you can connect it to Local Datasource or how to integrate with third-party tools.
You can self-host or use the cloud. They also provide 20+ templates so you can quickly get started. Some of the useful ones are:
Appsmith has 32k+ stars on GitHub with 200+ releases.
14. Apitable - API-oriented low-code platform for building collaborative apps.
APITable is an API-oriented low-code platform for building collaborative apps and says that it's better than all other Airtable open-source alternatives.
There are a lot of cool features such as:
- Realtime collab.
- You can generate an automatic form.
- Unlimited cross-table links.
- API first panel.
- Powerful row/column capabilities.
You can read the complete list of features.
You can try out apitable and see the demo of this project at live Gitpod demo of apitable.
You can also read the installation guide to install APITable in your local or cloud computing environment.
15. Chat UI Kit React - Build your chat UI with React in minutes.
The Chat UI Kit by Chatscope is an open-source UI toolkit for developing web chat applications.
Even though the project is not widely used, the features are useful for beginners just checking out the project.
Get started with the following npm command.
npm install @chatscope/chat-ui-kit-react
This is how you can create a GUI.
import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';
<div style={{ position:"relative", height: "500px" }}>
<MainContainer>
<ChatContainer>
<MessageList>
<Message model={{
message: "Hello my friend",
sentTime: "just now",
sender: "Joe"
}} />
</MessageList>
<MessageInput placeholder="Type message here" />
</ChatContainer>
</MainContainer>
</div>
You can read the docs.
More detailed documentation is present in the storybook.
It provides some handy components like TypingIndicator, Multiline Incoming, and many more.
I know some of you prefer a blog to understand the whole structure, so you can read How to Integrate ChatGPT with React by Rollbar that uses Chat UI Kit React.
Some of the demos that you can see:
- Chatbot UI
- Chat Friends - Check this out!
They have 1.2k stars on GitHub.
16. NPM Copilot - CLI tool for Next.js that can analyze logs in real-time.
It is a command-line tool that uses OpenAI's GPT-3 language model to provide suggestions for fixing errors in your code.
The CLI tool detects the project type and package manager being used in the current directory.
It then runs the appropriate development server command (e.g., npm run dev, yarn run dev, pnpm run dev) and listens for logs generated by the running application.
When an error is encountered, the CLI tool provides suggestions for error fixes in real-time.
Get started by installing the npm-copilot package with the following npm command.
npm install -g npm-copilot
The CLI tool will begin monitoring the logs generated by the Next.js application and provide suggestions for error fixes in real-time.
You can use this command to use it in the project.
npm-copilot
They have 354 stars on GitHub and support Nextjs, React, Angular, and Vue.js.
17. reor - Self-organizing AI note-taking app.
This is one of the most exciting projects (in terms of concept) that I've seen so far, especially because it runs models locally.
Reor is an AI-powered desktop note-taking app, it automatically links related notes, answers questions on your notes, and provides semantic search.
Everything is stored locally and you can edit your notes with an Obsidian-like markdown editor. The project hypothesizes that AI tools for thought should run models locally by default.
Reor stands on the shoulders of the giants Ollama, Transformers.js & LanceDB to enable both LLMs and embedding models to run locally. Connecting to OpenAI or OpenAI-compatible APIs like Oobabooga is also supported.
🎯 How can it possibly be
self-organizing?
a. Every note you write is chunked and embedded into an internal vector database.
b. Related notes are connected automatically via vector similarity.
c. LLM-powered Q&A does RAG on the corpus of notes.
d. Everything can be searched semantically.
You can watch the demo here!
One way to think about Reor is as a RAG app with two generators: the LLM and the human. In Q&A mode, the LLM is fed retrieved-context from the corpus to help answer a query.
Similarly, in editor mode, the human can toggle the sidebar to reveal related notes "retrieved" from the corpus. This is quite a powerful way of "augmenting" your thoughts by cross-referencing ideas in a current note against related ideas from your corpus.
You can read the docs and download from the website. Mac, Linux & Windows are all supported.
They have also provided starter guides so they can help you get started.
They have 6.7k stars on GitHub and are built using TypeScript.
18. Rowy - Low-code backend platform.
Manage your database on a spreadsheet UI and build powerful backend cloud functions, scalably without leaving your browser. Start like no-code, and extend with code using rowy.
There are many use cases but I'm not covering otherwise this will be too long. All the how-to guides and more are present in the docs.
It works with all the major frameworks and any no-code tools like Bubble and Flutterflow.
You can read the docs and check the live demo.
Also recommend watching the product walkthrough!
They have 5.9k stars on GitHub.
19. React Cosmos - Sandbox for developing and testing UI components in isolation.
React Cosmos is a powerful tool for developing and testing UI components in isolation. It allows you to focus on one component at a time, resulting in faster iteration and higher-quality components.
You can build a component library that keeps your project organized and friendly to new contributors. Its sandbox environment and component library capabilities optimize your workflow to help you deliver exceptional UI experiences.
You can install it using this npm command for a nextjs project. You can also use it with Vite, React native, or even a custom bundler.
npm i -D react-cosmos react-cosmos-next
It has all the features to make it a standard.
You can read the docs and check the live demo.
They have 8.2k stars on GitHub.
20. Hyper - a terminal built on web technologies.
Let's be honest, most of the terminals are very bad in terms of interface and they just do the work.
Warp is a good one but it's not available for Windows and I've been using Hyper for almost 3 years.
Hyper was created as a beautiful and extensible experience for command-line interface users, built on open web standards.
I've configured it based on my preference. If you want, you can check the config in this secret gist. I only use a single plugin which is called hyperpower.
It lets me use Linux commands on Windows which I did years ago when I was starting.
Many community members use Hyper so there is an extensive collection of 239+ themes, plugins, and resources. You can also find it on the website.
You can find info about all the properties and additional APIs on the website as well.
Hyper has 43k+ stars on GitHub which was kind of shocking to me.
21. Remotion - make videos using code.
Create real MP4 videos using React, and scale your video production using server-side rendering and parametrization.
Get started with the following command.
npx create-video@latest
It gives you a frame number and a blank canvas where you can render anything you want using React.
This is an example React component that renders the current frame as text.
import { AbsoluteFill, useCurrentFrame } from "remotion";
export const MyComposition = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill
style={{
justifyContent: "center",
alignItems: "center",
fontSize: 100,
backgroundColor: "white",
}}
>
The current frame is {frame}.
</AbsoluteFill>
);
};
You can read the docs including the fundamentals.
Check the list of resources including templates, SAAS Starter kits, effects, examples, and even full projects.
Also, check demo videos created during products and campaigns. By the way, the remotion team has been famous for making a GitHub Wrapped for the last 2 years.
You can watch the tutorial demo by Fireship, their videos are just too awesome :)
They have 19.5k+ stars on GitHub and are used by 2k+ developers.
That's all. I hope you found something good enough.
You could use these as an inspiration to build something greater.
Have a great day! Till next time.
By the way, I don't ever use AI to write because I don't want you to read AI content. Would appreciate your follow on Twitter.
You can join my community for developers and tech writers at dub.sh/opensouls.
| If you loved this, please follow me for more :) |
  
|
|---|
Follow Copilotkit for more content like this.
Posted on October 1, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related