Search

valleGetValsContextWindow

@roadlabs

An interactive, runnable TypeScript val by roadlabs

Script

type: "http",

prompt: "Generate a val that uses React to render HTML",

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

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

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

prompt: null,

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export const preactExample = (request: Request) =>

new Response(render(<div>Test {1 + 1}</div>), {

type: "http",

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

md_links_resolver

@argimko

I have some MD-text with links that does HTTP-redirects. I need app that replace all links with its origins.

HTTP

copyToClipboard,

handlePaste,

function client() {

const RootComponent = {

setup() {

const app = createApp(RootComponent);

app.mount("#root");

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

// Handle link resolution endpoint

kanbanTodoList

@stevekrouse

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

HTTP

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

import {

Droppable,

} from "https://esm.sh/react-beautiful-dnd@13.1.1?deps=react@18.2.0,react-dom@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";

function TaskBoard() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<TaskBoard />);

if (typeof document !== "undefined") {

client();

export default async function server(request: Request): Promise<Response> {

wasmBlobHost

@maxm

WASM Binary Host https://maxm-wasmblobhost.web.val.run/ Where should you host your WASM blobs to use in vals? Host them here! Upload with curl: curl -X POST -H "Content-Type: application/wasm" \ --data-binary @main.wasm https://maxm-wasmBlobHost.web.val.run

HTTP

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

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=27";

import { blob } from "https://esm.town/v/std/blob?v=12";

import { createHash } from "node:crypto";

import base32Encode from "npm:base32-encode";

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

const { author, name } = extractValInfo(import.meta.url);

const WASM_BLOB_PREFIX = `${author}-${name}-wasm-wasm-blob-v1-`;

hnCloneOAuth

@yawnxyz

An interactive, runnable TypeScript val by yawnxyz

Script

case 'github':

this.oauthServices.github = new GitHub(config.clientId, config.clientSecret);

break;

case 'google':

this.oauthServices.google = new Google(config.clientId, config.clientSecret, config.redirectUri);

break;

// OAuth routes

for (const [service, oauthClient] of Object.entries(this.oauthServices)) {

app.get(`/auth/${service}`, async (c) => {

console.log(`Redirect URI for ${service}:`, `[${this.config.services[service].redirectUri}]`);

const url = await oauthClient.createAuthorizationURL(state, codeVerifier, {

scopes: ["profile", "email"]

try {

const tokens = await oauthClient.validateAuthorizationCode(code, codeVerifier);

const userInfoResponse = await fetch(this.config.services[service].userInfoUrl, {

notUberMapComponent

@vawogbemi

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

Script

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

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server?deps=react@18.2.0,react-dom@18.2.0";

import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";

const GOOGLE_MAPS_API_KEY = "AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U";

getValTownTrpc

@pomdtr

// Forked from @easrng.getValTownTrpc

Script

export const getValTownTrpc = (async () => {

const { httpLink, createTRPCProxyClient } = await import("npm:@trpc/client");

return createTRPCProxyClient({

links: [

httpLink({

chatGPTPlugin

@stevekrouse

ChatGPT Plugin for Val Town Run code on Val Town from ChatGPT. Usage I haven't been able to get it to do very useful things yet. It certainly can evaluate simple JS code: It would be awesome if it knew how to use other APIs and make fetch calls to them, but it has been failing at that . Limitations This plugin currently only has unauthenticated access to POST /v1/eval, which basically means that all it can do is evaluate JavaScript or TypeScript. In theory it could refer to any existing vals in Val Town, but it wouldn't know about those unless you told it. Future directions Once we have more robust APIs to search for existing vals, this plugin could be WAY more valuable! In theory GPT4 could first search for vals to do a certain task and then if it finds one it could then write code based on that val. In practice however, that might require too many steps for poor GPT. We might need to use some sort of agent or langchain thing if we wanted that sort of behavior. Adding authentication could also enable it to make requests using your secrets and private vals and create new vals for you. However I am dubious that this would actually be practically useful. Installation Select GPT-4 (requires ChatGPT Plus) Click No plugins enabled Click "Install an unverified plugin" or "Develop your own plugin" (I'm not sure the difference) Paste in this val's express endpoint https://stevekrouse-chatGPTPlugin.express.val.run Click through the prompts until it's installed

Express (deprecated)

"description_for_model": `Val Town is a social programming environment.

Vals are JavaScript & TypeScript code.

They run server-side on Deno.

\`fetch\` is in the environment to access any PUBLIC real-time APIs or data feeds.

Answer any questions about times after your cut off date by querying PUBLIC APIs.

web_cmp59EgUEU

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

const explosion = document.createElement('div');

explosion.className = 'explosion';

explosion.style.left = e.clientX + 'px';

explosion.style.top = e.clientY + 'px';

explosion.style.width = '10px';

explosion.style.height = '10px';

testVtClient

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

export const testVtClient = (async () => {

const { createApiClient } = await import(

"https://esm.sh/valtown-zod-client@0.0.7"

const apiClient = createApiClient("https://api.val.town");

const params = {

params: { username: "nbbaier", val_name: "hello" },

return apiClient.getV1aliasUsernameVal_name(params);

useTypewriter

@jxnblk

// React hook for creating a typewriter effect

Script

// React hook for creating a typewriter effect

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

import { useEffect, useRef, useState } from "https://esm.sh/react";

const rand = (min, max) => Math.floor(Math.random() * (max - min) + min);

invoice_basic_theme

@pomdtr

@jsxImportSource npm:preact

Script

/** @jsxImportSource npm:preact */

import { RenderFunc } from "https://esm.town/v/pomdtr/invoice_schema";

import clsx from "npm:clsx";

import { render as preactRender } from "npm:preact-render-to-string";

export const render: RenderFunc = ({ title, table, to, from, details }) => {

return preactRender(

<html>

status

@pomdtr

Uptime Status Page This is the status page for the data generated by this uptime cron: @stevekrouse/uptime

HTTP

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

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { html } from "https://esm.town/v/stevekrouse/html";

import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";

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

function StatusRow({ rows }) {

codingcanvas

@roadlabs

VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!

HTTP

import valledrawclient from "https://esm.town/v/janpaul123/valledrawclient";

export default valledrawclient({

iframeSrc: "https://roadlabs-myvalle.web.val.run",