### Set up MCP Server

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/use-fullstackrecipes.md

Installs the MCP server for accessing fullstackrecipes. Use -y for automatic setup or specify agents with -a.

```bash
bunx add-mcp https://fullstackrecipes.com/api/mcp -y
```

--------------------------------

### Install Config Schema Setup

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Use this command to set up type-safe environment configuration with better-env.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
```

--------------------------------

### Install Better Auth Setup

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Add user authentication using Better Auth with Drizzle ORM and Neon Postgres. Base setup with email/password authentication.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-setup
```

--------------------------------

### Clone and Install Project

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/stripe-sync/README.md

Use `tiged` to clone the template and `bun install` to install dependencies.

```bash
npx tiged andrelandgraf/fullstackrecipes/templates/stripe-sync#main my-app
cd my-app
bun install
```

--------------------------------

### Install Shiki

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/shiki-code-blocks.md

Install the Shiki library using Bun.

```bash
bun add shiki
```

--------------------------------

### Install Working with Workflows

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Create and run durable workflows with steps, streaming, and agent execution. Covers starting, resuming, and persisting workflow results.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-workflows
```

--------------------------------

### Install Google SDK

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Install the Google provider for the AI SDK.

```bash
bun add @ai-sdk/google
```

--------------------------------

### Clone and Install Project

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/ai-workflow/README.md

Use npx to clone the template, navigate into the directory, and install dependencies with bun.

```bash
npx tiged andrelandgraf/fullstackrecipes/templates/ai-workflow#main my-app
cd my-app
bun install
```

--------------------------------

### Start Development Server

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Run this command to start the development server for testing your chat application.

```bash
bun run dev

```

--------------------------------

### Install Pino Logging Setup

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/pino-logging-setup
```

--------------------------------

### Clone and Install Project

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/auth/README.md

Use this command to clone the template repository and install its dependencies. Ensure you have Node.js and bun installed.

```bash
npx tiged andrelandgraf/fullstackrecipes/templates/auth#main my-app
cd my-app
bun install
```

--------------------------------

### Install Neon + Drizzle Setup

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
```

--------------------------------

### Deploy Project to Vercel

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/nextjs-on-vercel.md

Initiates the deployment of the current project to Vercel. On the first run, this command guides the user through project setup and linking.

```bash
# Deploy to Vercel (creates project on first run)
vercel
```

--------------------------------

### Start Dev Server

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/scripts/ralph/prompt.md

Command to start the development server. Ensure this is running for local testing and interaction with the app.

```bash
bun run dev
```

--------------------------------

### Install Nuqs

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/nuqs-setup.md

Install the nuqs package using Bun.

```bash
bun add nuqs
```

--------------------------------

### Install OpenAI SDK

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Install the OpenAI provider for the AI SDK.

```bash
bun add @ai-sdk/openai
```

--------------------------------

### User Stories Setup

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ralph-loop/SKILL.md

This command initiates the setup for documenting feature requirements as user stories. These JSON files include testable acceptance criteria for AI agents to verify.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/user-stories-setup
```

--------------------------------

### Install better-env

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/config-schema-setup.md

Install the better-env package and its associated skills using Bun.

```bash
bun add better-env
bunx skills add neondatabase/better-env -a cursor -a codex -y
```

--------------------------------

### Clone and Install Project

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/base-app/README.md

Use this command to clone the template repository and install dependencies using Bun.

```bash
npx tiged andrelandgraf/fullstackrecipes/templates/base-app#main my-app
cd my-app
bun install
```

--------------------------------

### Install Pino and pino-pretty

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/pino-logging-setup.md

Install the Pino logger and the pino-pretty package for development-time log formatting.

```bash
bun add pino pino-pretty
```

--------------------------------

### Install Anthropic SDK

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Install the Anthropic provider for the AI SDK.

```bash
bun add @ai-sdk/anthropic
```

--------------------------------

### Add All Shadcn UI Components

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/shadcn-ui-setup.md

Installs all available Shadcn UI components with default settings. Omit `--yes` to customize during installation.

```bash
bunx --bun shadcn@latest add --all --yes
```

--------------------------------

### Install AI SDK and React Package

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Install the core AI SDK and the React integration package using Bun.

```bash
bun add ai @ai-sdk/react
```

--------------------------------

### Install Shadcn Registry Items

Source: https://context7.com/andrelandgraf/fullstackrecipes/llms.txt

Commands to install various utilities from the Shadcn registry using `bunx shadcn@latest add`. Each command installs a specific utility by providing its JSON manifest URL.

```bash
# Install the TypeScript assertion helper
bunx shadcn@latest add https://fullstackrecipes.com/r/assert.json

# Install the Pino logger (pino + pino-pretty + better-env)
bunx shadcn@latest add https://fullstackrecipes.com/r/logger.json

# Install the durable Agent class (ai + @ai-sdk/provider-utils)
bunx shadcn@latest add https://fullstackrecipes.com/r/durable-agent.json

# Install the resumable chat hook (requires WorkflowChatTransport)
bunx shadcn@latest add https://fullstackrecipes.com/r/use-resumable-chat.json

# Install the Ralph automated agent loop (requires Claude Code CLI)
bunx shadcn@latest add https://fullstackrecipes.com/r/ralph.json

# Install workflow stream framing steps
bunx shadcn@latest add https://fullstackrecipes.com/r/workflow-stream.json

```

--------------------------------

### Install better-env and Initialize

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/env-validation.md

Install the `better-env` package and initialize its configuration. The `env:init` script ensures your project is properly linked to your environment variable provider.

```bash
bun add better-env
bun run env:init
```

--------------------------------

### User Sign Up Example

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/better-auth-setup.md

Example of how to use the signUp.email function to register a new user. This function takes email, password, and name as arguments.

```typescript
import { signUp } from "@/lib/auth/client";

await signUp.email({
  email: "user@example.com",
  password: "securepassword",
  name: "John Doe",
});
```

--------------------------------

### Install Workflow Packages

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/workflow-setup.md

Install the necessary workflow and AI packages using Bun. This is the first step in setting up your workflow environment.

```bash
bun add workflow @workflow/ai
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/playwright-tests.md

Install the necessary browser binaries for Playwright to use. Run this command once.

```bash
bunx playwright install chromium
```

--------------------------------

### Install and Log in to Stripe CLI

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/stripe-sync/README.md

Install the Stripe CLI and log in to your Stripe account to manage local webhooks.

```bash
# Install Stripe CLI
brew install stripe/stripe-cli/stripe

# Login to Stripe
stripe login
```

--------------------------------

### Install AI Elements UI Components

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Optionally install AI Elements for pre-built UI components for AI interfaces.

```bash
bunx shadcn@latest add @ai-elements/all
```

--------------------------------

### User Sign In Example

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/better-auth-setup.md

Example of how to use the signIn.email function to log in a user. This function requires the user's email and password.

```typescript
import { signIn } from "@/lib/auth/client";

await signIn.email({
  email: "user@example.com",
  password: "securepassword",
});
```

--------------------------------

### Install Packages for UUID v7

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-chat-persistence.md

Install the uuid and zod packages, and the types for uuid, using bun.

```bash
bun add uuid zod
bun add -D @types/uuid
```

--------------------------------

### Install Prettier with Bun

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/code-style-setup.md

Install Prettier as a development dependency using the Bun package manager.

```bash
bun add -D prettier
```

--------------------------------

### Install Flags SDK

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/feature-flags-setup.md

Install the Flags SDK using Bun. This command adds the necessary package to your project dependencies.

```bash
bun add flags
```

--------------------------------

### Install Better Auth Package

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/better-auth-setup.md

Install the Better Auth package using Bun. This is the first step in integrating Better Auth into your project.

```bash
bun add better-auth
```

--------------------------------

### Install Browser Automation (Bash)

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/agent-setup.md

Installs the `agent-browser` package globally and downloads the necessary Chromium browser for web automation tasks.

```bash
bun install -g agent-browser
agent-browser install  # Download Chromium
```

--------------------------------

### Start Development Servers

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/stripe-sync/README.md

Run the main development server and the Stripe webhook development server in separate terminals.

```bash
bun run dev
```

```bash
bun run dev:stripe
```

--------------------------------

### Install Workflow Development Kit

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/ai-agent-workflow/SKILL.md

Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/workflow-setup
```

--------------------------------

### Starting a Workflow

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/using-workflows.md

Demonstrates how to initiate a workflow execution using the 'start' function from the 'workflow/api' module. It returns a run object containing the unique run ID and a readable stream for UI messages.

```typescript
import { start } from "workflow/api";
import { chatWorkflow } from "@/workflows/chat";

const run = await start(chatWorkflow, [{ chatId, userMessage }]);

// run.runId - unique identifier for this run
// run.readable - stream of UI message chunks
```

--------------------------------

### Setup NuqsAdapter in Root Layout

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/nuqs-setup.md

Wrap your application with NuqsAdapter in your root layout to enable Nuqs functionality.

```tsx
import { NuqsAdapter } from "nuqs/adapters/next/app";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  );
}
```

--------------------------------

### Set Up Environment Variables

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/auth/README.md

Copy the example environment file and edit it with your specific credentials for Neon database, Better Auth secret, Resend API key, and AI Gateway or Vercel OIDC token.

```bash
cp .env.example .env.development
```

--------------------------------

### Usage Tracking with Stripe Queries

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/templates/stripe-sync/README.md

Example of how to get user metrics, check limits, and increment usage counters using provided query functions.

```typescript
import {
  incrementUserMetrics,
  getOrCreateUserMetrics,
} from "@/lib/stripe/queries";

// Get current usage
const metrics = await getOrCreateUserMetrics(userId);

// Check limit before API call
if (metrics.chatRequests >= plan.chatLimit) {
  throw new Error("Monthly limit exceeded");
}

// Increment after successful call
await incrementUserMetrics(userId);
```

--------------------------------

### CI Setup for Playwright Tests with GitHub Actions

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/playwright-tests.md

Configure a GitHub Actions workflow to run Playwright tests on every push or pull request. This includes checking out code, setting up Bun, installing dependencies, installing Playwright browsers, running tests, and uploading artifacts on failure.

```yaml
# .github/workflows/test.yml
name: Test

on:
  push:
    branches: ["**"]
  pull_request:
    branches: ["**"]

jobs:
  test:
    runs-on: ubuntu-latest

    env:
      NEON_API_KEY: ${{ secrets.NEON_API_KEY }}
      NEON_PROJECT_ID: ${{ secrets.NEON_PROJECT_ID }}

    steps:
      - uses: actions/checkout@v4

      - uses: oven-sh/setup-bun@v2
        with:
          bun-version: latest

      - run: bun install --frozen-lockfile

      - name: Install Playwright browsers
        run: bunx playwright install chromium --with-deps

      - name: Run Playwright tests
        run: bun run test:playwright

      - name: Upload test artifacts
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: |
            playwright-report/
            test-results/
          retention-days: 7

```

--------------------------------

### Testing API Responses with Integration Tests

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/using-tests.md

Import route handlers directly to test API endpoints. This example shows how to verify a successful response for a GET request.

```typescript
import { GET } from "@/app/api/endpoint/route";

it("should return 200 for valid request", async () => {
  const response = await GET();
  expect(response.status).toBe(200);
});
```

--------------------------------

### Integration Test Setup for API Routes

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/using-tests.md

Example of an integration test for an API route. Import the handler directly to test API responses, database state, or server-side logic without the UI.

```typescript
import { describe, it, expect } from "bun:test";
import { GET } from "@/app/api/feature/route";

describe("GET /api/feature", () => {
  it("should return expected response", async () => {
    const response = await GET();

    expect(response.status).toBe(200);
    const data = await response.json();
    expect(data.value).toBeDefined();
  });
});
```

--------------------------------

### Good Step Example

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/using-user-stories.md

Write steps that are verifiable, imperative, and specific. Include details for actions and expected outcomes.

```json
{
  "steps": [
    "Enter current password",
    "Enter new password",
    "Confirm new password",
    "Submit the form"
  ]
}
```

--------------------------------

### Install AI Agent Skills

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/agent-setup.md

Use this command to install a variety of skills for your AI agent. Ensure you have 'bunx' installed. The '-s' flag specifies the skill, and '-a' flags can be used for additional arguments like 'cursor' and 'codex'. The '-y' flag confirms installation.

```bash
bunx skills add anthropics/skills -s skill-creator -a cursor -a codex -y
```

```bash
bunx skills add anthropics/skills -s frontend-design -a cursor -a codex -y
```

```bash
bunx skills add vercel-labs/agent-skills -s web-design-guidelines -a cursor -a codex -y
```

```bash
bunx skills add vercel-labs/agent-skills -s vercel-react-best-practices -a cursor -a codex -y
```

```bash
bunx skills add vercel-labs/agent-browser -s agent-browser -a cursor -a codex -y
```

```bash
bunx skills add vercel/ai -s ai-sdk -a cursor -a codex -y
```

```bash
bunx skills add vercel/ai-elements --skill ai-elements -a cursor -a codex -y
```

```bash
bunx skills add andrelandgraf/fullstackrecipes/skills -a cursor -a codex -y
```

```bash
bunx skills add neondatabase/agent-skills -a cursor -a codex -y
```

```bash
bunx skills add neondatabase/better-env -a cursor -a codex -y
```

--------------------------------

### Install Playwright with Bun

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/playwright-tests.md

Install Playwright as a development dependency using the Bun package manager.

```bash
bun add -D @playwright/test
```

--------------------------------

### Fetch AI SDK & Simple Chat Recipe

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/base-app-setup/SKILL.md

Download the recipe for installing the Vercel AI SDK and AI Elements, and building a streaming chat interface with the useChat hook.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup
```

--------------------------------

### Fetch Code Style Setup Recipe

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/base-app-setup/SKILL.md

Retrieve the recipe for configuring code style with Prettier and TypeScript, including VSCode settings and EditorConfig.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-style-setup
```

--------------------------------

### Install Next Themes

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/shadcn-ui-setup.md

Installs the next-themes package, which is required for managing theme switching in your Next.js application.

```bash
bun add next-themes
```

--------------------------------

### Bad Step Example

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/using-user-stories.md

Steps should be specific and imperative, not vague. Avoid general statements like 'Change the password'.

```json
{ "steps": ["Change the password"] }
```

--------------------------------

### Install Claude Code CLI

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ralph-setup.md

Install the Claude Code CLI globally, as Ralph uses it to manage agent sessions.

```bash
npm install -g @anthropic-ai/claude-code
```

--------------------------------

### Set up Neon Database URL

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/neon-drizzle-setup.md

Configure your development environment by adding the Neon database connection string to your .env.development file. Ensure to use the pooled connection string for production.

```env
DATABASE_URL="postgresql://user:password@ep-xxx.region.aws.neon.tech/neondb?sslmode=require"
```

--------------------------------

### Install Vercel Config Package

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/nextjs-on-vercel.md

Installs the Vercel config package as a development dependency to programmatically configure Vercel projects.

```bash
bun add -D @vercel/config
```

--------------------------------

### Initialize Shadcn UI

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/shadcn-ui-setup.md

Run this command to initialize Shadcn UI in your project. It will prompt you for configuration and set up necessary files.

```bash
bunx --bun shadcn@latest init --base radix
```

--------------------------------

### Fetch Next.js on Vercel Recipe

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/base-app-setup/SKILL.md

Use this command to fetch the recipe for setting up Next.js on Vercel, including Bun integration and Vercel deployment.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
```

--------------------------------

### Validate Config on Server Start

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/ai-sdk-setup.md

Import the AI configuration in `instrumentation.ts` to ensure environment variables are validated when the server starts.

```typescript
// src/instrumentation.ts

// Validate required configs on server start
import "./lib/ai/config";

```

--------------------------------

### Registry Tag - Good Usage Example

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/use-fullstackrecipes.md

Shows how to use the 'registry' tag and then import utilities from the provided source code without duplicating the code in the recipe.

```typescript
import { startStream, finishStream } from "@/workflows/steps/stream";
```

--------------------------------

### Install Vercel Analytics Package

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/vercel-analytics-setup.md

Install the Vercel Analytics package using Bun. This is the first step to enable analytics tracking.

```bash
bun add @vercel/analytics
```

--------------------------------

### Install GitHub CLI

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/nextjs-on-vercel.md

Installs the GitHub CLI using Homebrew, which is used for managing GitHub repositories and automating Git operations.

```bash
brew install gh
```

--------------------------------

### Initialize and Render Recipe List

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/public/fullstackrecipes-widget.html

Sets up event listeners for filtering and selection, and renders the initial list of recipes. Handles interaction with the AI SDK for tool calls.

```javascript
const itemsEl = document.querySelector("#items");
const filterEl = document.querySelector("#filter");
const selectedMetaEl = document.querySelector("#selected-meta");
const selectedTitleEl = document.querySelector("#selected-title");
const selectedUriEl = document.querySelector("#selected-uri");
let items = [];
const applyToolState = (toolOutput) => {
  if (!toolOutput) return;
  if (Array.isArray(toolOutput.items)) {
    items = toolOutput.items;
    renderList();
  }
  if (toolOutput.selected?.resourceUri) {
    selectedMetaEl.textContent = `${toolOutput.selected.type} • ${toolOutput.selected.slug}`;
    selectedTitleEl.textContent = toolOutput.selected.title || "";
    selectedUriEl.textContent = toolOutput.selected.resourceUri;
  }
};
const renderList = () => {
  const q = (filterEl.value || "").trim().toLowerCase();
  const filtered = q
    ? items.filter((it) => {
        const hay = [
          it.type,
          it.slug,
          it.title,
          it.description,
          ...(it.tags || []),
        ]
          .filter(Boolean)
          .join(" ")
          .toLowerCase();
        return hay.includes(q);
      })
    : items;
  itemsEl.innerHTML = "";
  filtered.forEach((it) => {
    const li = document.createElement("li");
    const btn = document.createElement("button");
    btn.className = "item";
    btn.type = "button";
    btn.innerHTML = `<div><strong>${it.title}</strong></div> <div class="meta">${it.type} • ${it.slug}</div>`;
    btn.addEventListener("click", async () => {
      if (window.openai?.callTool) {
        const response = await window.openai.callTool("select_item", {
          slug: it.slug,
        });
        applyToolState(response?.structuredContent);
        return;
      }
      selectedMetaEl.textContent = `${it.type} • ${it.slug}`;
      selectedTitleEl.textContent = it.title || "";
      selectedUriEl.textContent = "This widget is running without the Apps SDK bridge (window.openai).";
    });
    li.appendChild(btn);
    itemsEl.appendChild(li);
  });
};
const refresh = async () => {
  if (window.openai?.callTool) {
    const response = await window.openai.callTool("list_items", {});
    applyToolState(response?.structuredContent);
    return;
  }
  // Fallback when running standalone.
  items = [];
  renderList();
};
const handleSetGlobals = (event) => {
  const globals = event.detail?.globals;
  applyToolState(globals?.toolOutput);
};
window.addEventListener("openai:set_globals", handleSetGlobals, {
  passive: true,
});
filterEl.addEventListener("input", () => renderList(), {
  passive: true,
});
// Initial load: Apps SDK injects toolOutput into window.openai.toolOutput
applyToolState(window.openai?.toolOutput);
await refresh();
```

--------------------------------

### Validate Config on Server Start

Source: https://github.com/andrelandgraf/fullstackrecipes/blob/main/docs/recipes/neon-drizzle-setup.md

Ensures the DATABASE_URL environment variable is present and valid when the server starts by importing the configuration module.

```typescript
// src/instrumentation.ts

// Validate required configs on server start
import "./lib/db/config";
```