Simple Span Example

A React + Vite application deployed on Cloudflare Pages using only braintrust/browser for tracing. No OpenTelemetry or other telemetry setup required.

Features

• Uses traced from braintrust/browser for function tracing
• Uses initLogger from braintrust/browser for logging
• Uses wrapAiSdk from braintrust/browser to wrap the Vercel AI SDK
• Simple weather chat assistant with React UI
• Runs on Cloudflare Pages with Functions

Setup

1. Install mise (if not already installed):

curl https://mise.run | sh
# or
brew install mise

2. Install Node.js and npm via mise:

mise install

3. Install dependencies:

npm install

4. Set up environment variables:

   Non-secret variables are already configured in wrangler.toml under [vars].

   For secrets (API keys), you have two options:

   Option A: Local development - Create a .dev.vars file in the root directory:

   BRAINTRUST_API_KEY=your-key-here
   OPENAI_API_KEY=your-key-here
   

   (Note: BRAINTRUST_PROJECT_NAME is already in wrangler.toml, so you don't need it here)

   Option B: Production deployment - Use Cloudflare Pages secrets:

   wrangler pages secret put BRAINTRUST_API_KEY
   wrangler pages secret put OPENAI_API_KEY

   Or set them via the Cloudflare Dashboard:

   1. Go to your Pages project
   2. Settings → Environment Variables
   3. Add secrets for production/preview environments

5. Build the project:

npm run build

6. Run locally:

npm run dev

7. Deploy to Cloudflare Pages:

npm run deploy

Note: wrangler pages deploy creates a preview deployment by default. To deploy to production:

• Option A: Promote the preview in Cloudflare Dashboard (Settings → Deployments → Promote to production)
• Option B: Use Git integration - connect your repo to Cloudflare Pages for automatic production deployments from your main branch
• Option C: After deploying, promote via CLI: wrangler pages deployment promote <deployment-id> --project-name=simple-span-example

Usage

Visit the app in your browser and use the chat interface to ask about weather in any location. For example:

• "What's the weather in San Francisco?"
• "Tell me about the weather in Tokyo"
• "How's the weather in New York?"

The assistant will use the getWeather tool to fetch weather data and respond with the current weather in Fahrenheit.

Architecture

• src/ - React application (Vite)
• functions/api/chat.ts - Cloudflare Pages Function for chat API using traced, initLogger, and wrapAiSdk
• src/tools.ts - Weather tool using traced for Braintrust spans

No OpenTelemetry or other telemetry libraries are used - everything goes through Braintrust.