https://github.com/dodomatrix/solid-cursor-chat
<CursorChat /> SolidJS Component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere.
https://github.com/dodomatrix/solid-cursor-chat
cursor-chat presencejs solidjs
Last synced: 2 months ago
JSON representation
<CursorChat /> SolidJS Component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere.
- Host: GitHub
- URL: https://github.com/dodomatrix/solid-cursor-chat
- Owner: dodomatrix
- License: mit
- Created: 2022-02-09T12:44:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-02T15:16:12.000Z (over 4 years ago)
- Last Synced: 2025-08-30T10:56:28.866Z (10 months ago)
- Topics: cursor-chat, presencejs, solidjs
- Language: TypeScript
- Homepage:
- Size: 656 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# solid-cursor-chat
## 🧬 Introduction
A SolidJS component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere. based on [Presencejs](https://presence.yomo.run).
- Press `Ctrl + /` to bring up the input box
- Press `ESC` to close the input box
## 🤹🏻♀️ Quick Start
### Installation
by `npm`:
```shell
$ npm i --save solid-cursor-chat
```
by `yarn`:
```shell
$ yarn add solid-cursor-chat
```
by `pnpm`:
```shell
$ pnpm i solid-cursor-chat
```
### Request free dev/test account
Login with your Github account on `https://presencejs.yomo.run`, will get a free `app_id` and `app_secret`
then, add serverless functionality to [netlify](https://docs.netlify.com/functions/build-with-javascript):
```javascript
// example/functions/presence-auth.js
const fetch = require('node-fetch');
exports.handler = async function (event, context) {
if (event.httpMethod === 'GET') {
try {
const response = await fetch('https://prsc.yomo.dev/api/v1/auth', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
app_id: process.env.APP_ID,
app_secret: process.env.APP_SECRET,
}),
});
const data = await response.json();
const token = data.data;
if (token) {
return {
statusCode: 200,
body: JSON.stringify(token),
};
} else {
return {
statusCode: 400,
body: JSON.stringify({ msg: data.message }),
};
}
} catch (error) {
return {
statusCode: 500,
body: JSON.stringify({ msg: error.message }),
};
}
} else {
return {
statusCode: 400,
body: JSON.stringify({ msg: '' }),
};
}
};
```
Response data:
```json
{
"token": "eyJhbGciOiJIUzI1..."
}
```
### Integrate to your project
```javascript
import { render } from 'solid-js/web';
import CursorChat from 'solid-cursor-chat';
// Import theme styles
// import 'solid-cursor-chat/dist/esm/xinghuang.css';
import 'solid-cursor-chat/dist/esm/maolv.css';
const App = () => {
return (
);
};
render(App, document.getElementById('root'));
```
- `presenceURL: string`: to set the YoMo's service address.
- `presenceAuthEndpoint: string`: to set api for getting access token
- `room?: string`: to set room.
- `showLatency?: boolean`: to show connected mesh server and the end-to-end latency.
- `avatar?: string`: to set avatar.
- `name?: string`: to set name.
## LICENSE
