FlowPulse

• 

  FlowPulse WebMCP architecture: agents update a visible workflow while humans retain final confirmation.

• 

  React, TypeScript, WebMCP, Netlify, and Playwright: five tested tools with visible UI effects.

• 

  Employee provisioning journey: from fragmented requests to accountable human review.

• 

  Required-field validation visibly blocks incomplete workflow progress.

• 

  Completed workflow review: a person checks grouped answers before creating a local receipt.

What it does

FlowPulse is a WebMCP-powered workflow studio for forms that are usually too multi-step, contextual, or error-prone to complete quickly. It starts with a practical employee tech-and-workspace provisioning flow, alongside residential lease, B2B vendor onboarding, and a clearly labelled synthetic travel-visa sandbox.

A person stays in control: an agent can inspect the current form, fill known synthetic values, validate required information, switch workflows, and prepare the final review. The person sees every change in the visible UI and completes the final receipt action themselves.

Why WebMCP

Traditional form automation is opaque: it scrapes a page or runs beside it, leaving people unsure what changed. FlowPulse exposes five browser-native, goal-shaped WebMCP tools:

• getFormSchema inspects the active workflow, required fields, current values, and step.
• fillFormFields updates only fields belonging to the active form, visibly in the UI.
• validateForm returns missing required fields and marks problems on the form.
• switchTemplate changes the workflow, form, and contextual Copilot guidance together.
• submitWorkflow validates and opens the review screen; it deliberately stops before final human confirmation.

This lets people and agents work in the same visible workflow instead of treating the browser as a fragile screen-scraping surface.

Experience and safety

The app is responsive at mobile, tablet, and desktop sizes. On smaller screens, workflow selection and Copilot controls become on-demand drawers rather than competing fixed sidebars. Required fields have inline validation, progress is explicit, and the review screen groups answers by step before a local receipt is created.

The travel-visa flow is explicitly a synthetic-data sandbox. The app does not claim persistent audit storage or automatic final submission.

Implementation

FlowPulse is a React + TypeScript + Vite application, deployed on Netlify. WebMCP tools are defined with @nekuda/webmcp-sdk and registered with lifecycle cleanup. Automated Playwright tests cover responsive layouts, validation, full review flow, template switching, and registration/invocation of all five tools with visible UI effects.

Links

• Live app: https://flowpulse-app.netlify.app
• Source code: https://github.com/dcontessa/flowpulse

Built With

• nekuda/webmcp-sdk
• netlify-functions
• playwright
• react
• tailwind-css
• typescript
• vite
• webmcp