chocolateCanid

Public

Readme

ChatGPT Implemented in Val Town

Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events.

Code

HTTP

/** @jsxImportSource https://esm.sh/react */

import { OpenAI } from "https://esm.town/v/std/openai";

import { Hono } from "npm:hono@3";

import { renderToString } from "npm:react-dom/server";

const openai = new OpenAI();

const jsxResponse = (jsx) => {

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

};

const clientCode = () => {

document.getElementById("input").addEventListener("submit", async function(event) {

event.preventDefault();

const msgParent = document.createElement("div");

msgParent.className = "flex justify-end";

document.querySelector(".messages").appendChild(msgParent);

const msgDiv = document.createElement("div");

msgDiv.className = "rounded-lg p-2 m-2 max-w-xl bg-blue-500 text-white";

msgDiv.textContent = event.target.message.value;

msgParent.appendChild(msgDiv);

// Clear the form input

this.reset();

const responseDiv = document.createElement("pre");

responseDiv.className = "p-2 m-2 max-w-xl bg-gray-300 text-black rounded-lg whitespace-pre-wrap font-sans";

document.querySelector(".messages").appendChild(responseDiv);

const input = document.getElementById("input");

// Post the message so we can deal with large text data.

try {

await fetch(`/post-message?threadId=${input.getAttribute("data-thread-id")}`, {

method: "post",

body: msgDiv.textContent,

Val Town is a social website to write and deploy JavaScript.

Build APIs and schedule functions from your browser.

Comments

Nobody has commented on this val yet: be the first!

Updated: June 14, 2024