Developer settings

API keys, webhooks and feature flags.

3 components · 15 variants

Switch category

API keys

API key screens. A list per environment, a new key that is shown once, permissions per area, usage with a live request view and rolling a key without downtime.

Key list
Create key
Permissions
Key usage
Roll key

Props and details

Key list

Live and test keys with masked secrets, access, last use and revoke, plus a dialog that creates a key and shows it once.

Open in Studio

Installv1.0.1

aiw add @ai-website/api-keys

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<ApiKeys variant="list" title="API keys" keys={[{ id, name, env, prefix, last4, scopes, created, lastUsed }]} resources={[…]} />

Source

Create key

Name, environment as cards, full, restricted or read-only access per area and expiry, then the secret once with copy and a saved check.

Open in Studio

Installv1.0.1

aiw add @ai-website/api-keys

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<ApiKeys variant="create" title="New API key" resources={[{ id, label, icon }]} keyPrefix="sk" />

Source

Permissions

None, read or write per area with a summary that groups the result, set-all buttons and a save bar.

Open in Studio

Installv1.0.1

aiw add @ai-website/api-keys

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<ApiKeys variant="scopes" title="Permissions" apiKey={…} resources={[…]} />

Source

Key usage

Requests, error rate and response time, a daily chart you can read with the keyboard, top endpoints and a live request view with status filter.

Open in Studio

Installv1.0.1

aiw add @ai-website/api-keys

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<ApiKeys variant="usage" title="Usage" apiKey={…} usage={{ days, endpoints, requests }} />

Source

Roll key

Choose how long the old key keeps working, see both keys on a timeline and get the new secret once.

Open in Studio

Installv1.0.1

aiw add @ai-website/api-keys

Brings along utils, kit, button, icon, input, select, dialog, sidebar

Usage

<ApiKeys variant="rotate" title="Roll key" apiKey={…} keyPrefix="sk" />

Source

feature-flags

Feature flags

Feature flag screens. Switches per environment, a staged rollout with a kill switch, targeting rules with a test person, an A/B split with results and a comparison across environments.

Flag list
Staged rollout
Targeting rules
A/B experiment
Environments

Props and details

Flag list

Every flag with its key to copy, owner, rollout and a switch per environment, filtered by stale flags or search.

Open in Studio

Installv1.0.1

aiw add @ai-website/feature-flags

Brings along utils, kit, button, icon, input, switch, sidebar

Usage

<FeatureFlags variant="flag-list" title="Flags" environments={[{ id, name }]} flags={[{ id, key, name, on, rollout, stale }]} />

Source

Staged rollout

A share slider with 100 people that fill in, the steps of the rollout on a line and a kill switch that keeps the share.

Open in Studio

Installv1.0.1

aiw add @ai-website/feature-flags

Brings along utils, kit, button, icon, input, switch, sidebar

Usage

<FeatureFlags variant="rollout" title="Rollout" flag={{ key, rollout }} stages={[5, 25, 50, 100]} />

Source

Targeting rules

If and then rules in order with attribute, condition and value, a default for everyone else and a test person that shows which rule matches.

Open in Studio

Installv1.0.1

aiw add @ai-website/feature-flags

Brings along utils, kit, button, icon, input, switch, sidebar

Usage

<FeatureFlags variant="targeting" title="Targeting" rules={[{ id, attribute, operator, value, serve }]} attributes={[…]} variants={["on", "off"]} />

Source

A/B experiment

A split bar to drag or move with the keys, both variants with rate, lift against control and how sure the result is.

Open in Studio

Installv1.0.1

aiw add @ai-website/feature-flags

Brings along utils, kit, button, icon, input, switch, sidebar

Usage

<FeatureFlags variant="experiment" title="Experiment" arms={[{ id, name, share, visitors, conversions, control }]} metric="Checkout rate" />

Source

Environments

The flag side by side in each environment, differences marked, and a copy from one environment to the next.

Open in Studio

Installv1.0.1

aiw add @ai-website/feature-flags

Brings along utils, kit, button, icon, input, switch, sidebar

Usage

<FeatureFlags variant="environments" title="Environments" environments={[…]} configs={[{ env, on, rollout, rules, fallback }]} />

Source

webhooks

Webhooks

Webhook screens. Endpoints with 24 hour health, an event picker, a delivery log with request and response, an event catalog and a test sender.

Endpoints
Add endpoint
Delivery log
Event catalog
Test event

Props and details

Endpoints

Each endpoint with events, last delivery, a switch to pause and hourly bars for the last day that turn red when deliveries fail.

Open in Studio

Installv1.0.1

aiw add @ai-website/webhooks

Brings along utils, kit, button, icon, input, select, switch, dialog, sidebar

Usage

<Webhooks variant="endpoints" title="Webhooks" endpoints={[{ id, url, events, enabled, health }]} events={[…]} />

Source

Add endpoint

URL with an https check, events grouped with search and group checkboxes, then the signing secret once.

Open in Studio

Installv1.0.1

aiw add @ai-website/webhooks

Brings along utils, kit, button, icon, input, select, switch, dialog, sidebar

Usage

<Webhooks variant="add-endpoint" title="Add endpoint" events={[{ type, group, description }]} />

Source

Delivery log

Deliveries filtered by result, the detail with status, duration, attempt, request and response, and a resend that adds the new attempt.

Open in Studio

Installv1.0.1

aiw add @ai-website/webhooks

Brings along utils, kit, button, icon, input, select, switch, dialog, sidebar

Usage

<Webhooks variant="deliveries" title="Deliveries" deliveries={[{ id, event, endpoint, status, time, ms, attempt, payload }]} />

Source

Event catalog

Every event type in groups with search, the description, who receives it and an example body to copy.

Open in Studio

Installv1.0.1

aiw add @ai-website/webhooks

Brings along utils, kit, button, icon, input, select, switch, dialog, sidebar

Usage

<Webhooks variant="event-catalog" title="Events" events={[{ type, group, description, example }]} endpoints={[…]} />

Source

Test event

Pick endpoint and event, edit the body with a JSON check and watch the request get signed, sent and answered.

Open in Studio

Installv1.0.1

aiw add @ai-website/webhooks

Brings along utils, kit, button, icon, input, select, switch, dialog, sidebar

Usage

<Webhooks variant="test-event" title="Test" endpoints={[…]} events={[…]} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Developer settings on a page.

On this page

Key list

Create key

Permissions

Key usage

Roll key

Flag list

Staged rollout

Targeting rules

A/B experiment

Environments

Endpoints

Add endpoint

Delivery log

Event catalog

Test event

Similar components, Often combined with

Similar components

Often combined with