Flags Sdk
Implement and wire Vercel Flags SDK patterns—discovery access, provider merge, runtime reporting—for Next.js, React, and SvelteKit apps.
Overview
flags-sdk is an agent skill most often used in Build (also Ship, Grow) that documents how to integrate the Vercel Flags SDK for access control, provider merging, and runtime value reporting.
Install
npx skills add https://github.com/vercel/flags --skill flags-sdkWhat is this skill?
- Documents core APIs: verifyAccess, mergeProviderData, reportValue, and encryption helpers
- Framework packages: flags/react, flags/next, flags/sveltekit with table-of-contents structure
- Shows securing the flags discovery endpoint with Authorization verification
- Runtime logging and Web Analytics via reportValue for resolved flag keys
- Merge multiple provider data sources for Flags Explorer consumption
- 4 documented core API areas in the table of contents: verifyAccess, mergeProviderData, reportValue, encryption
Adoption & trust: 1.3k installs on skills.sh; 600 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know you need feature flags on Vercel but struggle to secure discovery endpoints, merge provider data, and report resolved values correctly per framework.
Who is it for?
Next.js, React, or SvelteKit apps on Vercel where you want copy-paste-accurate SDK usage instead of guessing API shapes.
Skip if: Teams not using Vercel Flags or who only need product-level experiment design without SDK integration code.
When should I use this skill?
You are implementing or debugging Vercel Flags SDK calls in a TypeScript app using flags, flags/react, flags/next, or flags/sveltekit.
What do I get? / Deliverables
Your agent can generate correct imports and call patterns for flags core and framework packages so flags resolve safely and show up in explorer and analytics pipelines.
- Correct SDK integration snippets
- Secured discovery route patterns
- Provider merge and reporting hooks
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build → integrations because the skill is API-reference guidance for hooking feature flags into app and framework code. Flags touch framework adapters and provider endpoints, which is integration work rather than pure UI layout or docs-only tasks.
Where it fits
Add mergeProviderData on the flags API route so Explorer sees all defined flags.
Gate a release with verifyAccess on the discovery endpoint before enabling external testers.
Call reportValue after evaluation so experiment arms appear in Web Analytics.
How it compares
Reference skill for the Flags npm package—not a standalone remote MCP server or a Launch distribution playbook.
Common Questions / FAQ
Who is flags-sdk for?
Solo builders and small teams implementing Vercel-hosted apps who need accurate Flags SDK API usage across core and framework entry points.
When should I use flags-sdk?
In Build while wiring flags and providers; in Ship when hardening discovery auth before rollout; in Grow when reporting flag values into analytics for experiment analysis.
Is flags-sdk safe to install?
Review the Security Audits panel on this page; the skill describes authorization on discovery routes—never commit live tokens into repos the agent writes.
SKILL.md
READMESKILL.md - Flags Sdk
# API Reference ## Table of Contents - [flags (core)](#flags-core) - [flags/react](#flagsreact) - [flags/next](#flagsnext) - [flags/sveltekit](#flagssveltekit) --- ## flags (core) ### `verifyAccess` Verify access to the flags discovery endpoint. Returns `Promise<boolean>`. | Parameter | Type | Description | | --------------- | -------- | ------------------------ | | `authorization` | `string` | Authorization token | ```ts import { verifyAccess } from 'flags'; const access = await verifyAccess(request.headers.get('Authorization')); if (!access) return NextResponse.json(null, { status: 401 }); ``` ### `mergeProviderData` Merge provider data from multiple sources for the Flags Explorer. | Parameter | Type | Description | | --------- | ------------------------------------------- | --------------------- | | `data` | `(ProviderData \| Promise<ProviderData>)[]` | Provider data to merge| ```ts import { mergeProviderData } from 'flags'; return mergeProviderData([ getProviderData(flags), getStatsigProviderData({ /* ... */ }), ]); ``` ### `reportValue` Report flag value to Vercel for Runtime Logs and Web Analytics. | Parameter | Type | Description | | --------- | -------- | --------------- | | `key` | `string` | Flag key | | `value` | `any` | Resolved value | ```ts import { reportValue } from 'flags'; reportValue('summer-sale', true); ``` ### Encryption Functions All default to `process.env.FLAGS_SECRET`. | Function | Input Type | Purpose | | ------------------------ | -------------------- | -------------------------- | | `encryptFlagValues` | `FlagValuesType` | Encrypt resolved values | | `decryptFlagValues` | `string` | Decrypt values | | `encryptFlagDefinitions` | `FlagDefinitionsType`| Encrypt definitions | | `decryptFlagDefinitions` | `string` | Decrypt definitions | | `encryptOverrides` | `FlagOverridesType` | Encrypt toolbar overrides | | `decryptOverrides` | `string` | Decrypt overrides | Optional `secret` and `expirationTime` (default `'1y'`) params on encrypt functions. ### `verifyAccessProof` Verify an access proof token. Returns `Promise<boolean>`. ### `safeJsonStringify` XSS-safe `JSON.stringify`. Escapes `<` and other dangerous chars. ```ts import { safeJsonStringify } from 'flags'; safeJsonStringify({ markup: '<html></html>' }); // '{"markup":"\\u003chtml>\\u003c/html>"}' ``` --- ## flags/react ### `FlagValues` Renders a `<script data-flag-values>` tag for the Flags Explorer. | Prop | Type | Description | | -------- | ---------------- | ------------ | | `values` | `FlagValuesType` | Flag values | ```tsx import { FlagValues } from 'flags/react'; <FlagValues values={{ myFlag: true }} /> ``` For confidential flags, encrypt first: ```tsx import { encryptFlagValues } from 'flags'; import { FlagValues } from 'flags/react'; async function ConfidentialFlags({ values }) { const encrypted = await encryptFlagValues(values); return <FlagValues values={encrypted} />; } ``` ### `FlagDefinitions` Renders a `<script data-flag-definitions>` tag with flag metadata. | Prop | Type | Description | | ------------- | --------------------- | ----------------- | | `definitions` | `FlagDefinitionsType` | Flag definitions | ```tsx import { FlagDefinitions } from 'flags/react'; <FlagDefinitions definitions={{ myFlag: { options: [{ value: false }, { value: true }], origin: 'https://example.com/flag/myFlag', description: 'Example flag', }, }} /> ``` --- ## flags/next ### `flag` Declare a feature flag for Next.js. | Parameter | Type | Description | | -------------- | ---------------------------------- | ---------------------------