• Stars
    star
    132
  • Rank 274,205 (Top 6 %)
  • Language
    TypeScript
  • Created almost 3 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

<CursorChat /> React Component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere.

@yomo/react-cursor-chat

version license

yomo react-cursor-chat
Cursor Chat Anywhere - Add Figma like cursor chat to your own products | Product Hunt

๐Ÿงฌ Introduction

A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere based on Presencejs.

  • Press / to bring up the input box

๐Ÿคน๐Ÿปโ€โ™€๏ธ Quick Start

Installation

by npm:

$ npm i --save @yomo/react-cursor-chat @yomo/presence

by pnpm:

$ pnpm add @yomo/react-cursor-chat @yomo/presence

Integrate to your project

create .env with:

NEXT_PUBLIC_PRESENCE_URL=https://lo.yomo.dev:8443/v1
NEXT_PUBLIC_PRESENCE_PUBLIC_KEY=YOUR_PK

If you use nextjs, you can use this example:

"use client";

import { createPresence, IPresence } from "@yomo/presence";
import CursorChat from "@yomo/react-cursor-chat";
import "@yomo/react-cursor-chat/dist/style.css";
import { useEffect, useState } from "react";

const App = () => {
  const user = {
    id: Math.random().toString(36).substring(7), // random id (e.g. 5b3f1e)
    name: "Peter Parker",
    avatar: "https://i.pravatar.cc/150?img=3",
  };
  const [presence, setPresence] = useState<Promise<IPresence> | null>(null);
  useEffect(() => {
    (async () => {
      let url =
        process.env.NEXT_PUBLIC_PRESENCE_URL || "https://lo.yomo.dev:8443/v1";
      const presence = createPresence(url, {
        publicKey: process.env.NEXT_PUBLIC_PRESENCE_PUBLIC_KEY,
        id: user.id,
        autoDowngrade: true, // downgrade to websocket automatically if webTransport not work
      });
      setPresence(presence);
    })();
  }, []);

  if (!presence) return <div>Loading...</div>;

  return (
    <div>
      <CursorChat
        presence={presence}
        id={user.id}
        name={user.name}
        avatar={user.avatar}
      />
    </div>
  );
};

export default App;

Be sure to disable React's reactStrictMode to avoid potential issues. In React, you can disable it by removing the <React.StrictMode> component from the root file.

In Next.js, you can disable the strict mode by modifying the next.config.js file. To do so, add the following configuration:

const nextConfig = {
  reactStrictMode: false,
};

Before running the frontend project, you need start the Presence Server: prscd service. The prscd can be download from the release page. Or, you can gh repo clone yomorun/presencejs to get the source code, and run cd prscd && make dev to start in development mode.

๐Ÿ“š Documentation

๐Ÿค Free Hosting for Developers

For the convenience of developers, we provide a free hosting service for Presence Server for concurrent connections less than 1000, request for your own on Allegro Cloud.

More Repositories

1

yomo

๐Ÿฆ– Stateful Serverless Framework for Geo-distributed Edge AI Infra. with function calling support, write once, run on any model.
Go
1,645
star
2

hashids-java

Hashids algorithm v1.0.0 implementation in Java
Java
1,022
star
3

yomo-wasmedge-tensorflow

This application demonstrates how to launch high-performance "serverless" functions from the YoMo framework to process streaming data. The functions are embedded in a WebAssembly VM, WasmEdge, for safety, security, portability, and manageability.
Go
63
star
4

metaverse-workplace-vercel-frontend

Open-source Metaverse Workplace (Virtual Office) with YoMo, Macrometa, Agora.io, Next.js and other Geo-distributed System Tech Stacks.
TypeScript
50
star
5

y3-codec-golang

Golang implementation of Y3 Codec, a fast than real-time TLV based binary codec with low CPU usage
Go
46
star
6

yomo-vhq-backend

An Open-source Virtual HQ Presence Server by Geo-Distributed Cloud Architecture.
Go
17
star
7

y3-codec

๐Ÿงฎ a faster than real-time TLV based binary codec with low CPU usage, reveal advantages of next generation networking like 5G
17
star
8

webtransport-polyfill

WebTransport implementation to fallback to WebSocket if browser does not support it
TypeScript
14
star
9

presencejs

Edge Infra for realtime web applications, geo-distributed architecture.
Go
14
star
10

yomo-flow-ssvm-example

SSVM ๐Ÿ™Œ YoMo: This example demonstrates writing yomo-flow interop with WebAssembly by SSVM
Go
10
star
11

yomo-source-mqtt-broker-starter

Receive MQTT messages and convert them to the YoMo protocol for transmission to YoMo Streaming Function.
Go
10
star
12

metaverse-workplace-cloudflare-frontend

๐Ÿก Metaverse Workplace with fully Geo-distributed edge architecture
TypeScript
10
star
13

cli

Command-line tools for YoMo.
Go
6
star
14

presence.js.org

MDX
5
star
15

debs-2014

Source code of https://blog.yomo.run/posts/debs2014-grand-challenge-by-yomo
Go
4
star
16

yomo-sink-faunadb-example

FaunaDB ๐Ÿ™Œ YoMo: This example demonstrates how to integrate FaunaDB as yomo-sink
Go
4
star
17

yomo-source-mqtt-starter

MQTT-API-Compatible YoMo server, receive MQTT data and transfer data over QUIC, implement real-time IoT analytics by YoMo
Go
4
star
18

yomo-sink-redpanda-example

Connect to Redpanda with Yomo
Go
4
star
19

yomo-presence-backend

The open-source presence server (WebSocket & WebTransport) for @yomo/presencejs โšก๏ธ made realtime web applications edge-aware by YoMo
Go
4
star
20

yomo-sink-tdengine-example

TDEngine ๐Ÿ™Œ YoMo
Go
3
star
21

y3

Golang implementation of Y3 Codec, a fast than real-time TLV based binary codec with low CPU usage
Go
3
star
22

yomo-docs

YoMo Documentation Website
JavaScript
3
star
23

example-noise

Noise Sensor Case
2
star
24

yomo-cluing-shake

Go
2
star
25

yomo-sink-macrometa-example

Connect to Macrometa.com with YoMo
Go
2
star
26

yomo-grafana-datasource

YoMo + Grafana
TypeScript
2
star
27

webtransport

WebTransport server in Golang
2
star
28

GreptimeDB-YoMo

High-performance data ingestion for GreptimeDB using QUIC by YoMo
Go
2
star
29

y3-playground

JavaScript
1
star
30

yomo-sink-tidb-example

Connect to TiDB with Yomo
Go
1
star
31

yomo-source-noise-example

Serverless of YoMo-Source in Noise example
Go
1
star
32

yomo-sink-socketio-server-example

The example of socket.io for yomo-sink which can be used to show the real-time data on a web page.
Go
1
star