DOCSEARCHbyAlgolia
Submit Docs

VibeKit Documentation

repository·main·Indexed 23 days ago

https://github.com/superagent-ai/vibekit

A safety and observability layer for coding agents providing isolated sandboxes via Docker, sensitive data redaction, and real-time monitoring for agents such as Claude Code and Gemini. Includes SDKs for authentication (@vibe-kit/auth) and sandbox providers for Beam (@vibe-kit/beam) and Blaxel (@vibe-kit/blaxel).

Tokens
103.4K
Snippets
265
Records
530
Agent score
78%

What's inside VibeKit

  1. Overview of VibeKit CLI features

    main

    The VibeKit CLI acts as a safety layer for coding agents (such as Claude Code, Gemini CLI, Grok CLI, Codex CLI, and OpenCode). Key capabilities include:

    • Local Sandbox: Runs agent output in isolated Docker containers to protect your local environment.
    • Built-in Redaction: Automatically removes secrets, API keys, and sensitive data from completions.
    • Observability: Provides real-time logs, traces, and metrics for agent operations.
    • Universal Support: Compatible with various coding agents.
    • Offline Capability: Works entirely on your machine without cloud dependencies.

  2. What is the VibeKit CLI?

    main

    The VibeKit CLI (vibekit) is a security and analytics middleware designed to wrap existing coding agents (such as Claude Code CLI and Gemini CLI). It provides a safety layer by offering Docker-based sandboxing, automatic PII redaction, and real-time analytics for agent interactions.

    Core Capabilities:

    • Docker Security: Runs agents in isolated containers to prevent host system access.
    • Logging & Analytics: Captures all agent commands and interactions.
    • Safe Sandboxing: Implements resource limits and network restrictions.
    • Redaction: Automatically removes sensitive data and PII from outputs.

  3. Introduction to the VibeKit SDK

    main

    The VibeKit SDK is a safety layer designed to help developers embed AI coding agents into web applications. It provides a foundation for adding intelligent code generation, editing, and execution capabilities while managing the complexities of security and infrastructure.

    Core Capabilities

    • Multiple AI Agents: Support for integrating agents like Claude Code, Codex, Gemini, Grok, and OpenCode.
    • Sandboxed Environments: Provides secure, isolated environments to ensure safe code execution and development.
    • Flexible Deployment: You can choose from various providers to host your sandboxed environments, including:
      • E2B
      • Dagger
      • Daytona
      • Northflank
      • Cloudflare
      • Modal
      • Fly.io
    • Integration Modes: Use the SDK for embedding in web apps, a CLI for local development, or an API for custom workflows.

  4. Introduction to @vibe-kit/auth

    main
    The @vibe-kit/auth package is a universal OAuth authentication library designed to let you programmatically leverage existing AI provider 'MAX' subscriptions (like Claude AI) instead of paying for per-API-call usage. It uses industry-standard OAuth 2.0 with PKCE, providing automatic token refresh and secure storage. It is compatible with both Node.js and browser environments.

  5. Overview of @vibe-kit/auth features and supported providers

    main

    The @vibe-kit/auth package is a universal OAuth authentication library designed to access AI provider MAX subscriptions.

    Supported Providers:

    • Claude AI: Currently available.
    • Gemini: Supported.
    • Grok: Supported.
    • ChatGPT Max: Coming soon.

    Core Capabilities:

    • OAuth 2.0 + PKCE: Uses industry-standard secure authentication flows.
    • Token Management: Handles automatic token refreshing and secure storage.
    • Security: Implements PKCE for secure flows, state parameter validation to prevent CSRF, and restricted file permissions for token storage in CLI contexts.

  6. How Dagger image resolution works

    main

    The VibeKit Dagger provider uses a specific resolution strategy to balance speed and reliability:

    1. Check local cache: It first looks for existing Docker images locally.
    2. Pull from registry: If not found locally, it attempts to pull pre-built images from the configured registry (dockerhub, ghcr, or ecr).
    3. Build from Dockerfile: If the registry is unavailable or the image is missing, it falls back to building the agent image from source.

    This strategy allows for fast startup via cached/registry images while ensuring functionality via local builds if network connectivity is lost.

  7. Implement or use TokenStorage

    main

    The TokenStorage interface defines how authentication tokens are persisted. You can implement this interface to create custom storage logic, or use the provided implementations:

    • MemoryTokenStorage: In-memory storage (suitable for server-side use).
    • LocalStorageTokenStorage: Uses browser localStorage (client-side only).
    • CookieTokenStorage: Uses cookies (suitable for SSR applications).
    interface TokenStorage {
  store(token: OAuthToken): Promise<void>;
  retrieve(): Promise<OAuthToken | null>;
  clear(): Promise<void>;
}

  8. Image Selection Logic for Blaxel

    main

    If the image option is not provided to createBlaxelProvider, Blaxel automatically selects an image based on the agent's type configured in VibeKit:

    • claude $\rightarrow$ blaxel/vibekit-claude:latest
    • opencode $\rightarrow$ blaxel/vibekit-opencode:latest
    • gemini $\rightarrow$ blaxel/vibekit-gemini:latest
    • grok $\rightarrow$ blaxel/vibekit-grok:latest
    • default $\rightarrow$ blaxel/vibekit-codex:latest

  9. Stream command output in real-time

    main

    To monitor command output as it happens, you should use the event-based approach. While a legacy callbacks option exists in the options object, it is recommended to use the vibekit.on('stdout', ...) and vibekit.on('stderr', ...) event listeners for real-time streaming.

    Recommended: Event Listeners

    vibekit.on('stdout', (output) => {
  console.log('Command output:', output);
});

vibekit.on('stderr', (error) => {
  console.error('Command error:', error);
});

const result = await vibekit.executeCommand('npm test');

    Legacy: StreamCallbacks Interface

    If using the callbacks property in the options object:

    • onUpdate: (message: string) => void - Called with streaming updates from stdout.
    • onError: (error: string) => void - Called when errors occur in stderr.
    // Execute command with streaming output using stdout/stderr events
vibekit.on('stdout', (output) => {
  console.log('Command output:', output);
});

vibekit.on('stderr', (error) => {
  console.error('Command error:', error);
});

const result = await vibekit.executeCommand('npm test');

  10. Choose an authentication environment for @vibe-kit/auth

    main

    Depending on your application type, you should use the specific implementation for your environment:

    • Node.js Usage: Best for server-side authentication or CLI tools. It includes automatic browser launching to complete the OAuth flow.
    • Browser Usage: Best for client-side authentication in web applications.

  11. Vibe0 Project Structure and Architecture

    main

    Vibe0 uses a modular, TypeScript-first architecture with the following directory layout:

    • app/: Next.js App Router containing actions/ (Server actions), api/ (API routes), and session/ (Session pages).
    • components/: Reusable UI components, including ui/ (shadcn/ui components).
    • convex/: Convex schema and server functions for state management and real-time data sync.
    • lib/: Utility libraries and configurations (e.g., lib/inngest.ts defines background tasks).
    • providers/: React providers for auth, convex, and theme.
    • public/: Static assets.

    Core Integrations

    • VibeKit SDK: Handles AI code generation using Anthropic Claude, sandboxed execution via Northflank, GitHub integration, and real-time streaming.
    • Inngest: Manages background task processing (AI generation, session management, real-time updates).
    • Convex: Provides state management and real-time data synchronization.