ibrahimyaacob
ibrahimyaacob6mo ago

hey convex team, i got a really cool

hey convex team, i got a really cool project idea, convex + raycast
5 Replies
Hmza
Hmza6mo ago
Everyday, all day user of raycast here. what are you exactly trying to achieve
ibrahimyaacob
ibrahimyaacobOP6mo ago
hey like i say, to run, functions , search for files and tables
Hmza
Hmza6mo ago
you can use ConvexHttpcClient to create scripts and run those. Or you can create http endpoints too.
ballingt
ballingt6mo ago
A couple months ago I made just the beginning of an example of using the Convex WebSocket client with Raycast to make sure it worked, seems fine!
ballingt
ballingt6mo ago
here's that code
import * as React from "react";
import { api } from "../convex/_generated/api";
import { ConvexProvider, ConvexReactClient, useQuery } from "convex/react";
import { List } from "@raycast/api";

import { WebSocket } from "ws";

const CONVEX_URL = "https://usable-finch-213.convex.cloud";
const client = new ConvexReactClient(CONVEX_URL, { webSocketConstructor: WebSocket });

console.log(WebSocket);

export default function Command() {
return (
<ConvexProvider client={client}>
<App />
</ConvexProvider>
);
}

function App() {
const data = useQuery(api.messages.list, {}) || [];

return (
<List>
<List.Item title="asdf" />
{data.map((message) => (
<List.Item title={message.body} />
))}
</List>
);
}
import * as React from "react";
import { api } from "../convex/_generated/api";
import { ConvexProvider, ConvexReactClient, useQuery } from "convex/react";
import { List } from "@raycast/api";

import { WebSocket } from "ws";

const CONVEX_URL = "https://usable-finch-213.convex.cloud";
const client = new ConvexReactClient(CONVEX_URL, { webSocketConstructor: WebSocket });

console.log(WebSocket);

export default function Command() {
return (
<ConvexProvider client={client}>
<App />
</ConvexProvider>
);
}

function App() {
const data = useQuery(api.messages.list, {}) || [];

return (
<List>
<List.Item title="asdf" />
{data.map((message) => (
<List.Item title={message.body} />
))}
</List>
);
}
{
"$schema": "https://www.raycast.com/schemas/extension.json",
"name": "testing-convex",
"title": "Testing Convex",
"description": "Live-updates data based on Query functions",
"icon": "extension-icon.png",
"author": "thomas_ballinger",
"license": "MIT",
"commands": [
{
"name": "show-convex-data",
"title": "Show Convex Data",
"description": "asdf",
"mode": "view"
}
],
"dependencies": {
"@raycast/api": "^1.81.0",
"@raycast/utils": "^1.16.3",
"convex": "^1.14.1",
"react": "^18.3.1",
"ws": "^8.18.0"
},
"devDependencies": {
"@raycast/eslint-config": "^1.0.8",
"@types/node": "20.8.10",
"@types/react": "18.3.3",
"eslint": "^8.57.0",
"prettier": "^3.3.3",
"typescript": "^5.4.5"
},
"scripts": {
"build": "ray build -e dist",
"dev": "ray develop",
"fix-lint": "ray lint --fix",
"lint": "ray lint",
"prepublishOnly": "echo \"\\n\\nIt seems like you are trying to publish the Raycast extension to npm.\\n\\nIf you did intend to publish it to npm, remove the \\`prepublishOnly\\` script and rerun \\`npm publish\\` again.\\nIf you wanted to publish it to the Raycast Store instead, use \\`npm run publish\\` instead.\\n\\n\" && exit 1",
"publish": "npx @raycast/api@latest publish"
}
}
{
"$schema": "https://www.raycast.com/schemas/extension.json",
"name": "testing-convex",
"title": "Testing Convex",
"description": "Live-updates data based on Query functions",
"icon": "extension-icon.png",
"author": "thomas_ballinger",
"license": "MIT",
"commands": [
{
"name": "show-convex-data",
"title": "Show Convex Data",
"description": "asdf",
"mode": "view"
}
],
"dependencies": {
"@raycast/api": "^1.81.0",
"@raycast/utils": "^1.16.3",
"convex": "^1.14.1",
"react": "^18.3.1",
"ws": "^8.18.0"
},
"devDependencies": {
"@raycast/eslint-config": "^1.0.8",
"@types/node": "20.8.10",
"@types/react": "18.3.3",
"eslint": "^8.57.0",
"prettier": "^3.3.3",
"typescript": "^5.4.5"
},
"scripts": {
"build": "ray build -e dist",
"dev": "ray develop",
"fix-lint": "ray lint --fix",
"lint": "ray lint",
"prepublishOnly": "echo \"\\n\\nIt seems like you are trying to publish the Raycast extension to npm.\\n\\nIf you did intend to publish it to npm, remove the \\`prepublishOnly\\` script and rerun \\`npm publish\\` again.\\nIf you wanted to publish it to the Raycast Store instead, use \\`npm run publish\\` instead.\\n\\n\" && exit 1",
"publish": "npx @raycast/api@latest publish"
}
}
(I followed the raycast guide, these are the main files I had to change)

Did you find this page helpful?