Ejemplos

Start with the behavior you need.

Explore focused examples of shared operations, explicit rules, adapted interfaces and reusable capabilities. Each walkthrough tells you what it demonstrates and what you still need to implement.

TRY IT BEFORE YOU READ IT

A useful idea becomes clearer
when you can change it.

Use the working local examples, then follow the source guides for the implementation.

11 FOCUSED WALKTHROUGHS

Choose a task. Follow the behavior. Bring the useful parts into your own product.

11 resultados

Contracts / Beginner

Write your first contract

Define an operation

Follow user.create from an email schema to a typed handler. Start with the smallest maintained example.

  1. Describe the input
  2. Name the operation
  3. Follow the handler

Qué demuestra la fuenteThe maintained source declares user.create with a required email input and a typed output.

No demuestraA database account is created or an email is sent.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A small user.create command accepts one required email address. Its current handler returns the same email. This gives you a compact place to understand the contract and handler boundary before adding storage or authentication.

  1. Describe the input

    Read UserInput in src/contracts/user.ts. The schema has one required EmailAddress field. The command uses the schema for both input and output.

  2. Name the operation

    Inspect the user.create key, version 1.0.0, owner, goal, and anonymous authentication policy. These describe the operation and its boundary.

  3. Follow the handler

    Open src/handlers/user-input.handler.ts. HandlerForOperationSpec derives the handler shape from CreateUser. The implementation returns input.email; it does not create a persisted account.

  4. Inspect and adapt the starter

    Read the package smoke fixture and validation script. Replace the echo handler with your own behavior, then test that behavior and the contract boundary together.

What this example establishes
Qué demuestra la fuente
  • The maintained source declares user.create with a required email input and a typed output.
  • The handler is typed from the operation specification.
  • A source smoke fixture checks starter metadata and feature registration.
No demuestra
  • A database account is created or an email is sent.
  • This example exposes an MCP tool: its manifest disables MCP.
  • This starter implements an approval gate, persistence, or production authentication.
Reproduce the source checks

The smoke fixture checks metadata and feature wiring; validation checks the contract. Neither is an account-creation integration test.

Directorio de trabajo examples/minimal

bun run smoke
bun run validate

Commands and source inspected; not executed here.

Execution / Intermediate

Stop a write before it runs

Control side effects

Trace a REST request through an approval gate and inspect the zero-handler-call denial assertion.

  1. Declare the boundary
  2. Inspect the denied request
  3. Inspect the approved request

Qué demuestra la fuenteThe inspected denial test asserts that the handler is not invoked when a required receipt is missing.

No demuestraA fresh successful execution in this review.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A synthetic rest.approval.protected command has write and external-side-effect declarations. The fixture sends a request first without approval evidence, then with a receipt bound to the operation and input.

  1. Declare the boundary

    The fixture defines a command with execution.effects set to write and external-side-effect, and execution.approval.required set to true.

  2. Inspect the denied request

    The first test binds a handler with a call counter. Without a receipt, it expects HTTP 403, APPROVAL_REQUIRED with reason missing_receipt, and calls equal to zero.

  3. Inspect the approved request

    The second test provides a receipt through createFetchHandler's approvalReceipt option and an approval port with a controlled clock. The response is expected to be 200 with value ran.

  4. Apply the pattern to your side effect

    Replace the synthetic handler with your operation and trusted receipt source. Add tests for the exact subject, operation, input, expiry, and effect requirements your application uses.

What this example establishes
Qué demuestra la fuente
  • The inspected denial test asserts that the handler is not invoked when a required receipt is missing.
  • The approved case adapts receipt evidence outside the operation input.
  • The fixture has an inspectable positive and negative request path.
No demuestra
  • A fresh successful execution in this review.
  • An end-to-end human approval UI or trusted production receipt issuer.
  • A real external write: the approved handler only returns a fixture value.
Reproduce the source checks

The source assertions require a 403 denial before invocation and a 200 response for the controlled valid-receipt case.

Directorio de trabajo packages/platform/delivery/contracts-runtime-server-rest

bun test src/rest-approval-enforcement.test.ts

Test source inspected; not executed here.

UI / Intermediate

Build a table from a data view

Build an interface

Compare a declarative account table with the shared client and server controller surfaces.

  1. Start with the declarative table
  2. Compare rendering layers
  3. Explore visible states

Qué demuestra la fuenteThe source includes a declarative table contract and a shared account-grid showcase.

No demuestraServer throughput or database performance.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

The same sample account grid appears through ContractSpec's data-view, headless table, web primitive, and design-system layers. You can inspect how sorting, selection, expansion, loading, and empty states are represented without adopting a whole business template.

  1. Start with the declarative table

    The README's DataViewSpec references a sample query and declares a table view. Its initial state uses four rows per page, descending ARR sorting, a hidden notes column, and the account column pinned left.

  2. Compare rendering layers

    The showcase exposes client, server, DataView, web primitive, and native primitive lanes around the same account data. Inspect how each layer maps the shared table behavior.

  3. Explore visible states

    The UI source includes pinning, sorting, row expansion, simulated loading, empty state, and an interaction log. Its smoke fixture checks rendering and selected interactions.

  4. Adapt the source contract

    Replace sample account fields and the query reference with your own data contract. Establish server filtering, pagination, authorization, and performance behavior in your host application.

What this example establishes
Qué demuestra la fuente
  • The source includes a declarative table contract and a shared account-grid showcase.
  • The inspected smoke fixture asserts key UI controls, descending sort state, expansion, and row-press logging.
  • The generated registry declares an inline UI preview for data-grid-showcase.
No demuestra
  • Server throughput or database performance.
  • A live production dataset or backend integration.
  • A newly verified browser session in this review; the preview registration is source evidence.
Reproduce the source checks

The smoke source checks the table surfaces and selected interactions in a Happy DOM environment.

Directorio de trabajo examples/data-grid-showcase

bun test src/ui/DataGridShowcase.smoke.test.tsx

Test and preview source inspected; not executed here.

UI / Intermediate

Capture now, complete when ready

Build an interface

Use form contracts to accept a minimal intake while keeping missing readiness fields visible.

  1. Choose the form contract
  2. Inspect minimal intake
  3. Inspect conditional validation

Qué demuestra la fuenteThe inspected fixture separates acceptance from completion status.

No demuestraProduction form storage, submission delivery, or authentication.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A customer intake can begin with a name. In the fixture, a quick capture is accepted while email, phone, and consent remain completion debt. A richer profile can then determine whether the record is ready for the next workflow.

  1. Choose the form contract

    Inspect all-fields, progressive-steps, and customer-projection forms. The package includes field kinds, conditional rules, sections, and step layouts.

  2. Inspect minimal intake

    The quick-capture fixture contains a customer ID and display name. The smoke test expects capture to succeed and completion to remain incomplete with email, phone, and consent debt.

  3. Inspect conditional validation

    Another test builds Zod validation with relations and expects a missing repeated contact value to be reported at contacts[0].value.

  4. Use the public proof map

    The proof-config export lists docs, sandbox, forms, and UI entrypoints. Adapt through the supported exports, then supply your own persistence and submission behavior.

What this example establishes
Qué demuestra la fuente
  • The inspected fixture separates acceptance from completion status.
  • The source tests inspect field coverage, step layout, conditional validation, and public exports.
  • The public preview is deterministic fixture state with no required backend or credentials.
No demuestra
  • Production form storage, submission delivery, or authentication.
  • A production renderer for every host application.
  • A PII hint automatically implementing a privacy control.
Reproduce the source checks

The source assertions cover quick-capture acceptance, incomplete readiness, conditional validation, and supported public entrypoints.

Directorio de trabajo examples/form-showcase

bun run smoke

Commands and tests inspected; not executed here.

Governance / Advanced

Adapt the view. Preserve the boundary.

Build an interface

Inspect role-specific approval surfaces where adaptive hints cannot grant authority.

  1. Inspect the roles
  2. Separate permissions from policy
  3. Change presentation hints

Qué demuestra la fuenteThe inspected fixtures resolve surfaces for six roles.

No demuestraThat hiding a control replaces server-side authorization.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

An internal budget request reaches a founder, operations manager, frontline staff member, customer, AI agent, or auditor. Each role receives a relevant surface. Vendor commitment and budget exceptions retain explicit action boundaries across those views.

  1. Inspect the roles

    The internal approval fixture defines six roles and components for budget risk, vendor queues, requester status, agent procurement planning, and audit history.

  2. Separate permissions from policy

    The operations manager can be eligible for vendor selection while a budget exception still requires approval. The agent plan blocks vendor commitment and marks the budget exception as requiring approval.

  3. Change presentation hints

    The related service-delivery fixture compares plain and adaptive contexts and asserts unchanged action boundaries. The internal-approval fixture separately tests vendor restrictions and budget approval. Presentation guidance does not create authority.

  4. Inspect the restricted view

    The customer fixture hides protected actions and tests that explanations do not expose redacted information. Apply the same checks to the roles and data in your own workflow.

What this example establishes
Qué demuestra la fuente
  • The inspected fixtures resolve surfaces for six roles.
  • Tests assert that adaptive hints preserve policy and permission boundaries.
  • The internal approval tests distinguish blocked actions, approval-required actions, and hidden customer actions.
No demuestra
  • That hiding a control replaces server-side authorization.
  • That every host API or renderer automatically enforces the surface result.
  • A full production procurement app or an executed RoleMorph session in this review.
Reproduce the source checks

The source tests cover role resolution, adaptive-boundary invariance, vendor permission, budget approval, and customer hiding.

Directorio de trabajo packages/platform/ui/surface-runtime

bun test src/rolemorph/fixture-domains.test.ts

Fixture and tests inspected; not executed here.

Composition / Advanced

Compose nine feature hubs

Compose an application

Inspect one application composition with matching semantic routes for web and native.

  1. Read the composition fixture
  2. Compare semantic routes
  3. Inspect the hybrid override

Qué demuestra la fuenteThe source fixture composes all nine hubs.

No demuestraThat inert adapters connect to live providers.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A reference application composes Integration, Agent System, Agent Network, Workflow, Auth User, Auth Admin, Communication, CompanyOS, and Social Media hubs with deterministic adapters. It compares web and native route projections and applies an integration settings override.

  1. Read the composition fixture

    The fixture supplies the hubs' required ports with inert deterministic adapters. This makes the composition inspectable without provider credentials.

  2. Compare semantic routes

    The test expects nine hub keys and equal semantic, web, and native route ID lists.

  3. Inspect the hybrid override

    The reference imports a granular Integration Hub view model and uses a hybrid route/component override with the /settings/apps alias.

  4. Plan host qualification

    The result remains candidate. Replace fixture ports with your own integrations and qualify the deployed topology, including storage, queues, scheduling, recovery, and authorization.

What this example establishes
Qué demuestra la fuente
  • The source fixture composes all nine hubs.
  • The inspected test asserts semantic route parity between web and native projections.
  • The reference explicitly retains candidate readiness.
No demuestra
  • That inert adapters connect to live providers.
  • That matching route IDs prove feature parity in every renderer.
  • Production qualification for a specific deployment.
Reproduce the source checks

The fixture produces composition evidence, route parity, /settings/apps, and candidate readiness.

Directorio de trabajo examples/feature-hub-composition

bun run example
bun test src/run.test.ts

Commands and tests inspected; not executed here.

Agents / Intermediate

Draft freely. Send with approval.

Control side effects

Follow one contract boundary through a workflow and an in-memory MCP transport.

  1. Separate the two operations
  2. Inspect the workflow
  3. Inspect the MCP boundary

Qué demuestra la fuenteThe source smoke fixture drives a real MCP server/client over linked in-memory transports.

No demuestraDelivery of a Slack message, email, invitation, or other network request.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A reference agent drafts a message, waits for approval, and invokes sendMessage. The MCP smoke test uses a real MCP server and client over an in-memory transport. The actual handlers remain deterministic fixture logic.

  1. Separate the two operations

    The source defines draftAndSend.draftMessage and draftAndSend.sendMessage. Drafting is automation-safe; sending declares its approval requirement.

  2. Inspect the workflow

    The example connects draft, approval wait, send, and receipt stages through the WorkflowDevkit adapter. This is a composed reference flow, not an invitation feature in the minimal starter.

  3. Inspect the MCP boundary

    The smoke test registers the operation registry as MCP tools, then calls sendMessage with valid, absent, and tampered receipt evidence. It expects success only for the valid case.

  4. Read what send actually does

    The bound handler derives a message ID and returns status sent in memory. To send through a real provider, supply your own port and preserve the same execution boundary.

What this example establishes
Qué demuestra la fuente
  • The source smoke fixture drives a real MCP server/client over linked in-memory transports.
  • The fixture asserts APPROVAL_REQUIRED for missing and tampered receipts.
  • The same registry gate is used by the MCP adapter rather than a second hand-written approval path.
No demuestra
  • Delivery of a Slack message, email, invitation, or other network request.
  • A fresh successful run or production human approval system.
  • That the minimal example includes MCP; this is a separate source package.
Reproduce the source checks

The source fixtures inspect workflow sequencing and successful versus denied MCP calls with deterministic handlers.

Directorio de trabajo examples/draft-and-send-agent

bun test src/mcp-smoke.test.ts src/draft-and-send.workflow.test.ts

Test and handler source inspected; not executed here.

CompanyOS / Advanced

Trace a signal to a reviewable outcome

Inspect execution evidence

Walk a support-to-product scenario through permissions, correction replay, and an evidence receipt.

  1. Read the messy signal
  2. Inspect the operating graph
  3. Replay blocked and corrected paths

Qué demuestra la fuenteThe provider-free source fixture links graph, replay, and receipt data for one canonical scenario.

No demuestraA real customer outcome, external provider execution, or production integration.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A customer support signal reveals a product gap. The canonical fixture builds a permissioned graph, redacts data before agent access, compiles a dry-run runbook, blocks stale or conflicting paths, and keeps PM approval visible.

  1. Read the messy signal

    Begin with the support-to-product scenario in the workbench. Treat other scenario previews as comparison material: this is the documented canonical end-to-end path.

  2. Inspect the operating graph

    Follow signals, actors, capabilities, policies, approvals, and evidence. The permission view makes visible what an actor can query and what is redacted.

  3. Replay blocked and corrected paths

    The timeline includes policy denials, pending approval, stale/conflict checks, state differences, and a correction replay. The authorized execution lane stays dry_run.

  4. Inspect the receipt

    The exported structured receipt is derived from the same deterministic replay events. Use it to inspect the demonstrated technical sequence and its remaining approval boundaries.

What this example establishes
Qué demuestra la fuente
  • The provider-free source fixture links graph, replay, and receipt data for one canonical scenario.
  • Guardrail tests assert no network, secrets, or production writes and a dry-run execution lane.
  • The receipt's evidence scope is documented explicitly.
No demuestra
  • A real customer outcome, external provider execution, or production integration.
  • Legal compliance certification.
  • That every comparison scenario has the same complete path.
Reproduce the source checks

The source guardrails inspect deterministic local dependencies and dry-run proof boundaries.

Directorio de trabajo examples/companyos-ai-os-proofs

bun test src/provider-free-guardrails.test.ts src/example.smoke.test.ts

Source and tests inspected; not executed here.

CompanyOS / Advanced

Turn a request into bounded technical proof

Inspect execution evidence

Inspect a fixed request, a reviewed plan, and a recorded or explicitly enabled loopback proof.

  1. Inspect the prepared request
  2. Choose the execution mode explicitly
  3. Check the bound proof

Qué demuestra la fuenteThe source differentiates prepared-profile, validated-recording, prepared-simulation, live-ai, and live-browser modes.

No demuestraA current live browser run or enabled deployment configuration.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A fixed enterprise request moves through Understand, Shape, Match, Bound, and Verify. The package default uses prepared analysis and a committed recording. A host can explicitly enable live analysis and a bounded loopback browser run after preflight.

  1. Inspect the prepared request

    The source uses one allowlisted profile and a curated capability map. It shapes the request into a reviewed Outcome Pack and bounded proof plan.

  2. Choose the execution mode explicitly

    The package's prepared runtime exposes recorded evidence and reports live browser execution unavailable. The web host may inject its API-backed runtime with explicit enablement and browser preflight.

  3. Check the bound proof

    The proof plan permits a narrow loopback mutation and structured read-back. Approval denial and off-domain attempts are blocked; assertion failures remain visible.

  4. Inspect recorded artifacts

    The repository includes companyos-acme-proof.png and a validated-recording manifest. The recording schema binds profile, plan digest, captured run, proof, and artifact hashes. A stored recording is evidence of its captured run, not evidence of a new live run.

What this example establishes
Qué demuestra la fuente
  • The source differentiates prepared-profile, validated-recording, prepared-simulation, live-ai, and live-browser modes.
  • A committed screenshot and recording manifest exist at the cited revision.
  • The prepared runtime rejects a recording/profile mismatch and represents blocked and failed scenarios explicitly.
No demuestra
  • A current live browser run or enabled deployment configuration.
  • Customer acceptance, business impact, or broad arbitrary-request automation.
  • Sending invitations or operating on external production domains.
Reproduce the source checks

The repository verifier checks the committed recording. Use the package README for the separate browser-test and host enablement path.

Directorio de trabajo examples/companyos-ai-solutions-engineer-poc

bun run recording:verify

Manifest structure, artifacts, and source inspected; hashes and runtime not reverified here.

Agents / Advanced

Review an agent's migration proposal

Control side effects

Follow a deterministic release migration through scoped subagents, digest-bound approval, and a draft PR receipt.

  1. Compile the application
  2. Inspect the migration scope
  3. Bind approval and apply once

Qué demuestra la fuenteThe inspected source asserts separate subagent authority and digest-bound approval.

No demuestraA real patch applied to a user's repository or an actual GitHub PR.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A fixture release removes billing.invoices.createLegacy and identifies two affected consumer files. The reference separates impact analysis, migration, and independent verification, then produces governed patch and draft-PR evidence without contacting GitHub.

  1. Compile the application

    The source compiles the release-steward filesystem application and inspects required approvals for patching, draft PR creation, and selected delegation tools.

  2. Inspect the migration scope

    The fixture calculates an immutable source digest and identifies the affected billing files. Subagent evidence records permitted tools and denied effects, including auto-merge.

  3. Bind approval and apply once

    Tests assert that approval is bound to migration digests, changed material invalidates it, and the patch invocation occurs once even when replayed.

  4. Read the remaining qualification

    The fixture's PR URL is under github.example.test, its PR is a draft, and autoMerge is false. Adapter and deployment composition results explicitly remain candidate with unresolved live requirements.

What this example establishes
Qué demuestra la fuente
  • The inspected source asserts separate subagent authority and digest-bound approval.
  • Tests assert one application invocation, replay evidence, a draft result, and no auto-merge.
  • Candidate readiness retains unresolved requirements for exact live environments.
No demuestra
  • A real patch applied to a user's repository or an actual GitHub PR.
  • Successful CI in a production repository; this fixture reports deterministic CI evidence.
  • Production isolation or deployment qualification merely because a topology composes.
Reproduce the source checks

The source fixture returns deterministic migration, approval, replay, draft-PR, adapter, and candidate-readiness evidence.

Directorio de trabajo examples/agent-application-foundation

bun run example:release-steward
bun test src/release-steward/release-steward.test.ts

Commands and tests inspected; not executed here.

Knowledge / Intermediate

Answer against a named knowledge snapshot

Govern knowledge

Trace a deterministic answer to approved rule versions, then inspect how citations change after review and publication.

  1. Validate the request envelope
  2. Search one snapshot
  3. Enforce scope and citations

Qué demuestra la fuenteThe inspected answer builder uses explicit snapshot, jurisdiction, and scope inputs.

No demuestraLegal or regulatory correctness of the sample rules.

Inspect the walkthroughBehavior · proof and limits · source checks

Follow the source behavior

A deterministic assistant searches a named curated snapshot. The integration fixture publishes an initial rule version, creates and reviews a change, publishes a second snapshot, and checks that the new answer cites that snapshot.

  1. Validate the request envelope

    The orchestrator checks the request envelope before searching. An invalid envelope returns a refused answer with a reason code.

  2. Search one snapshot

    The caller supplies kbSearch. The orchestrator uses the snapshot ID and jurisdiction from the validated envelope and derives citations from the returned rule-version IDs.

  3. Enforce scope and citations

    Scope and citation checks can replace the draft with an escalation or blocked answer. The answer builder is deterministic and makes no LLM calls.

  4. Review and publish a change

    The integration test uses in-memory KB and pipeline handlers, approves updated rule material, publishes a new snapshot, and asserts that a subsequent answer cites it.

What this example establishes
Qué demuestra la fuente
  • The inspected answer builder uses explicit snapshot, jurisdiction, and scope inputs.
  • The integration fixture asserts citation changes after a reviewed publication path.
  • The example can be inspected without a model provider.
No demuestra
  • Legal or regulatory correctness of the sample rules.
  • A guarantee against hallucinations for an arbitrary model integration.
  • Production knowledge quality, expert identity, or access controls supplied by a host application.
Reproduce the source checks

The source fixture creates two approved snapshots and checks that each answer cites the selected snapshot.

Directorio de trabajo examples/policy-safe-knowledge-assistant

bun test src/integration.test.ts

Orchestrator and test source inspected; not executed here.

Tu vista

Make room for your context.

Shape the presentation around this moment. You can change it whenever you need.

Tu contexto

The different parts of you

Choose a starting point

Una mezcla útil de contexto, imágenes y orientación discreta.

Tune each dimension
Each dimension can change independently. Product permissions and available actions stay unchanged.

Support the way you begin and return

Tune your support

Comodidad de lectura

Elige tu idioma

El idioma de la interfaz solo cambia el texto. Los mercados, precios y flujos de trabajo conservan sus propios ajustes.

Cobertura de traducción

Parte del contenido se muestra en inglés.

Navegación151
Grafo616
Categorías188
Portafolio332
Ejemplos2035
Vista previa de la fuente41

Se añadirán más traducciones a medida que se revise el contenido.

Esta preferencia se guarda en este navegador.

Buscar en el sitio web

Puntos de partida útiles

Sin resultados. Prueba una frase más corta, un nombre de operación u otro ámbito de búsqueda.

UN POCO DE ESPACIO PARA EXPLORAR

Encuentra algo que explorar.

Abre una vista detallada en esta página, prueba otra perspectiva o sigue el detalle a su propia página.

Cómo funcionan las vistas previas y los controles
01

Mirar antes de salir

Pasa el cursor por un enlace o enfócalo con Tab para ver una vista previa. Hacer clic en el enlace original o pulsar Intro siempre abre su destino.

02

Mantener el contexto

Entra en la vista previa para explorar sus secciones. Usa Alt + ↓ desde un enlace enfocado para entrar con el teclado. Escape la cierra.

03

Abrir las posibilidades

Las filas desplegables, las perspectivas y los controles destacados revelan más. Tu vista cambia la comodidad de lectura y el contexto que exploras.

Un botón separado para mirar más de cerca

Muestra pequeños botones de vista previa junto a los enlaces donde haya espacio. Toca el ojo para inspeccionar o el enlace para ir directamente. Esta elección permanece en esta pestaña.

No se recoge historial de navegación. El movimiento reducido sigue tu dispositivo y Tu vista.