TL;DR
I have harvested the finest React components you can use to build a powerful web app.
Each has its own flavor.
Don’t forget to show your support π
Now, let’s gobble up this code! π½οΈ
1. CopilotPortal: Embed an Actionable GPT-Chatbot Into Your web-app.
Insert a GPT-powered chatbot into your react app.
Can integrate and RAG with cloud & app state in realtime.
Takes a few lines of code to embed.
import "@copilotkit/react-ui/styles.css";
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";
export default function App(): JSX.Element {
return (
<CopilotProvider chatApiEndpoint="https://dev.to/api/copilotkit/chat">
<CopilotSidebarUIProvider>
<YourContent />
CopilotSidebarUIProvider>
CopilotProvider>
);
}
2. ClickVote – Like, Upvote, And Review Any Context
Easily Add Upvotes, Likes and Reviews into Your Web-App.
Simple react code for adding these components.
import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';
<ClickVoteProvider>
<ClickVoteComponent id={CONTEXT} voteTo={ID}>
{(props) => <LikeStyle {...props} />}
ClickVoteComponent>
ClickVoteProvider>
3. React Flow – The best way to create draggable workflows!
A React component tailor-made for constructing node-based editors and interactive diagrams.
Highly customizable, it offers drag-and-drop capabilities for efficient workflow creation.
import ReactFlow, {
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from 'reactflow';
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<Background />
ReactFlow>
4. CopilotTextarea – AI-powered Writing in React Apps
A drop-in replacement for any react
