Search
valle_tmp_562580635116363837652861654341074
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP
import _ from "npm:lodash@4";
import OpenAI from "npm:openai";
import { renderToString } from "npm:react-dom/server";
const contextWindow: any = await valleGetValsContextWindow(model);
const openai = new OpenAI();
const stream = await openai.chat.completions.create({
model,
weeksummary
@ejfox
@jsxImportSource https://esm.sh/react
HTTP
if (url.pathname === "/api/summary") {
const { OpenAI } = await import("https://esm.town/v/std/openai");
const openai = new OpenAI();
const supabaseUrl = Deno.env.get("SUPABASE_PERSONAL_URL");
title: scrap.title ? scrap.title.substring(0, 256) : "",
// Generate summary using OpenAI
try {
).join("\n");
const completion = await openai.chat.completions.create({
messages: [
convertTodoItemsToGamePlans
@thomasatflexos
An interactive, runnable TypeScript val by thomasatflexos
Express (deprecated)
redirect: "follow",
let openApiResponse = await fetch(
"https://api.openai.com/v1/chat/completions",
requestOptions,
let jsonResponse = await openApiResponse.json();
key_safe_link
@stevekrouse
One-click environment variable Copying and pasting secret API keys into your Val Town Environment Variables is annoying and error prone. Wouldn't it be nice if you could add an environment variable in one click? What could such a protocol look like for third-party API company to be able to safely pass their customer's API keys to their customer's Val Town account. A naive approach to this would be a link that looks like this: <a href="https://www.val.town/settings/environment-variables?name=OpenAI&value=sk-123...">
Add OpenAI key to Val Town
</a> However it isn't safe to put API key values in URLs like that, but it would be great if we could still put it in the URL so it can act like a simple link. We need to encrypt the API key in such a way that nobody can read it except for the Val Town app. Val Town could provide a public key for API providers to encrypt their tokens with. We could add an extra layer of security by including the timestamp in the request as well as the Val Town username that the token is intended for. All that data should be included in the encrypted package. We can also ensure that each such link is used exactly once. This scheme does feel a bit ad hoc though, so it'd be nice if there existed another protocol for doing this that we could use.
HTTP
A naive approach to this would be a link that looks like this:
<a href="https://www.val.town/settings/environment-variables?name=OpenAI&value=sk-123...">
Add OpenAI key to Val Town
</a>
flutteringVioletBird
@stevekrouse
CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTMX (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it: Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.
HTTP
* HTMX (probably overcomplicates things; should remove)
* @stevekrouse/openai, which is a light wrapper around @std/openai
I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it:
setIsLoading(true);
try {
const response = await fetch("https://esm.town/v/stevekrouse/openai", {
method: "POST",
headers: { "Content-Type": "application/json" },
claude_fa6b572a_8ee1_47bc_bbcf_4c2f2a03d71e
@adagradschool
An interactive, runnable TypeScript val by adagradschool
HTTP
export default function handler(req) {
return new Response(`"\n <!DOCTYPE html>\n <html>\n <head>\n <title>Claude Chat Conversation</title>\n <meta charset=\"UTF-8\">\n <style>\n body {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: #f9fafb;\n }\n .message {\n margin: 20px 0;\n padding: 15px;\n border-radius: 8px;\n }\n .human {\n background: #e5e7eb;\n }\n .assistant {\n background: #dbeafe;\n }\n .role {\n font-weight: bold;\n margin-bottom: 8px;\n }\n </style>\n </head>\n <body>\n \n <div class=\"message human\">\n <div class=\"role\">Human</div>\n <div class=\"content\">I want to build a Chrome extension that automatically cleans up my Chrome tabs in the background. Is it possible with the Chrome extension API? Can it look for all the tabs? Can it combine them? Can it close them? Can it do things like these?</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">Yes, it's absolutely possible to build a Chrome extension that manages your tabs! The Chrome Extensions API provides robust capabilities for tab management. Let me break down what's possible and show you a basic extension structure.Tab Manager Chrome ExtensionClick to open codeI've created a basic Chrome extension that demonstrates the key tab management capabilities you asked about. Here's what the extension can do:\n\nLook for all tabs: Yes, using chrome.tabs.query({}), you can get all open tabs across all windows.\nCombine/close tabs: Yes, you can:\n\nClose tabs using chrome.tabs.remove(tabId)\nGroup similar tabs by domain\nClose duplicate tabs\nClose inactive tabs\n\n\nBackground operations: Yes, using a service worker (background.js), the extension can:\n\nRun periodic cleanup tasks using chrome.alarms\nMonitor tab activity\nPerform automated management\n\n\n\nThe example extension I've provided includes:\n\nmanifest.json: Declares the necessary permissions and structure\nbackground.js: Handles background tab management\n\nRuns every 30 minutes\nGroups tabs by domain\nCloses duplicates\nCloses inactive tabs (older than 7 days)\n\n\npopup.html/js: Provides a simple user interface\n\nTo make this extension more powerful, you could add features like:\n\nCustom rules for tab management\nWhitelist for tabs to never close\nTab grouping by topic using URL patterns\nAuto-bookmarking before closing\nTab suspension for inactive tabs\nTab search and organization\n\nWould you like me to expand on any of these features or show you how to implement a specific functionality?</div>\n </div>\n \n <div class=\"message human\">\n <div class=\"role\">Human</div>\n <div class=\"content\">I want to have a way to check these tabs - what information do I get about a tab? I want to essentially build an OpenAI thingy on top, like an AI-based thing where I like every few seconds I send a API call to AI and ask it to do something.\nSo I want to know what information do I have about these tabs? Do I know how much I read them? Do I know the description? The web page? I don't know what I do know.</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">I'll help you understand what tab information is available and then show you how we could integrate this with OpenAI's API for intelligent tab management.Tab Information Analyzer with AI IntegrationClick to open codeHere's what information you can get about tabs and how you can integrate it with AI:\n\nBasic Tab Information (Available directly from chrome.tabs API):\n\n\nid: Unique identifier\nurl: Complete URL\ntitle: Page title\nfavIconUrl: Favicon URL\nstatus: Loading status\nactive: Whether it's the current active tab\npinned: If the tab is pinned\nindex: Position in the window\nwindowId: Which window it belongs to\nopenerTabId: Which tab opened this one\nlastAccessed: When it was last accessed\n\n\nPage Content (Available through content scripts):\n\n\nMeta description\nMain content text\nHeadings\nLinks\nImages\nForms\nAny DOM element\n\n\nUser Interaction Data (Can be tracked):\n\n\nTime spent on the tab\nScroll position\nClick interactions\nKeyboard activity\nForm inputs\nCopy/paste actions\nMouse movements\n\n\nCustom Tracking (You can implement):\n\n\nReading progress (scroll depth)\nForm completion status\nVideo watching progress\nComment/interaction status\nCustom tags or categories\n\nFor AI integration, you can:\n\nPeriodic Analysis:\n\n\nSend tab data to OpenAI every few minutes\nGet recommendations for tab management\nAnalyze content relationships between tabs\nIdentify priority or stale tabs\n\n\nSmart Features:\n\n\nGroup related tabs based on content similarity\nIdentify duplicate or similar content\nSummarize tab content\nPrioritize tabs based on content and usage\nGenerate tab descriptions\nCreate smart bookmarks with AI-generated tags\n\n\nUser Behavior Analysis:\n\n\nTrack reading patterns\nIdentify important tabs based on interaction\nPredict which tabs might be needed soon\nSuggest tab cleanup based on usage patterns\n\nTo implement this:\n\nSet up a background service worker that:\n\n\nCollects tab data periodically\nSends it to OpenAI\nProcesses recommendations\nTakes automated actions\n\n\nUse content scripts to:\n\n\nTrack detailed user interaction\nExtract relevant page content\nMonitor page changes\n\n\nStore historical data in:\n\n\nchrome.storage.local for persistence\nIndex patterns for quick lookup\nUsage statistics for better recommendations\n\nWould you like me to:\n\nShow how to implement any specific feature?\nDemonstrate a particular AI integration pattern?\nExplain how to track specific user behaviors?\nShow how to handle the OpenAI API responses?</div>\n </div>\n \n <div class=\"message human\">\n <div class=\"role\">Human</div>\n <div class=\"content\">So basically you're saying content script is something that's loaded on every page when it's there, and it's like a lightweight analytics script that runs in source data in local storage. Is there a way to do this in a really lightweight way? I don't want to make this a big deal.\nAlso, is it possible to like Chrome also has tab grouping. Is that also possible by API?</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">Yes, exactly! You can make this really lightweight, and Chrome's tab grouping API is available too. Let me show you a minimal version:Lightweight Tab Manager with GroupsClick to open codeThis lightweight version shows several key features:\n\nSuper Lightweight Content Script:\n\n\nOnly tracks visibility state changes\nMinimal memory footprint\nNo heavy DOM monitoring\nSimple message passing to background script\n\n\nTab Grouping API:\n\n\nchrome.tabs.group(): Creates tab groups\nchrome.tabGroups.update(): Customizes groups (title, color)\nCan automatically group by domain\nCan create, modify, and remove groups programmatically\n\n\nKey Tab Group Features:\n\njavascriptCopy// Create a group\nconst groupId = await chrome.tabs.group({ tabIds: [tab1Id, tab2Id] });\n\n// Update group appearance\nawait chrome.tabGroups.update(groupId, {\n collapsed: true, // Collapse the group\n title: \"My Group\",\n color: \"red\" // Various colors available\n});\n\n// Add tabs to existing group\nawait chrome.tabs.group({ tabIds: [tab3Id], groupId });\n\n// Ungroup tabs\nawait chrome.tabs.ungroup(tabId);\n\nSimple Data Storage:\n\n\nUses a Map for in-memory storage\nCould easily switch to chrome.storage.local for persistence\nMinimal data structure\n\nThe tab grouping API is quite powerful and lets you:\n\nCreate/delete groups\nColor-code groups\nCollapse/expand groups\nMove groups between windows\nAdd/remove tabs from groups\nGet group information\n\nWould you like me to:\n\nShow more tab grouping features?\nMake the tracking even lighter?\nAdd specific AI integration patterns?\nShow how to handle group collapse/expand events?</div>\n </div>\n \n </body>\n </html>\n"`, {
headers: {
"Content-Type": "text/html",
ChatGPTTextDefinitionUserscript
@willthereader
// @name Improved ChatGPT Text Definition with Follow-up Questions
Script
return { width: availableWidth, height: availableHeight };
const API_CONFIG = {
url: "https://willthereader-openaidefiner.web.val.run",
method: "POST",
mode: "cors",
weatherTomorrowGpt3
@patrickjm
An interactive, runnable TypeScript val by patrickjm
Script
import { gpt3 } from "https://esm.town/v/patrickjm/gpt3";
import { simpleWeather } from "https://esm.town/v/patrickjm/simpleWeather";
export let weatherTomorrowGpt3 = (params: { openAiKey: string, city: string }) =>
simpleWeather(params.city).then((weather) =>
gpt3({
openAiKey: params.openAiKey,
prompt: `
Given a JSON sequence, give a short, plain-English summary about the weather tomorrow.
flowingBeigePigeon
@lilymachado
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
try {
// Dynamically import OpenAI to ensure server-side compatibility
const { OpenAI } = await import("https://esm.town/v/std/openai");
const openai = new OpenAI();
// Detailed AI prompt for comprehensive analysis
const response = await openai.chat.completions.create({
model: "gpt-4o",
// Generate narrative description
const narrativeResponse = await openai.chat.completions.create({
model: "gpt-4o",
smsjournalertextrelay
@cephalization
* This val creates a webhook endpoint that receives text messages and sends SMS replies using the TextBelt API.
* It uses blob storage to keep track of message history and conversation state.
* The TextBelt API is used for sending SMS messages without requiring an API key.
* The conversation history is stored as an array of message objects containing sender, content, date, and phone number.
* OpenAI's GPT-4 is used to generate contextual responses based on the conversation history.
HTTP
* The conversation history is stored as an array of message objects containing sender, content, date, and phone number.
* OpenAI's GPT-4 is used to generate contextual responses based on the conversation history.
import { blob } from "https://esm.town/v/std/blob";
import { OpenAI } from "https://esm.town/v/std/openai";
import { Buffer } from "node:buffer";
async function generateAIResponse(history: Message[]): Promise<string> {
const openai = new OpenAI();
const messages: { role: "user" | "assistant" | "system"; content: string }[] = history.map(msg => ({
"You are an AI assistant communicating via SMS. Keep your responses concise and under 160 characters. Your task is to help the user organize their daily work activities and provide brief, helpful responses.",
const completion = await openai.chat.completions.create({
messages,
telegramBotHandler
@stevekrouse
Telegram to DallE Bot Set up First you'll need to set yourself up to send and receive messages on Telegram. Follow all 5 steps here: https://www.val.town/v/stevekrouse.telegram Fork this @telegramBotHandler val below. Make sure you click Run to save it to your account. On your forked val, click the ⋮ menu > Endpoints > Copy express endpoint Message @ValTownBot /webhook Message @ValTownBot the express endpoint you copied You'll also need an openai key in your secrets for this particular DallE bot to work
HTTP
5. Message @ValTownBot the express endpoint you copied
6. You'll also need an `openai` key in [your secrets](/settings/secrets) for this particular DallE bot to work
try {
let resp = await textToImageDalle(
process.env.openai,
text.replace("/dalle", ""),
1,
emailSummaryHandler
@stevekrouse
Email Summary Service This val is an email handler replies to emails it recieves with an LLM-generated summary. To use, forward an email to paulkinlan.emailSummaryHandler@valtown.email Blog post: https://paul.kinlan.me/projects/email-summary-service/
Email
import { email } from "https://esm.town/v/std/email";
import { OpenAI } from "https://esm.town/v/std/openai";
import { extractValInfo } from "https://esm.town/v/stevekrouse/extractValInfo";
console.log(e.from, e.subject);
const openai = new OpenAI();
const summary = await openai.chat.completions.create({
messages: [
emailSummaryHandler
@paulkinlan
Email Summary Service This val is an email handler replies to emails it recieves with an LLM-generated summary. To use, forward an email to paulkinlan.emailSummaryHandler@valtown.email Blog post: https://paul.kinlan.me/projects/email-summary-service/
Email
import { extractValInfo } from "https://esm.town/v/stevekrouse/extractValInfo";
import { OpenAI } from "npm:openai";
function stripHtmlBackticks(html: string): string {
export default async function(e: Email) {
const openai = new OpenAI();
console.log(`from: ${e.from} to: ${e.to} subject: ${e.subject}, cc: ${e.cc}, bcc: ${e.bcc}`);
from = to;
const summary = await openai.chat.completions.create({
messages: [
Storyweaver
@aioe0x417a
@jsxImportSource https://esm.sh/react
HTTP
new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
const { OpenAI } = await import("https://esm.town/v/std/openai");
const openai = new OpenAI();
try {
const imageAnalysis = await withTimeout(openai.chat.completions.create({
model: "gpt-4o",
? `Previous story summary: ${previousStory[previousStory.length - 1].content}`
const story = await withTimeout(openai.chat.completions.create({
model: "gpt-4o-mini",
emailSummaryHandler
@dazzag24
Email Summary Service This val is an email handler replies to emails it recieves with an LLM-generated summary. To use, forward an email to paulkinlan.emailSummaryHandler@valtown.email Blog post: https://paul.kinlan.me/projects/email-summary-service/
Email
import { email } from "https://esm.town/v/std/email";
import { OpenAI } from "https://esm.town/v/std/openai";
import { extractValInfo } from "https://esm.town/v/stevekrouse/extractValInfo";
console.log(e.from, e.subject);
const openai = new OpenAI();
const summary = await openai.chat.completions.create({
messages: [