JavaScript/TypeScript SDK Integration
Three Ways to Use Captain with JavaScript/TypeScript
Captain works with all major JavaScript SDKs! Choose the approach that fits your needs:
- OpenAI SDK (⭐ Recommended): Standard
extra_bodyparameter - most reliable - Vercel AI SDK: Custom header with base64-encoded context
- Direct Fetch: Maximum control with direct HTTP requests
Method 1: OpenAI SDK (⭐ Recommended)
The official OpenAI JavaScript SDK provides the most reliable Captain integration using the standard extra_body parameter.
Installation
Basic Example
Why recommended: Standard OpenAI SDK approach with reliable extra_body parameter support.
Streaming
Large Context Processing
Tool Calling
Method 2: Vercel AI SDK with Custom Header
The Vercel AI SDK works with Captain using a custom header approach for context.
Important: Vercel AI SDK requires context to be passed via a custom header X-Captain-Context that must be base64-encoded (HTTP headers cannot contain newlines).
⚠️ Context Size Limitation: HTTP headers have size limits (typically 4-8KB). For contexts larger than ~4KB after base64 encoding, use the OpenAI SDK (Method 1) instead.
Installation
Basic Example
Why base64 encoding? HTTP headers cannot contain newlines or special characters, so context must be base64-encoded before being sent in the X-Captain-Context header.
Large Context with Upload Endpoint
For contexts larger than ~4KB, use the /v1/chat/completions/upload endpoint with FormData:
This approach bypasses HTTP header size limits and works with any size context.
Non-Streaming
Large Context Processing
Tool Calling
Method 3: Direct Fetch with Captain Parameter
For maximum control, use direct HTTP requests with the captain parameter in the request body.
Basic Example
Streaming with Fetch
Alternative: Using extra_body
You can also pass context via extra_body with direct fetch:
Comparison
Best Practices
1. Choose the Right Method
- Use OpenAI SDK (⭐ Recommended) for most projects - standard API, reliable
extra_bodysupport - Use Vercel AI SDK if you’re building Next.js/Vercel apps and want framework integration
- Use Direct Fetch for custom implementations or when you need maximum control
2. Handle Context Properly
OpenAI SDK (Recommended):
Vercel AI SDK:
Direct Fetch:
3. Error Handling
Framework Compatibility
Captain works with any framework:
- ✅ Next.js - Server-side and client-side rendering
- ✅ React - UI integration with streaming
- ✅ SvelteKit - Full-stack applications
- ✅ Vue - Progressive web apps
- ✅ Node.js - Backend services
- ✅ Deno - Modern JavaScript runtime
- ✅ Bun - Fast all-in-one toolkit
Next Steps
Support
- Documentation: docs.runcaptain.com
- GitHub: github.com/runcaptain/captain
- Email: support@runcaptain.com