Search results for "react client side"

valTownBadgeSVG

@jxnblk

SVG Val Town badge image service

0

HTTP

/** @jsxImportSource npm:react */

import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";

import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";

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

const width = 160;

getVectorStoreBuilder

@bluemsn

An interactive, runnable TypeScript val by bluemsn

0

Script

await import("npm:dotenv");

const { PineconeClient } = await import(

"npm:@pinecone-database/pinecone"

const client = new PineconeClient();

await client.init({

apiKey: process.env.PINECONE,

environment: "asia-southeast1-gcp-free",

const pineconeIndex = client.Index("langchain-valtown");

const { PineconeStore } = await import(

"npm:langchain/vectorstores/pinecone"

// PineconeStore.fromDocuments() gives out PineClient upsert error

return await PineconeStore.fromExistingIndex(model, {

deadBlackTurkey

@oijoijcoiejoijce

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!

0

HTTP

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

export default valledrawclient({

iframeSrc: "https://oijoijcoiejoijce-valle.web.val.run",

automergeToJson

@pvh

set up Automerge's internal wasm guts manually

1

0

HTTP (deprecated)

import { BrowserWebSocketClientAdapter } from "npm:@automerge/automerge-repo-network-websocket";

import { isValidAutomergeUrl, Repo } from "npm:@automerge/automerge-repo/slim";

/* set up Automerge's internal wasm guts manually */

if (!isValidAutomergeUrl("automerge:" + docId)) {

return Response.error();

const repo = new Repo({ network: [new BrowserWebSocketClientAdapter("wss://sync.automerge.org")] });

const handle = repo.find(docId);

const contents = await handle.doc();

staticWordle

@stevekrouse

Clone of @maxm/staticChess but for Wordle. Every letter is a link. The game state is stored in the URL bar. You could do silly things like playing collaborative Wordle with your friends by trading links back and forth. Or undo any mistakes by clicking the back button. I also make it easy to generate a new game from any of your current game's guesses – to send to a friend. They key to these static games like this one and @maxm/staticChess is to figure out: a representation for your game state (the Game type ) how to encode/decode your game state into the URL ( base64-encoding JSON ) how to render your game state into HTML ( looping over guesses and making divs ) placing the links into your HTML in the right spots (on my on-screen keyboard ) prettify with CSS (for guesses and the keyboard )

6

HTTP

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

import { render } from "https://deno.land/x/resvg_wasm/mod.ts";

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

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

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

const GREEN = "#6aaa64";

const YELLOW = "#c9b458";

duckdbExample

@hamilton

DuckDB DuckDB works on Val Town, with only one small tweak! We're basically using DuckDB in the same way you'd use it with a browser - using the WASM package with its dependencies fetched from jsdelivr . The only trick is to create the worker ourselves rather than using duckdb.createWorker . DuckDB's built-in createWorker method doesn't specify a worker type, which causes type to default to classic , and Deno (our runtime) doesn't support classic workers.

1

0

Script

const duckdb = await import(

// "https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1-dev234.0/+esm"

"https://cdn.jsdelivr.net/npm/@motherduck/wasm-client/+esm"

const bundles = duckdb.getJsDelivrBundles();

const bundle = await duckdb.selectBundle(bundles);

sqliteWasm

@postpostscript

An interactive, runnable TypeScript val by postpostscript

24

0

Script

import { DB } from "https://deno.land/x/sqlite/mod.ts";

import { type InStatement, sqlite as sqliteAPI } from "https://esm.town/v/std/sqlite";

import { type ResultSet } from "npm:@libsql/client";

export function createSqlite() {

const db = new DB();

ask_ai

@pomdtr

Ask gpt to update a val on your behalf Usage import { askAI } from "https://esm.town/v/pomdtr/ask_ai"; await askAI(`Add jsdoc comments for each exported function of the val @pomdtr/askAi`);

7

1

Script

type: "string";

export function askAI(content: string) {

const client = new OpenAI();

const runner = client.beta.chat.completions.runTools({

model: "gpt-3.5-turbo",

messages: [{ role: "system", content: prompt }, {

slackScout

@danielchalef

Slack scout sends a slack notification every time your keywords are mentioned on Twitter, Hacker News, or Reddit. Get notified whenever you, your company, or topics of interest are mentioned online. Built with Browserbase . Inspired by f5bot.com . Full code tutorial . Getting Started To run Slack Scout, you’ll need a Browserbase API key Slack Webhook URL: setup here Twitter Developer API key Browserbase Browserbase is a developer platform to run, manage, and monitor headless browsers at scale. We’ll use Browserbase to navigate to, and scrape our different news sources. We’ll also use Browserbase’s Proxies to ensure we simulate authentic user interactions across multiple browser sessions . Get started with Browserbase for free here . Twitter We’ve decided to use the Twitter API to include Twitter post results. It costs $100 / month to have a Basic Twitter Developer account. If you decide to use Browserbase, we can lend our token. Comment below for access. Once you have the SLACK_WEBHOOK_URL , BROWSERBASE_API_KEY , and TWITTER_BEARER_TOKEN , input all of these as Val Town Environment Variables . Project created by Sarah Chieng and Alex Phan 💌

0

Cron

### Browserbase

e’s Proxies](https://docs.browserbase.com/features/stealth-mode#proxies-and-residential-ips) to ensure we simulate authentic

Get started with Browserbase for free [here](https://www.browserbase.com/sign-up).

generateNewsletterJsx

@petermillspaugh

Val Town email subscriptions: generate newsletter template Cousin Val to @petermillspaugh/emailSubscription — see docs there.

2

0

Script

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

import { JSX } from "npm:preact";

interface NewsletterJsxParams {

webUrl: string;

libsql_client_hooks_test

@nbbaier

// const client = createClient({

0

Script

import { type InStatement, type ResultSet, sqlite as std_sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { createClient, type TransactionMode } from "npm:@libsql/client";

import { afterBatch, beforeBatch, withLibsqlHooks } from "npm:libsql-client-hooks";

async function new_execute(statement: InStatement, plugins?: SqlitePlugin[]): Promise<ResultSet> {

console.log(res);

// const client = createClient({

// url: Deno.env.get("TURSO_LINGBUZZ_URL"),

// return results;

// const clientWithHooks = withLibsqlHooks(client, [

// logAfterBatch,

// loadAfterBatch,

// await clientWithHooks.batch(["select 'hello'", "select 2+2"]);

newStripeEvent

@stevekrouse

Setup If you want to set up something like this with your Stripe account: Go to you Stripe Webhooks TODO...

1 2

2

HTTP (deprecated)

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

import { micromark } from "https://esm.sh/micromark@3";

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

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

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

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

import Stripe from "npm:stripe";

const stripe = new Stripe(Deno.env.get("stripe_sk_customer_readonly") as string, {

svd

@fal

Stable Video Diffusion link to val - https://www.val.town/v/fal/svd import * as fal from "@fal-ai/serverless-client"; const result = await fal.subscribe("fal-ai/fast-svd", { input: { image_url: "https://storage.googleapis.com/falserverless/model_tests/svd/rocket.png" }, logs: true, onQueueUpdate: (update) => { if (update.status === "IN_PROGRESS") { update.logs.map((log) => log.message).forEach(console.log); } }, }); https://www.fal.ai/models/svd/playground

0

Script

```js

import * as fal from "@fal-ai/serverless-client";

const result = await fal.subscribe("fal-ai/fast-svd", {

import fal from "npm:@fal-ai/serverless-client";

export let sd_video = async (

image_url: string,

upsetSilverLimpet

@danielchalef

Slack scout sends a slack notification every time your keywords are mentioned on Twitter, Hacker News, or Reddit. Get notified whenever you, your company, or topics of interest are mentioned online. Built with Browserbase . Inspired by f5bot.com . Full code tutorial . Getting Started To run Slack Scout, you’ll need a Browserbase API key Slack Webhook URL: setup here Twitter Developer API key Browserbase Browserbase is a developer platform to run, manage, and monitor headless browsers at scale. We’ll use Browserbase to navigate to, and scrape our different news sources. We’ll also use Browserbase’s Proxies to ensure we simulate authentic user interactions across multiple browser sessions . Get started with Browserbase for free here . Twitter We’ve decided to use the Twitter API to include Twitter post results. It costs $100 / month to have a Basic Twitter Developer account. If you decide to use Browserbase, we can lend our token. Comment below for access. Once you have the SLACK_WEBHOOK_URL , BROWSERBASE_API_KEY , and TWITTER_BEARER_TOKEN , input all of these as Val Town Environment Variables . Project created by Sarah Chieng and Alex Phan 💌

0

Cron

### Browserbase

e’s Proxies](https://docs.browserbase.com/features/stealth-mode#proxies-and-residential-ips) to ensure we simulate authentic

Get started with Browserbase for free [here](https://www.browserbase.com/sign-up).

getIpInfo

@redking00

An interactive, runnable TypeScript val by redking00

1

0

Script

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

export const getIpInfo = async (req: express.Request) => {

const ip = (req as any).options.headers["true-client-ip"];

return await (await fetch(`http://ip-api.com/json/${ip}`)).json();