BoomerangFX · Internal Productivity Tool · March 2026

HealthTech Form
Migration AI Tool

HealthTech SaaS Prompt Engineering UX Design Data Migration React TypeScript Figma Make Anthropic Claude Process Automation
Live Demo ↗

Note: The linked prototype demonstrates the UI and user flow. The full AI integration — PDF extraction, Claude API streaming, and live JSON generation — runs locally and requires an Anthropic API key.

BoomerangFX Form Builder hero

Overview

I developed an AI-driven form migration dashboard that reduces clinic form onboarding time by 90% — combining Claude's language model with a custom-built React interface that lets implementation specialists audit every AI-generated field before export.

Tools React · TypeScript · Tailwind CSS · Vite · Anthropic API · pdfjs-dist · mammoth.js · Figma Make
Role Product Designer + Developer
Timeline 2 days
Form builder UI overview

The Problem

One of the many tasks of the Data Migration team at BoomerangFX is to transfer clinical forms from clients' old practice management software into BoomerangFX. It's a tedious process involving manually inputting every text field, checkbox, signature line, and consent paragraph inside BoomerangFX's forms.io builder — a form-rendering platform used across the patient management system.

Using ChatGPT to convert forms to JSON yielded ~okay~ results. Oftentimes, a lot of text and input fields were skipped, or it wouldn't handle forms more than 1 page long, leading to missing information. This could be very dangerous for surgical consent or pre- and post-procedure forms!

This process wasn't just inconvenient — it's a liability.

Current tool screenshot

Current Tool

My Role

I identified the problem, designed the solution, and built it. Working within Figma Design for UI design, then Figma Make for the initial prototype, and extending the codebase in TypeScript — I owned the full product lifecycle: problem framing, UX design, AI integration, and deployment.

Problem Framing UX Design AI Integration Deployment

My Solution

A three-panel web application that replaces the manual process entirely:

Left Panel

Upload

Drag and drop any client form. Accepts PDFs, Word documents (.docx), and scanned images (PNG/JPG/WEBP). Each file type is processed through a dedicated extraction pipeline.

Middle Panel

Audit

A live form preview renders every field, checkbox, radio button, and signature line so the specialist can visually verify output before touching any JSON. This is the human-in-the-loop checkpoint that solves the AI hallucination problem.

Right Panel

Output

The raw Form.io JSON streams in real-time as Claude generates it. Copy or download with one click.

Extraction Types

File Type Library Method
PDF pdfjs-dist Full text extraction page by page
Word (.docx) mammoth Raw text extraction from XML
Images (PNG/JPG) FileReader API Base64 DataURL → Claude Vision
Updated UI screenshot

How It Works

Client sends PDF / Word doc / Image Any file type dropped into the upload panel
Tool extracts text pdfjs-dist / mammoth / FileReader — each routed to the correct library
Claude generates Form.io JSON Strict schema prompt ensures every field is captured verbatim
Specialist audits live preview → exports JSON Human checkpoint before anything lands in production

Features

Features overview
API key prompt

Anthropic Key Prompt — Your key is stored only in the browser session and never sent anywhere except Anthropic's API directly. Cleared when you close the tab.

Save to library

Save to Library — File common clinic structures (e.g. "Intake Form," "Consent Form") to auto-map fields on future uploads.

Template library

Template Library — Manage saved forms by category. Remove outdated templates with a single click.

BoomerangFX Design

Design brainstormed and prototyped in Figma Design before extending the codebase — covering branding, colour palette, component layouts, and the three-panel architecture.

Figma design brainstorm

Design brainstorm on Figma Design

Why Claude Over ChatGPT?

Criteria ChatGPT (GPT-4o) Claude Sonnet
Forms longer than 1 page Truncates Handles fully (8+ pages)
Medical text accuracy Paraphrases Reproduces verbatim
Scanned image forms Limited Native vision support
Cost per generation ~$0.08 ~$0.10

For legal consent forms, paraphrasing is not acceptable. Claude was the only model that passed the accuracy test on real client documents.

Impact

90%
Reduction in migration time
8
Maximum form pages handled
12
Form.io component types auto-detected
3
File types supported
100%
Schema accuracy (human-verified)
Metric Result
Migration time reduction 90%
Maximum form length handled 8 pages
File types supported PDF, Word, PNG, JPG
Form.io component types auto-detected 12
Schema accuracy (human-verified) 100%

Technical Stack

React TypeScript Tailwind CSS Vite Anthropic API Claude Sonnet pdfjs-dist mammoth.js Figma Make
src/ ├── components/ │ ├── Header.tsx # BoomerangFX branding bar │ ├── LeftPanel.tsx # File upload + library │ ├── MiddlePanel.tsx # Live form preview renderer │ ├── RightPanel.tsx # JSON output with syntax highlighting │ └── ApiKeyModal.tsx # Secure API key entry ├── utils/ │ ├── claudeService.ts # Anthropic API integration + streaming │ └── fileExtraction.ts # PDF / DOCX / image content extraction └── App.tsx # State management

Development Challenges

Node.js binary incompatibility on macOS

The system Node binary was compiled for macOS 13.5 (Ventura) but running on an older OS version, causing a C++ standard library crash on every npm command.

Fix: Installed nvm (Node Version Manager) to manage Node versions independently of the system:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.zshrc
nvm install 18
nvm use --delete-prefix v18.20.8

Static mockup vs. real AI output

Figma Make's generated prototype rendered a hardcoded form card regardless of what file was uploaded.

Fix: Rewired the entire data flow in App.tsx to call the Claude API on file selection, stream the response live into the right panel, and feed the parsed JSON into a custom recursive Form.io renderer.

1. Install PDF parsing library to read actual files
2. Extract text and field information from the PDFs
3. Map extracted content to the correct forms.io JSON structure

Multi-file-type extraction

PDFs, Word docs, and images each require a completely different extraction strategy. Built a unified fileExtraction.ts utility that routes each file type to the correct library and returns a consistent result object.

PDF → pdfjs-dist (reliable text extraction)
Images → Claude Vision (base64 DataURL → vision API)
Word → mammoth.js (converts .docx to HTML/text)

What's Next

Reflection

This project sits at the intersection of where I want to work: meaningful work and a UI that brings a solution to life.

I'm happy to have improved work processes of the data migration team so early at my tenure at BoomerangFX, and I look forward to using my skills in design and engineering to create even better experiences.