Search

Note: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.
### OpenAI
```ts
import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
  messages: [
    { role: "user", content: "Say hello in a creative way" },

### Widget Integration
- Each tool specifies `openai/outputTemplate` in metadata
- Widgets automatically render based on structured content
- Consistent styling across all clothing-related widgets
1. **Cloudinary upload fails**: Check environment variables
2. **No outfit suggestions**: Ensure both tops and bottoms are in closet
3. **Widget not displaying**: Verify `openai/outputTemplate` metadata
### Debug Tips

- All widgets use the `useToolOutput` hook to access structured data
- Theme support via `useTheme` hook (light/dark mode)
- Interactive actions send follow-up messages to ChatGPT via `getOpenAI().sendFollowUpMessage()`
### Styling

- Displays a single wardrobe item with image and category
- Uses inline styles for consistent appearance
- Accesses data via `globalThis.openai?.toolOutput?.structuredContent`
### 2. MultiItemCard (`/frontend/widgets/components/MultiItemCard.tsx`)
### MCP Integration
- Proper `_meta` configuration with `openai/outputTemplate`
- Structured content matching component expectations
- Error handling for missing data
### Data Access Pattern
- Uses `globalThis.openai?.toolOutput?.structuredContent`
- Direct access to structured data (no hooks needed)
- Matches the original component specifications exactly

export default function OutfitCard() {
  // @ts-ignore
  const sc = (globalThis as any).openai?.toolOutput?.structuredContent;
  const { top, bottom } = sc ?? {};
  if (!top || !bottom) return null;

export default function MultiItemCard() {
  // @ts-ignore
  const items = (globalThis as any).openai?.toolOutput?.structuredContent?.items ?? [];
  if (!items.length) return null;

export default function ItemCard() {
  // @ts-ignore: ChatGPT injects toolOutput
  const sc = (globalThis as any).openai?.toolOutput?.structuredContent;
  const item = sc?.item;
  if (!item) return null;

import type { WeatherOutput } from "../../../shared/types.ts";
import { useTheme, useToolOutput } from "../hooks.ts";
import { getOpenAI } from "../openai-types.ts";
export function WeatherWidget() {
  async function handleRefresh() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: `Refresh weather for ${location}`,
    });
  async function handleChangeLocation() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: "Change weather location",
    });

import type { TodoListOutput, Todo } from "../../../shared/types.ts";
import { useTheme, useToolOutput } from "../hooks.ts";
import { getOpenAI } from "../openai-types.ts";
export function TodoWidget() {
  async function handleAddTodo() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: "Add a new todo item",
    });
  async function handleToggleTodo(todo: Todo) {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: `${todo.completed ? "Mark as incomplete" : "Mark as complete"}: ${todo.text}`,
    });
  async function handleDeleteTodo(todo: Todo) {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: `Delete todo: ${todo.text}`,
    });

import type { CounterOutput } from "../../../shared/types.ts";
import { useTheme, useToolOutput } from "../hooks.ts";
import { getOpenAI } from "../openai-types.ts";
export function CounterWidget() {
  async function handleIncrement() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: `Increment counter by ${step}`,
    });
  async function handleDecrement() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: `Decrement counter by ${step}`,
    });
  async function handleReset() {
    await getOpenAI()?.sendFollowUpMessage({
      prompt: "Reset counter to 0",
    });