descope-byos-builder

Generate React BYOS screens and routers from Descope flow JSON exports.

13|3|Updated Feb 1, 2026
One-click install
npx skills add https://github.com/descope/skills --skill descope-byos-builder
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: descope-byos-builder
Source: https://github.com/descope/skills/tree/main/skills/descope-byos-builder
Command: npx skills add https://github.com/descope/skills --skill descope-byos-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

BYOS builder automates the generation of Descope BYOS screens and flow wiring by analyzing Descope flow exports and producing a map of screen components and routers ready for integration.

Core Features & Use Cases

  • Generates a React BYOS screen per unique screen name across all flows (main and invoked subflows), with router support for collisions.
  • Exposes a generator workflow that uses parse-flow.mjs to extract screenName, interactionId, input names, contextKeys, and subflow loaders for accurate component scaffolding.
  • Mirrors flow-specific rules such as componentsConditions, ctxKey prefill, and WebAuthn handling by guiding proper payloads and byos screen behavior.
  • Supports post-auth promotion subflows by exporting and wiring their screens.

Quick Start

Export the main flow and all subflows, then wire the generated BYOS components into your app using the FlowEntry and ScreenRouter pattern.

Frequently Asked Questions about descope-byos-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React components from Descope flow JSON exports?

Generate React components from Descope flow JSON exports by parsing the flow data to extract screen names, interaction IDs, and input names, then scaffolding a unique BYOS screen component for each entry. This automates the UI wiring process.

How does BYOS handle screen name collisions across multiple Descope subflows?

BYOS handles screen name collisions across multiple Descope subflows by implementing a screen router. This router directs users to the correct component when duplicate screen names exist across the main flow and invoked post-auth promotion subflows.

Can I use BYOS to automate WebAuthn handling and ctxKey prefill for Descope screens?

Yes, you can use BYOS to automate WebAuthn handling and ctxKey prefill by mirroring flow-specific rules. The generator guides proper payloads and BYOS screen behavior to satisfy componentsConditions and context key requirements.

What's the best way to wire post-auth promotion subflows into a Descope BYOS app?

The best way to wire post-auth promotion subflows is to export the main flow and all subflows, then use the generated BYOS components. The builder exports and wires these screens automatically using the FlowEntry and ScreenRouter pattern.

Do I need to manually define input names and contextKeys when building Descope BYOS screens?

No, you do not need to manually define input names and contextKeys. The generator uses parse-flow.mjs to automatically extract screen names, interaction IDs, input names, contextKeys, and subflow loaders for accurate component scaffolding.

Why does my Descope BYOS screen require a router for duplicate screen names?

Your Descope BYOS screen requires a router for duplicate screen names because the builder generates a React component per unique screen name across all flows. A router resolves collisions when the same screen name appears in different subflows.