Reference examples

These contributions ship as real source inside the official kit zips — fork one as a starting point, or read it to learn the SDK and the manifest contracts.

How to open them: download the Designer Kit or Developer Kit from Studio, unzip, and browse examples/. With the CLI installed you can also run vincia examples to list them and vincia info <name> for details.

Developer Kit examples

One example per developer-side contribution shape — five connectors (one per capability), one workflow step, one widget, one solution pack.

Connector · payment

connector-stripe-payment

A full Stripe payment connector: charge, refund, webhook reconciliation. Shows how to declare scopes (secrets + outbound hosts) in the manifest and use the testing helpers.

In the kit: examples/connector-stripe-payment/

Connector · storage

connector-s3-storage

S3-compatible blob storage with presigned URLs, multipart uploads, and listing. The reference for the storage capability interface end-to-end.

In the kit: examples/connector-s3-storage/

Connector · notification

connector-slack-notification

Slack webhook delivery with retry + rate-limit handling. The smallest of the 5 connectors — read this first if you’re learning the SDK.

In the kit: examples/connector-slack-notification/

Connector · sign-in

connector-google-auth-provider

Google OAuth as a sign-in provider. Shows the redirect handshake, token verification, and profile-claim mapping the platform expects.

In the kit: examples/connector-google-auth-provider/

Connector · mailbox

connector-sendgrid-mailbox

SendGrid as an outbound mailbox provider. Inbound (IMAP/parse) is sketched for a follow-up. Demonstrates HMAC verification via `ctx.crypto.hmac`.

In the kit: examples/connector-sendgrid-mailbox/

Workflow step

workflow-node-pdf-export

A typed-IO workflow step that renders a PDF from an HTML template. Demonstrates outbound calls, error envelopes, and idempotency.

In the kit: examples/workflow-node-pdf-export/

Widget

widget-stripe-checkout

On-page checkout widget. Cross-tier example — calls into the Stripe connector via `ctx.connector.call`, showing how widgets stay thin while connectors own integration logic.

In the kit: examples/widget-stripe-checkout/

Solution pack

solution-pack-saas-billing

A bundle that wires a blueprint + payment connector + checkout widget + invoicing workflow into a turnkey SaaS-billing kit. Manifest-only — no code of its own.

In the kit: examples/solution-pack-saas-billing/

Designer Kit examples

Three reference design templates (one per archetype variant) plus worked examples for theme, section library, and ready-made collection.

Design template · website

template-minimal-website

A simple 3-page marketing site (home / about / contact). The "what good looks like" baseline for the website archetype.

In the kit: examples/template-minimal-website/

Design template · portal

template-portal-clean

A 6-page admin portal exemplar (shell, dashboard, list, detail, settings, users). Demonstrates the widget supplement focused on data-heavy widgets.

In the kit: examples/template-portal-clean/

Design template · website + customer accounts

template-shop-website

8-page storefront with customer accounts: product grid + cart + checkout + login / signup / password-reset + customer dashboard. Reference for the auth-trio treatment.

In the kit: examples/template-shop-website/

Theme pack

theme-editorial-warm

Warm color scale + serif/sans pairing + spacing scale. Re-skin any template by overriding the `:root` token values.

In the kit: examples/theme-editorial-warm/

Section library

section-library-hospitality

Pre-composed hero / amenities / booking-CTA / testimonial / contact sections tuned for hotel + restaurant + venue builds.

In the kit: examples/section-library-hospitality/

Ready-made collection

collection-small-clinic

Seeded data + schema for a small-clinic intake portal: bookings, patient records, reminder templates. A drop-in starter the brand layer wraps.

In the kit: examples/collection-small-clinic/

Want to publish one yourself?

The Quickstart walks the agent-first flow from open-the-kit to publish. Or pick a contribution type from /types/developer or /types/designer and read the guide.