• 

• 

• 

• 

• 

TaskBridge — A job workspace designed for humans and their AI agents

Inspiration

Job hunting is full of repetitive, low-judgment work: searching through dozens of listings, reading requirements, comparing them against your skills, and tracking interesting opportunities.

As someone who has personally experienced this process, I started thinking about where AI agents could genuinely help. Agents are well suited to discovery, filtering, and repetitive tasks, yet most websites still force them to interact like humans, clicking through interfaces that were never designed for them.

When I discovered the WebMCP Challenge, I wanted to explore the opposite approach: what if an application treated the AI agent as a first-class user?

That idea became TaskBridge.

TaskBridge is a job workspace where humans and AI agents collaborate. The agent discovers opportunities, compares them against a candidate's profile, and shortlists relevant jobs. The human remains responsible for judgment and final decisions.

Saving a job can be automated. Applying for one is always the human's call.

What it does

TaskBridge allows users to browse and manage job opportunities through a familiar web interface while exposing structured capabilities to AI agents through WebMCP.

The agent can:

• Search for job opportunities.
• Retrieve detailed job information.
• Access the candidate's profile.
• Save relevant opportunities.
• Retrieve saved jobs.
• Draft a tailored application.

For example, a user can ask an agent to find remote jobs matching their experience. The agent retrieves their profile, searches available opportunities, compares requirements, and saves the strongest matches for the user to review.

TaskBridge also supports live remote job listings and allows users to maintain an editable candidate profile. Users can upload a CV, which can be parsed to help populate their profile.

The goal is not to replace the job seeker, but to reduce the repetitive work surrounding job discovery and applications.

How we built it

TaskBridge is built with Next.js, TypeScript, and Tailwind CSS.

The application registers six tools using the browser-native WebMCP API (document.modelContext.registerTool):

• search_jobs
• get_job_details
• get_candidate_profile
• save_job
• get_saved_jobs
• apply_job

One of the key architectural decisions was making the human interface and AI agent tools share the same underlying logic layer. The dashboard and the agent therefore use the same search, ranking, and application-generation logic rather than maintaining separate implementations.

Job matching uses a simple and explainable overlap score between a job's tags and the candidate's skills and interests:

$$ \mathrm{match}(j) = \mathrm{round}\left( 100 \cdot \frac{|T_j \cap (S \cup I)|}{|T_j|} \right) $$

where Tj represents a job's tags, while S and I represent the candidate's skills and interests.

Live remote jobs are fetched from the Remotive feed through a route handler, with bundled sample data acting as an automatic fallback so the application remains functional even if the external feed fails.

Users can edit their candidate profile and upload a CV. PDF and DOCX files are parsed locally, with optional AI-assisted parsing available through the user's own OpenRouter API key.

The apply_job tool can generate a tailored cover letter, but deliberately never submits an application. The user reviews the draft and decides whether to apply through the original job posting.

The project itself was also built through human and AI collaboration. I directed the product and technical decisions while using an AI coding agent to help scaffold, refactor, and verify parts of the application.

Challenges we ran into

Working with an emerging browser API

WebMCP is still an emerging standard, which meant dealing with browser implementation quirks during development and testing.

Chrome's testing environment can return inputSchema as a JSON string and reject certain tool execution paths. I handled this by normalizing schemas and ensuring the same underlying handlers could execute consistently.

React StrictMode also introduced double-mount behaviour that could interrupt tool registration. This required careful lifecycle handling using AbortController.

Hydration-safe persistence

Saved jobs, applications, and candidate profiles are stored using localStorage, but the application also needs to render correctly on the server.

I used useSyncExternalStore with server snapshots to manage client-side persistence without introducing hydration issues.

Unstructured job data

Live job descriptions often arrive as messy HTML. Instead of injecting raw HTML into the application, I built a small parser that converts headings, paragraphs, and lists into structured content for safer rendering.

Demo reliability

A live external API can fail at exactly the wrong moment, especially when a demo is involved. Because computers apparently sense deadlines.

To avoid this, every data layer gracefully falls back to bundled sample data. I also built a development-only agent demo using an OpenRouter tool-calling loop and a smoke script to verify all six tools end-to-end without requiring a WebMCP-capable browser.

Accomplishments that we're proud of

• Building a complete human-and-agent collaboration workflow in less than a day.
• Successfully exposing six structured capabilities through the browser-native WebMCP API.
• Designing the agent with clear trust boundaries, allowing it to assist with discovery and drafting without autonomously submitting job applications.
• Creating a shared logic layer so the human UI and AI tools always operate on the same underlying functionality.
• Supporting both live job data and reliable fallback data for a resilient demo experience.
• Building an accessible interface with visible focus states, reduced-motion support, a skip link, and an aria-live agent transcript.
• Demonstrating that WebMCP can enable a more intentional relationship between web applications and AI agents.

What we learned

WebMCP changes the integration model

There is no traditional integration layer to build between an application and an agent. The page declares its capabilities, and compatible agents can discover and use those tools directly.

The application's responsibility is to expose clear, reliable, and honest capabilities.

Tool descriptions are part of the user experience

Agents don't navigate an application by looking at buttons. They rely on tool descriptions and JSON schemas to understand what they can do.

Writing clear tool definitions turned out to be just as important as designing the human interface.

Trust boundaries improve agent experiences

Giving the agent the ability to search, compare, save opportunities, and draft applications while keeping final submission in human hands made the collaboration model clearer.

Trust boundaries are not necessarily limitations. They can be product features.

Designing for agents improves applications for humans too

Thinking in terms of structured data, explicit actions, and predictable states resulted in a cleaner application architecture and a simpler interface for human users.

What's next for TaskBridge

TaskBridge is currently a proof of concept exploring how job platforms can be designed for both humans and AI agents.

Future improvements could include:

• Integration with more job sources.
• Improved candidate-job matching.
• Application tracking.
• Interview and follow-up management.
• More advanced AI-assisted career research.
• Agent-assisted workflows across the entire job search process.

TaskBridge started with a simple question: what happens when we stop forcing AI agents to navigate websites designed exclusively for humans?

The answer I wanted to explore is simple: the future of the web may not be agents becoming better at pretending to be human users. It may be applications becoming better at working with both humans and their agents.

Built With

• accessibility
• ai-agents
• chatgpt
• human-ai-collaboration
• job-search
• json-schema
• llm
• mammoth
• mammoth.js
• mcp
• next.js
• node.js
• openai
• openrouter
• pdf.js
• react
• remotive-api
• rest-api
• tailwind-css
• tool-calling
• typescript
• vercel
• web-storage
• webmcp