Add VybeSec to your app

How it works

VybeSec has two capture layers that work together. Understanding both helps you decide what to install.

Once either SDK captures an error, it sends it to VybeSec's global edge ingest in under 20ms. Claude AI then generates a plain-English explanation and a ready-to-paste fix prompt for your exact tool. Both client and server errors appear in the same issues feed — each tagged so you know where it came from.

Which SDK do I need?

Your first setup

Get both client and server monitoring running in under 5 minutes.

Step 1 — Get your key

Log in to VybeSec → create a project → copy the public key. It starts with pk_.

Step 2 — Client (browser)

npm install @vybesec/sdk

// Add to your entry file — before anything renders
import { init } from "@vybesec/sdk"
init({
  key: "pk_live_YOUR_KEY",   // your key from the dashboard
  platform: "react",          // see the platform list below
  environment: "production",
  enableVitals: true,         // capture LCP, FCP, CLS, INP, TTFB
  enableReplay: true,         // 60s session replay before crash (Pro)
})

Step 3 — Server (if you have a backend)

Choose based on where your backend runs:

Step 4 — Trigger a test error

// Paste this in your browser console or a button click handler
setTimeout(() => {
  throw new Error("VybeSec test error — " + new Date().toISOString())
}, 1000)

// For server testing — in a route handler:
throw new Error("VybeSec server test")

Configuration options

All options for the client SDK init() call. Only key is required.

Lovable builds React apps. Use the script tag approach — paste the prompt directly into Lovable's chat. Replace pk_live_YOUR_KEY with your actual key first.

Bolt projects have a standard index.html. Same approach as Lovable — script tag in the head.

Replit supports both HTML apps and React/Node projects. The prompt handles both cases.

v0 generates Next.js or React components. Add VybeSec at the app root after importing the v0 code into your project.

Use this exact prompt in Base44. It forces file discovery to avoid hallucinations.

Use this exact prompt in Emergent. It forces file discovery to avoid hallucinations.

Use this exact prompt in Tempo Labs. It forces file discovery to avoid hallucinations.

Use this exact prompt in Webdraw. It forces file discovery to avoid hallucinations.

Use this exact prompt in Wix Vibe. It forces file discovery to avoid hallucinations.

Use this exact prompt in Hostinger AI Builder. It forces file discovery to avoid hallucinations.

Use this exact prompt in Databutton. It forces file discovery to avoid hallucinations.

Use this exact prompt in Firebase Studio. It forces file discovery to avoid hallucinations.

Use this exact prompt in YouWare. It forces file discovery to avoid hallucinations.

Use this exact prompt in HeyBoss. It forces file discovery to avoid hallucinations.

Works with any agentic IDE or CLI. It handles both client and server setup in one pass.

Works with: Cursor, Windsurf, Trae, Kiro, Antigravity, JetBrains AI, GitHub Copilot, Augment, Amazon Q, Claude Code, Cline, Codex, Aider, Devin, OpenHands, Continue.dev, RooCode, Goose, Open Interpreter, Tabby, Cody, Junie, Jules, AmpCode.

Tell Cursor exactly which file to edit. The key is init() before the render call.

Same as Cursor — entry file, before the render call.

Use this exact prompt in Trae. It forces file discovery and prevents guesses.

Use this exact prompt in Kiro. It forces file discovery and prevents guesses.

Use this exact prompt in Antigravity. It forces file discovery and prevents guesses.

Use this exact prompt in JetBrains AI. It forces file discovery and prevents guesses.

Use this exact prompt in GitHub Copilot. It forces file discovery and prevents guesses.

Use this exact prompt in Augment Code. It forces file discovery and prevents guesses.

Use this exact prompt in Amazon Q Developer. It forces file discovery and prevents guesses.

Use this exact prompt in Claude Code. It forces file discovery and prevents guesses.

Use this exact prompt in Cline. It forces file discovery and prevents guesses.

Use this exact prompt in OpenAI Codex. It forces file discovery and prevents guesses.

Use this exact prompt in Aider. It forces file discovery and prevents guesses.

Use this exact prompt in Devin. It forces file discovery and prevents guesses.

Use this exact prompt in OpenHands. It forces file discovery and prevents guesses.

Use this exact prompt in Continue.dev. It forces file discovery and prevents guesses.

Use this exact prompt in RooCode. It forces file discovery and prevents guesses.

Use this exact prompt in Goose. It forces file discovery and prevents guesses.

Use this exact prompt in Open Interpreter. It forces file discovery and prevents guesses.

Use this exact prompt in Tabby. It forces file discovery and prevents guesses.

Use this exact prompt in Cody. It forces file discovery and prevents guesses.

Use this exact prompt in Junie. It forces file discovery and prevents guesses.

Use this exact prompt in Jules. It forces file discovery and prevents guesses.

Use this exact prompt in AmpCode. It forces file discovery and prevents guesses.

Next.js needs two setups — one for the browser, one for the server. Both use the same public key.

Client (browser errors)

Create app/VybeSecProvider.tsx:

// app/VybeSecProvider.tsx
"use client"

import { useEffect } from "react"
import { init } from "@vybesec/sdk"

export function VybeSecProvider() {
  useEffect(() => {
    init({
      key: process.env.NEXT_PUBLIC_VYBESEC_KEY!,
      platform: "nextjs",
      environment: process.env.NODE_ENV,
      enableVitals: true,
      enableReplay: true,
    })
  }, [])
  return null
}

Add to app/layout.tsx:

// app/layout.tsx
import { VybeSecProvider } from "./VybeSecProvider"

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

Server (API route errors)

Create instrumentation.ts at the project root:

// instrumentation.ts  ← root of project, next to package.json
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { init } = await import("@vybesec/node")
    init({
      key: process.env.NEXT_PUBLIC_VYBESEC_KEY!,
      platform: "nextjs",
      environment: process.env.NODE_ENV,
    })
  }
}

Enable it in next.config.ts:

const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
}
export default nextConfig

Add to .env.local:

NEXT_PUBLIC_VYBESEC_KEY=pk_live_YOUR_KEY

Call init() in your entry file — the file that calls ReactDOM.createRoot(). Must run before render.

// src/main.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { init } from "@vybesec/sdk"
import App from "./App"

init({
  key: "pk_live_YOUR_KEY",
  platform: "react",
  environment: import.meta.env.MODE === "production" ? "production" : "development",
  enableVitals: true,
  enableReplay: true,
})

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Initialize in main.ts before createApp().mount().

// src/main.ts
import { createApp } from "vue"
import { init } from "@vybesec/sdk"
import App from "./App.vue"

init({ key: "pk_live_YOUR_KEY", platform: "vue", environment: "production" })

createApp(App).mount("#app")

// src/main.ts
import App from "./App.svelte"
import { init } from "@vybesec/sdk"

init({ key: "pk_live_YOUR_KEY", platform: "svelte", environment: "production" })

const app = new App({ target: document.getElementById("app")! })
export default app

// src/hooks.client.ts  ← client-only, runs in the browser for every page
import { init } from "@vybesec/sdk"
init({ key: "pk_live_YOUR_KEY", platform: "sveltekit", environment: "production" })

// plugins/vybesec.client.ts  ← .client suffix = browser only
import { init } from "@vybesec/sdk"
export default defineNuxtPlugin(() => {
  init({ key: "pk_live_YOUR_KEY", platform: "nuxt", environment: "production" })
})

// src/main.ts
import { init } from "@vybesec/sdk"
import { bootstrapApplication } from "@angular/platform-browser"
import { AppComponent } from "./app/app.component"
import { appConfig } from "./app/app.config"

init({ key: "pk_live_YOUR_KEY", platform: "angular", environment: "production" })
bootstrapApplication(AppComponent, appConfig).catch(console.error)

// app/entry.client.tsx
import { RemixBrowser } from "@remix-run/react"
import { init } from "@vybesec/sdk"
import { hydrateRoot } from "react-dom/client"

init({ key: "pk_live_YOUR_KEY", platform: "remix", environment: "production" })
hydrateRoot(document, <RemixBrowser />)

---
// src/layouts/Base.astro
---
<html>
  <head>
    <script type="module">
      import { init } from "@vybesec/sdk"
      init({ key: "pk_live_YOUR_KEY", platform: "astro", environment: "production" })
    </script>
  </head>
  <body><slot /></body>
</html>

// src/index.tsx
import { render } from "solid-js/web"
import { init } from "@vybesec/sdk"
import App from "./App"

init({ key: "pk_live_YOUR_KEY", platform: "solid", environment: "production" })
render(() => <App />, document.getElementById("root")!)

// src/root.tsx
import { component$, useVisibleTask$ } from "@builder.io/qwik"
import { init } from "@vybesec/sdk"

export default component$(() => {
  useVisibleTask$(() => {
    init({ key: "pk_live_YOUR_KEY", platform: "qwik", environment: "production" })
  })
  return <div id="root">{/* your app */}</div>
})

// gatsby-browser.js
import { init } from "@vybesec/sdk"
export const onClientEntry = () => {
  init({ key: "pk_live_YOUR_KEY", platform: "gatsby", environment: process.env.NODE_ENV })
}

No build tools needed — drop this into any HTML file.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.vybesec.io/v1/sdk.js" async></script>
    <script>
      window.addEventListener("load", function () {
        window.VybeSec.init({
          key: "pk_live_YOUR_KEY",
          platform: "vanilla",
          environment: "production",
        })
      })
    </script>
  </head>
  <body><!-- your app --></body>
</html>

npm install @vybesec/react-native @react-native-async-storage/async-storage
npx pod-install  # bare RN only

// App.tsx
import { init } from "@vybesec/react-native"
import AppRoot from "./src/AppRoot"

init({
  key: "pk_live_YOUR_KEY",
  platform: "react-native",
  environment: "production",
  enableVitals: true,   // app startup, screen render, JS FPS
  enableReplay: false,  // replay is browser-only
})

export default AppRoot

What gets captured automatically

npx expo install @vybesec/react-native @react-native-async-storage/async-storage

Expo Router — app/_layout.tsx

// app/_layout.tsx
import { init } from "@vybesec/react-native"
import { Slot } from "expo-router"

init({
  key: "pk_live_YOUR_KEY",
  platform: "expo",
  environment: "production",
  enableVitals: true,
})

export default function RootLayout() {
  return <Slot />
}

Classic Expo — App.tsx

// App.tsx
import { init } from "@vybesec/react-native"
init({ key: "pk_live_YOUR_KEY", platform: "expo", environment: "production" })

export default function App() {
  return <NavigationContainer>...</NavigationContainer>
}

Covers Next.js API routes, Express, Fastify, Hono, NestJS. Deployed anywhere Node.js runs — Vercel, Railway, Render, Fly.io, Replit.

npm install @vybesec/node

Next.js App Router — instrumentation.ts

Create this file at your project root (same level as package.json):

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { init } = await import("@vybesec/node")
    init({
      key: process.env.NEXT_PUBLIC_VYBESEC_KEY!,
      platform: "nextjs",
      environment: process.env.NODE_ENV,
    })
  }
}

// next.config.ts — add this:
// experimental: { instrumentationHook: true }

Wrapping API route handlers

// app/api/checkout/route.ts
import { withVybesec } from "@vybesec/node/nextjs"

export const POST = withVybesec(async (req: Request) => {
  // your route logic
  return Response.json({ ok: true })
})

Express

import { init, vybesecErrorHandler } from "@vybesec/node"

init({ key: "pk_live_YOUR_KEY", platform: "other", environment: "production" })

const app = express()
// ... all your routes ...
app.use(vybesecErrorHandler())  // must be last
app.listen(3000)

Hono

import { Hono } from "hono"
import { init, vybesecMiddleware } from "@vybesec/node"

init({ key: "pk_live_YOUR_KEY", platform: "other", environment: "production" })

const app = new Hono()
app.use("*", vybesecMiddleware())
// ... your routes ...
export default app

Manual capture

import { captureException } from "@vybesec/node"

try {
  await stripe.charges.create(/* ... */)
} catch (err) {
  captureException(err, {
    route: "/api/checkout",
    method: "POST",
    statusCode: 500,
  })
  throw err // re-throw so the caller handles the response
}

Supabase Edge Functions run on Deno — not Node.js. Use @vybesec/deno. This is the most important server integration for Lovable and Bolt apps.

Step 1 — Create a shared helper file

Add this to supabase/functions/_shared/vybesec.ts:

// supabase/functions/_shared/vybesec.ts
import { init, withVybesec } from "npm:@vybesec/deno"

init({
  key: Deno.env.get("VYBESEC_KEY") ?? "",
  platform: "lovable",  // or "bolt", "other"
  environment: "production",
})

export { withVybesec }

Step 2 — Wrap each edge function

// supabase/functions/stripe-webhook/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
import { withVybesec } from "../_shared/vybesec.ts"

serve(
  withVybesec("stripe-webhook", async (req: Request) => {
    const body = await req.json()
    // your existing webhook logic here
    return new Response(JSON.stringify({ ok: true }), {
      headers: { "Content-Type": "application/json" },
    })
  })
)

Step 3 — Set the secret

supabase secrets set VYBESEC_KEY=pk_live_YOUR_KEY

Repeat Step 2 for every edge function in your project — auth callbacks, email handlers, data webhooks, cron jobs. Each one wraps in under 30 seconds.

For any backend running on Cloudflare Workers or Pages Functions. Use ctx.waitUntil() to ensure the error send completes before the response returns.

bun add @vybesec/cloudflare
# or: npm install @vybesec/cloudflare

// worker.ts
import { init, captureError } from "@vybesec/cloudflare"

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    init({
      key: env.VYBESEC_KEY,
      platform: "other",
      environment: "production",
    })

    try {
      return await handleRequest(request, env)
    } catch (err) {
      // waitUntil ensures the send completes even after response is returned
      ctx.waitUntil(captureError(err, { request }))
      return new Response("Internal Server Error", { status: 500 })
    }
  },
}

Add your key to wrangler.toml:

[vars]
VYBESEC_KEY = "pk_live_YOUR_KEY"

FastAPI, Flask, or Django backends deployed to Railway, Render, or Fly.io.

pip install vybesec

FastAPI

from fastapi import FastAPI
from vybesec import init
from vybesec.integrations.fastapi import VybesecMiddleware

init(key="pk_live_YOUR_KEY", platform="other", environment="production")

app = FastAPI()
app.add_middleware(VybesecMiddleware)

Flask

from flask import Flask
from vybesec import init
from vybesec.integrations.flask import init_flask

init(key="pk_live_YOUR_KEY", platform="other", environment="production")
app = Flask(__name__)
init_flask(app)

Manual capture

from vybesec import capture_exception

try:
    process_payment(user_id)
except Exception as exc:
    capture_exception(exc, route="/api/checkout", method="POST", status_code=500)
    raise