Module 1.4 — Modern Frameworks

Use plain JavaScript as a reference

What it is: A framework-free implementation makes registration, dependencies, and cleanup explicit.

Why learn: The reference reduces magic and helps diagnose problems hidden by hooks or dependency injection.

Before modeling

Write the person’s request, the current state, and the evidence that will prove completion.

Starting error

Starting with a function name or a button produces a tool with no clear human purpose.

Predict before opening the code

What information changes the decision? What effect needs to appear in the interface? Answer before implementing.

const lifecycle = new AbortController();
registerTools(modelContext, services, lifecycle.signal);

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

pure function

explicit registration

AbortController

baseline

Model an idempotent React hook

What it is: The effect registers tools for the current state, and cleanup aborts the previous registrations.

Why learn: Strict Mode, rerenders, and dependency changes must not duplicate names in the catalog.

Question	Strong contract	Weak contract
When to use it?	The description names intent and context.	“Does things” or “manages.”
What do you receive?	Only the data you need.	Generic, unlimited object.
What does it return?	Verifiable state and next action.	Text without a protocol.
How does it fail?	Code, reason, and recovery.	Opaque exception.

Do

✓ Use specific verbs.
✓ Delimit inputs.
✓ State the evidence.

Avoid

✗ Mix intentions.
✗ Accept any object.
✗ Hide effects.

useEffect(() => {
  const controller = new AbortController();
  registerTools({ courseId, signal: controller.signal });
  return () => controller.abort();
}, [courseId]);

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

useEffect

dependencies

cleanup

Strict Mode

Wrap it in an Angular service

What it is: A service receives dependencies, registers the tools, and exposes cleanup to the component or route.

Why learn: Dependency injection keeps rules testable and separate from the visual lifecycle.

Observe

Capture state, input, and context before the action.

Decide

Validate preconditions and choose the allowed transition.

Run

Apply the shared rule and respect cancellation.

Prove

Update the interface and return a structured result.

Checkpoint

If step 2 fails, the tool doesn't try to “make it work”: it returns an explicit recovery.

ngOnDestroy() {
  this.webMcpRegistration.abort();
}

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

service

OnDestroy

testability

Respect the client and server in Next.js

What it is: document.modelContext only exists on the client and after the document is active.

Why learn: Separating the client component, loading, and server API avoids accessing Document during SSR.

REFERENCE CODE

"use client";
useEffect(() => registerPageTools(), []);

Input

It is small, documented, and verifiable.

Execution

Reuses the application's actual rule.

Output

Lets you verify the effect and continue.

Read the code as a contract

Highlight where input is validated, where the effect happens, where cancellation arrives, and where the UI is updated.

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

use client

hydration

SSR

API route

Update tools when changing routes

What it is: SPAs need to remove tools from the previous route and register only the capabilities of the new screen.

Why learn: A stale catalog is stale UI: the agent sees an action that the person can no longer perform.

Simulated failure

Run the scenario with missing state, invalid input, or unavailable capability.

Expected recovery

The response explains what failed, what remains safe, and which action can continue.

Minimum test matrix

✓ reproducible happy path

✓ actionable invalid input

✓ cancellation ends work

✓ fallback preserves the journey

✓ interface reflects the state

✓ backend maintains authorization

routeController.abort("route changed");
routeController = new AbortController();

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

router

unmount

current catalog

transition

Compare implementations using the same test

What it is: Different frameworks must fulfill the same observable contract for registration, execution, UI, and cleanup.

Why learn: A shared matrix separates differences in ergonomics from actual differences in behavior.

Synthesis exercise

1. Explain the problem without using the technology name.
2. Map the state before and after.
3. Implement the smallest functional proof.
4. Trigger a failure and record the recovery.
5. Deliver code, evidence, and one known limitation.

Module challenge

Implement the same catalog in plain JavaScript and in a framework, demonstrating mounting, updating, and unmounting.

Responsible Integrator criterion

The implementation must work, explain its limits, and preserve the human path when the experimental capability is unavailable.

| Implementação | registra 1x | atualiza UI | aborta | fallback |
| Vanilla       | sim         | sim        | sim    | sim      |
| React         | sim         | sim        | sim    | sim      |

Going deeper: evidence worth keeping

Record the input, previous state, decision made, result, and visible change on the page.

Also include a simulated failure and the observed behavior without WebMCP support.

Key concepts

same contract

same tests

proven cleanup

compatibility

📦 Module delivery

Implement the same catalog in plain JavaScript and in a framework, demonstrating mounting, updating, and unmounting.

Acceptance criterion

The implementation works with WebMCP support and preserves the manual path when the API is unavailable.

Evidence

Include code, the tested scenario, the observed result, and a known limitation.

← Back to the learning path Validate final catalog →

Technical sources

Draft and official WebMCP repository
Rendered specification
Official snapshot: 26/08/2026 · commit 41d12f0. The declarative API remains experimental; validate the draft before production.