Search

type UnknownObject = Record<string, unknown>;
export interface OpenAiGlobals<
  ToolInput extends UnknownObject = UnknownObject,
  ToolOutput extends UnknownObject = UnknownObject,
}
export interface OpenAIWidgetAPI<
  ToolInput extends UnknownObject = UnknownObject,
  ToolOutput extends UnknownObject = UnknownObject,
  ToolResponseMetadata extends UnknownObject = UnknownObject,
  WidgetState extends UnknownObject = UnknownObject,
> extends OpenAiGlobals<
    ToolInput,
    ToolOutput,
}
export const SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
export interface SetGlobalsEvent
  extends CustomEvent<{ globals: Partial<OpenAiGlobals> }> {
  type: typeof SET_GLOBALS_EVENT_TYPE;
}
declare global {
  interface Window {
    openai: OpenAIWidgetAPI;
  }
}
export function getOpenAI(): OpenAIWidgetAPI | undefined {
  return window.openai;
}

import type { MessageListOutput } from "../../../shared/types.ts";
import { useTheme, useToolOutput } from "../hooks.ts";
import { getOpenAI } from "../openai-types.ts";
export function MessageListWidget() {
  async function handleAddMessage() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: "Add a new message",
    });

import type { MessageDetailOutput } from "../../../shared/types.ts";
import { useTheme, useToolOutput } from "../hooks.ts";
import { getOpenAI } from "../openai-types.ts";
export function MessageDetailWidget() {
  async function handleBackToList() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: "Show me all messages",
    });

/** @jsxImportSource https://esm.sh/react@19 */
import { useCallback, useEffect, useState, useSyncExternalStore } from "https://esm.sh/react@19";
import type { OpenAiGlobals, SetGlobalsEvent } from "./openai-types.ts";
import { getOpenAI, SET_GLOBALS_EVENT_TYPE } from "./openai-types.ts";
type UnknownObject = Record<string, unknown>;
export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(
  key: K,
): OpenAiGlobals[K] {
  return useSyncExternalStore(
    (onChange) => {
      };
    },
    () => window.openai[key],
  );
}
export function useToolOutput<T = UnknownObject>(): T | null {
  return useOpenAiGlobal("toolOutput") as T | null;
}
export function useTheme(): "light" | "dark" {
  return useOpenAiGlobal("theme");
}
  defaultState: T | (() => T),
): readonly [T, (state: React.SetStateAction<T>) => void] {
  const widgetStateFromWindow = useOpenAiGlobal("widgetState") as T | null;
  const [widgetState, _setWidgetState] = useState<T>(() => {
            : stateOrUpdater;
        getOpenAI()?.setWidgetState(newState);
        return newState;
      });

      COUNT(*) AS count
    FROM
      openai_usage,
      params
    WHERE
};
export class OpenAIUsage {
  constructor() {}
  async migrate() {
    await sqlite.batch([`CREATE TABLE IF NOT EXISTS openai_usage (
      id INTEGER PRIMARY KEY,
      user_id TEXT NOT NULL,
  }
  async drop() {
    await sqlite.batch([`DROP TABLE IF EXISTS openai_usage`]);
  }
  async writeUsage(ur: UsageRow) {
    sqlite.execute({
      sql:
        "INSERT INTO openai_usage (user_id, handle, tier, tokens, model) VALUES (?, ?, ?, ?, ?)",
      args: [ur.userId, ur.handle, ur.tier, ur.tokens, ur.model],
    });
    let resp = await sqlite.execute({
      sql: `SELECT count(*) 
FROM openai_usage 
WHERE (
    (model LIKE 'gpt-4%' AND model NOT LIKE '%mini%')

import { OpenAIUsage } from "https://esm.town/v/std/OpenAIUsage";
const client = new OpenAIUsage();
const t0 = performance.now();

# OpenAI Proxy
This OpenAI API proxy injects Val Town's API keys. For usage documentation,
check out https://www.val.town/v/std/openai
Adapted from https://blog.r0b.io/post/creating-a-proxy-with-deno/

import { parseBearerString } from "https://esm.town/v/andreterron/parseBearerString";
import { API_URL } from "https://esm.town/v/std/API_URL?v=5";
import { OpenAIUsage } from "./usage.ts";
const client = new OpenAIUsage();
const allowedPathnames = [
  // Proxy the request
  const url = new URL("." + pathname, "https://api.openai.com");
  url.search = search;
  const headers = new Headers(req.headers);
  headers.set("Host", url.hostname);
  headers.set("Authorization", `Bearer ${Deno.env.get("OPENAI_API_KEY")}`);
  headers.set("OpenAI-Organization", Deno.env.get("OPENAI_API_ORG"));
  const modifiedBody = await limitFreeModel(req, user);
  });
  const openAIRes = await fetch(url, {
    method: req.method,
    headers,
  // Remove internal header
  const res = new Response(openAIRes.body, openAIRes);
  res.headers.delete("openai-organization");
  return res;
}

function widgetMeta(invoking?: string, invoked?: string) {
  return {
    "openai/outputTemplate": WIDGET_URI,
    "openai/toolInvocation/invoking": invoking,
    "openai/toolInvocation/invoked": invoked,
    "openai/widgetAccessible": true,
    "openai/resultCanProduceWidget": true,
  } as const;
}
          _meta: {
            ...widgetMeta(),
            "openai/widgetCSP": {
              connect_domains: [baseUrl, "https://esm.sh", "https://cdn.jsdelivr.net"],
              resource_domains: [baseUrl, "https://esm.sh", "https://cdn.jsdelivr.net"],
  _meta: widgetMeta("Loading messages...", "Messages loaded"),
  handler: async (args, ctx) => {
    const subject = ctx.request.params._meta?.["openai/subject"];
    if (!subject) {
      throw new Error("Missing openai/subject in request metadata");
    }
  _meta: widgetMeta("Loading message...", "Message loaded"),
  handler: async ({ id }, ctx) => {
    const subject = ctx.request.params._meta?.["openai/subject"];
    if (!subject) {
      throw new Error("Missing openai/subject in request metadata");
    }
    }
    const subject = ctx.request.params._meta?.["openai/subject"];
    if (!subject) {
      throw new Error("Missing openai/subject in request metadata");
    }

- **Backend**: Hono + MCP Lite + Drizzle ORM + SQLite
- **Widget**: React 19 + TanStack Router + OpenAI App SDK
## Quick Start
## Message Scoping
Messages are automatically scoped using the `openai/subject` field that ChatGPT includes in request metadata. This provides authless data isolation - each subject gets its own message board.
The scoping happens in tool handlers:
```typescript
const subject = ctx.request.params._meta?.["openai/subject"];
const messages = await getMessages(subject);
```
The exact semantics of `openai/subject` are determined by ChatGPT.
## Where do I go from here?