If you fork this, you'll need to set OPENAI_API_KEY in your Val Town Secrets.

Readme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/** @jsxImportSource https://esm.sh/react */
import { Canvas } from "https://esm.sh/react-three-fiber";
import { useEffect, useState } from "https://esm.sh/react@18.2.0";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export function WeatherSuggest() {
// const onClick = () => alert("Button clicked!");
const [data, setData] = useState(null);
useEffect(async () => {
const results = await fetch("https://seflless-weatherGPT.web.val.run/data");
const data = await results.json();
console.log(data);
setData(data);
}, []);
console.log(Canvas);
return !data ? <p>Loading...</p> : <p>{data}</p>;
}
export default async function weatherGPT(req: Request) {
const { OpenAI } = await import("npm:openai");
if (new URL(req.url).pathname === "/data") {
return Response.json({
weather: "Sunny",
});
}
return html(`<html><head></head><body><script type="module">
import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";
import { WeatherSuggest } from "https://esm.town/v/seflless/weatherGPT";
let props = {}
hydrateRoot(document, _jsx(WeatherSuggest, props));
</script>
</body>
`);
}
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.