openai-agents

What this skill does

# OpenAI Agents SDK Skill

Complete skill for building AI applications with OpenAI Agents SDK (JavaScript/TypeScript), covering text agents, realtime voice agents, multi-agent workflows, and production deployment patterns.

---

## Installation & Setup

Install required packages:

```bash
npm install @openai/agents zod@3
npm install @openai/agents-realtime  # For voice agents
```

Set environment variable:

```bash
export OPENAI_API_KEY="your-api-key"
```

Supported runtimes:
- Node.js 22+
- Deno
- Bun
- Cloudflare Workers (experimental)

---

## Core Concepts

### 1. Agents
LLMs equipped with instructions and tools:

```typescript
import { Agent } from '@openai/agents';

const agent = new Agent({
  name: 'Assistant',
  instructions: 'You are helpful.',
  tools: [myTool],
  model: 'gpt-4o-mini',
});
```

### 2. Tools
Functions agents can call, with automatic schema generation:

```typescript
import { tool } from '@openai/agents';
import { z } from 'zod';

const weatherTool = tool({
  name: 'get_weather',
  description: 'Get weather for a city',
  parameters: z.object({
    city: z.string(),
  }),
  execute: async ({ city }) => {
    return `Weather in ${city}: sunny`;
  },
});
```

### 3. Handoffs
Multi-agent delegation:

```typescript
const specialist = new Agent({ /* ... */ });

const triageAgent = Agent.create({
  name: 'Triage',
  instructions: 'Route to specialists',
  handoffs: [specialist],
});
```

### 4. Guardrails
Input/output validation for safety:

```typescript
const agent = new Agent({
  inputGuardrails: [homeworkDetector],
  outputGuardrails: [piiFilter],
});
```

### 5. Structured Outputs
Type-safe responses with Zod:

```typescript
const agent = new Agent({
  outputType: z.object({
    sentiment: z.enum(['positive', 'negative', 'neutral']),
    confidence: z.number(),
  }),
});
```

---

## Text Agents

### Basic Usage

```typescript
import { run } from '@openai/agents';

const result = await run(agent, 'What is 2+2?');
console.log(result.finalOutput);
console.log(result.usage.totalTokens);
```

### Streaming

```typescript
const stream = await run(agent, 'Tell me a story', {
  stream: true,
});

for await (const event of stream) {
  if (event.type === 'raw_model_stream_event') {
    const chunk = event.data?.choices?.[0]?.delta?.content || '';
    process.stdout.write(chunk);
  }
}
```

**Templates**:
- `templates/text-agents/agent-basic.ts`
- `templates/text-agents/agent-streaming.ts`

---

## Multi-Agent Handoffs

Create specialized agents and route between them:

```typescript
const billingAgent = new Agent({
  name: 'Billing',
  handoffDescription: 'For billing and payment questions',
  tools: [processRefundTool],
});

const techAgent = new Agent({
  name: 'Technical',
  handoffDescription: 'For technical issues',
  tools: [createTicketTool],
});

const triageAgent = Agent.create({
  name: 'Triage',
  instructions: 'Route customers to the right specialist',
  handoffs: [billingAgent, techAgent],
});
```

**Templates**:
- `templates/text-agents/agent-handoffs.ts`

**References**:
- `references/agent-patterns.md` - LLM vs code orchestration

---

## Guardrails

### Input Guardrails

Validate input before processing:

```typescript
const homeworkGuardrail: InputGuardrail = {
  name: 'Homework Detection',
  execute: async ({ input, context }) => {
    const result = await run(guardrailAgent, input);
    return {
      tripwireTriggered: result.finalOutput.isHomework,
      outputInfo: result.finalOutput,
    };
  },
};

const agent = new Agent({
  inputGuardrails: [homeworkGuardrail],
});
```

### Output Guardrails

Filter responses:

```typescript
const piiGuardrail: OutputGuardrail = {
  name: 'PII Detection',
  execute: async ({ agentOutput }) => {
    const phoneRegex = /\b\d{3}[-. ]?\d{3}[-. ]?\d{4}\b/;
    return {
      tripwireTriggered: phoneRegex.test(agentOutput as string),
      outputInfo: { detected: 'phone_number' },
    };
  },
};
```

**Templates**:
- `templates/text-agents/agent-guardrails-input.ts`
- `templates/text-agents/agent-guardrails-output.ts`

---

## Human-in-the-Loop

Require approval for specific actions:

```typescript
const refundTool = tool({
  name: 'process_refund',
  requiresApproval: true,  // ← Requires human approval
  execute: async ({ amount }) => {
    return `Refunded $${amount}`;
  },
});

// Handle approval requests
let result = await runner.run(input);

while (result.interruption) {
  if (result.interruption.type === 'tool_approval') {
    const approved = await promptUser(result.interruption);
    result = approved
      ? await result.state.approve(result.interruption)
      : await result.state.reject(result.interruption);
  }
}
```

**Templates**:
- `templates/text-agents/agent-human-approval.ts`

---

## Realtime Voice Agents

### Creating Voice Agents

```typescript
import { RealtimeAgent, tool } from '@openai/agents-realtime';

const voiceAgent = new RealtimeAgent({
  name: 'Voice Assistant',
  instructions: 'Keep responses concise for voice',
  tools: [weatherTool],
  voice: 'alloy', // alloy, echo, fable, onyx, nova, shimmer
  model: 'gpt-4o-realtime-preview',
});
```

### Browser Session (React)

```typescript
import { RealtimeSession } from '@openai/agents-realtime';

const session = new RealtimeSession(voiceAgent, {
  apiKey: sessionApiKey, // From your backend!
  transport: 'webrtc', // or 'websocket'
});

session.on('connected', () => console.log('Connected'));
session.on('audio.transcription.completed', (e) => console.log('User:', e.transcript));
session.on('agent.audio.done', (e) => console.log('Agent:', e.transcript));

await session.connect();
```

**CRITICAL**: Never send your main OPENAI_API_KEY to the browser! Generate ephemeral session tokens server-side.

### Voice Agent Handoffs

Voice agents support handoffs with constraints:
- **Cannot change voice** during handoff
- **Cannot change model** during handoff
- Conversation history automatically passed

```typescript
const specialist = new RealtimeAgent({
  voice: 'nova', // Must match parent
  /* ... */
});

const triageAgent = new RealtimeAgent({
  voice: 'nova',
  handoffs: [specialist],
});
```

**Templates**:
- `templates/realtime-agents/realtime-agent-basic.ts`
- `templates/realtime-agents/realtime-session-browser.tsx`
- `templates/realtime-agents/realtime-handoffs.ts`

**References**:
- `references/realtime-transports.md` - WebRTC vs WebSocket

---

## Framework Integration

### Cloudflare Workers (Experimental)

```typescript
import { Agent, run } from '@openai/agents';

export default {
  async fetch(request: Request, env: Env) {
    const { message } = await request.json();

    process.env.OPENAI_API_KEY = env.OPENAI_API_KEY;

    const agent = new Agent({
      name: 'Assistant',
      instructions: 'Be helpful and concise',
      model: 'gpt-4o-mini',
    });

    const result = await run(agent, message, {
      maxTurns: 5,
    });

    return new Response(JSON.stringify({
      response: result.finalOutput,
      tokens: result.usage.totalTokens,
    }), {
      headers: { 'Content-Type': 'application/json' },
    });
  },
};
```

**Limitations**:
- No realtime voice agents
- CPU time limits (30s max)
- Memory constraints (128MB)

**Templates**:
- `templates/cloudflare-workers/worker-text-agent.ts`
- `templates/cloudflare-workers/worker-agent-hono.ts`

**References**:
- `references/cloudflare-integration.md`

### Next.js App Router

```typescript
// app/api/agent/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Agent, run } from '@openai/agents';

export async function POST(request: NextRequest) {
  const { message } = await request.json();

  const agent = new Agent({
    name: 'Assistant',
    instructions: 'Be helpful',
  });

  const result = await run(agent, message);

  return NextResponse.json({
    response: result.finalOutput,
  });
}
```

**Templates**:
- `templates/nextjs/api-agent-route.ts`
- `templates/nextjs/api-realtime-route.ts`

---

## Error Handling (9+