DEV Community

Cover image for 21 React Projects Too Awesome to Ignore
Anmol Baranwal Subscriber for CopilotKit

Posted on • Updated on

21 React Projects Too Awesome to Ignore

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.

Lets go


1. CopilotKit - 10x easier to build AI Copilots.

Image description

 

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 />.

components

Get started with the following npm command.

npm i @copilotkit/react-core @copilotkit/react-ui
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can read the docs and check the demo video.

copilotkit docs

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.

Star CopilotKit

Star CopilotKit ⭐️


2. responsively - modified web browser for 5x faster responsive web development.

responsively

 

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.

all devices at once

✅ Any click, scroll, or navigation you perform on one device will be replicated to all devices in real-time.

responsively

✅ It allows quick context switching by saving your favorite device combinations as Preview Suits to switch between them when you're testing.

context switching

✅ It comes with a large collection of device profiles out of the box. You can also add your own custom devices.

profiles

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.

unified inspector

You can download the desktop app.

download options

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.

Star responsively ⭐️


3. drawdb - intuitive online database design tool and SQL generator.

drawdb

 

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.

features

You can try it in the editor.

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.

Star drawdb ⭐️


4. Tooljet - Low-code platform for building business applications.

tooljet

 

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.

tooljet

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.

workflow

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.

Star ToolJet ⭐️


5. AppFlowy - open source alternative to Notion.

appflowy

 

AppFlowy is an AI-powered secure workspace similar to the notion where you achieve more without losing control of your data.

product

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.

Star AppFlowy ⭐️


6. Flowise - Drag & drop UI to build your customized LLM flow.

flowiseai

 

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!

flowise gif

Get started with the following npm command.

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234
Enter fullscreen mode Exit fullscreen mode

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!"
)}
Enter fullscreen mode Exit fullscreen mode

integrations

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.

scraper

⚡ 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.

webhook

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.

Star Flowise ⭐️


7. ChatFiles - Upload your file and have a conversation with it.

ChatFiles

 

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!

architecture

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.

Star ChatFiles ⭐️


8. MindsDB - The platform for customizing AI from enterprise data.

MindsDB

 

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.

how MindsDB works

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.

use cases

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'; 
Enter fullscreen mode Exit fullscreen mode

chatbot

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.

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.

Star MindsDB ⭐️


9. Twitter Agent - Scrape data from social media and chat with it using Langchain.

twitter agent

 

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.

Star Twitter Agent ⭐️


10. Replexica - AI-powered i18n toolkit for React.

replexica

 

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:

  1. JSON-free Replexica compiler format.
  2. .md files for Markdown content.
  3. 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
Enter fullscreen mode Exit fullscreen mode

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,
);
Enter fullscreen mode Exit fullscreen mode

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!

Star Replexica ⭐️


11. DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML.

DOMPurify

 

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>
Enter fullscreen mode Exit fullscreen mode

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>');
Enter fullscreen mode Exit fullscreen mode

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.

Star DOMPurify ⭐️


12. Quivr - your GenAI Second Brain.

quivr

 

Quivr, your second brain, utilizes the power of GenerativeAI to be your personal assistant! Think of it as Obsidian, but turbocharged with AI capabilities.

stats

You can read the installation guide.

You can read the docs and see the demo video.

quivr demo

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.

Star Quivr ⭐️


13. Appsmith - Platform to build admin panels, internal tools, and dashboards.

appsmith

 

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.

button clicks widgets

validations

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");
}}
Enter fullscreen mode Exit fullscreen mode

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";
      }
   })()
}}
Enter fullscreen mode Exit fullscreen mode

You can create anything from simple CRUD apps to complicated multi-step workflows with a few simple steps:

  1. Integrate with a database or API. Appsmith supports the most popular databases and REST APIs.

  2. Use built-in widgets to build your app layout.

  3. Express your business logic using queries and JavaScript anywhere in the editor.

  4. 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 :)

appsmith

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.

Star Appsmith ⭐️


14. Apitable - API-oriented low-code platform for building collaborative apps.

apitable

 

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.

realtime collab

  • You can generate an automatic form.

form

  • Unlimited cross-table links.

crosstable

  • API first panel.

api first panel

  • Powerful row/column capabilities.

row column

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.

Star Apitable ⭐️


15. Chat UI Kit React - Build your chat UI with React in minutes.

chatscope chat ui kit react

 

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.

features

Get started with the following npm command.

npm install @chatscope/chat-ui-kit-react
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

chat friends demo snapshot

They have 1.2k stars on GitHub.

Star Chat UI Kit React ⭐️


16. NPM Copilot - CLI tool for Next.js that can analyze logs in real-time.

npm copilot

 

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

They have 354 stars on GitHub and support Nextjs, React, Angular, and Vue.js.

Star NPM Copilot ⭐️


17. reor - Self-organizing AI note-taking app.

reor

 

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!

demo

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.

get started guides

They have 6.7k stars on GitHub and are built using TypeScript.

Star reor ⭐️


18. Rowy - Low-code backend platform.

rowy

 

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.

frameoworks

You can read the docs and check the live demo.

live demo

Also recommend watching the product walkthrough!

They have 5.9k stars on GitHub.

Star Rowy ⭐️


19. React Cosmos - Sandbox for developing and testing UI components in isolation.

react cosmos

 

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
Enter fullscreen mode Exit fullscreen mode

It has all the features to make it a standard.

features

You can read the docs and check the live demo.

live demo

They have 8.2k stars on GitHub.

Star React Cosmos ⭐️


20. Hyper - a terminal built on web technologies.

hyper

 

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.

my hyper terminal


my hyper terminal

 

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.

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.

Star Hyper ⭐️


21. Remotion - make videos using code.

remotion

 

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

You can read the docs including the fundamentals.

Check the list of resources including templates, SAAS Starter kits, effects, examples, and even full projects.

video preview of hello world

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.

Star Remotion ⭐️


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 :)
profile of Twitter with username Anmol_Codes profile of GitHub with username Anmol-Baranwal profile of LinkedIn with username Anmol-Baranwal

Follow Copilotkit for more content like this.

Top comments (24)

Collapse
 
nevodavid profile image
Nevo David

Cool list!
CopilotKit is really awesome!

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Yep, Copilotkit reached 10k stars on GitHub too :)

Collapse
 
david-123 profile image
David

Nice list!

Collapse
 
martinbaun profile image
Martin Baun

On Quivr, how do you handle files longer than the token limit?

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Hi Martin, I didn't really need it since I was just testing.

I've attached a possible solution from a Reddit comment.

Image description

Collapse
 
martinbaun profile image
Martin Baun

Ah, thank you for that!

Collapse
 
tony_49855f6a0763c80f5589 profile image
Tony

Liquid syntax error: Variable '{{ if (Dropdown.selectedOptionValue === "1") { return "Option 1"; }' was not properly terminated with regexp: /\}\}/

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

I found the issue after your comment Tony.
I have debugged and fixed it. You can check it out now, thanks!

Collapse
 
uliyahoo profile image
uliyahoo

Nice one Anmol!

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Thanks Uli 🙌

Collapse
 
hardikpalrecha profile image
Hardik Palrecha

Preety good resource guide

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Great list @anmolbaranwal!

Thanks for including CopilotKit!

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Appreciate it, Nathan 🙌

Collapse
 
jeremiah_the_dev_man profile image
Jeremiah

LFG!

Collapse
 
harimanok profile image
Hari Lamichhane

Amazing list. Thank you for taking the time share 🫡

Collapse
 
stuperfyxd profile image
Divyansh Pingle 👾

Awesome share 👏

Some comments may only be visible to logged-in visitors. Sign in to view all comments.