BidLens

BidLens helps suppliers find, assess, compare, and prepare the right procurement opportunities through WebMCP-powered workflows with humans in control.

Comment

Inspiration

Small and growing suppliers often miss procurement opportunities because finding relevant tenders, understanding requirements, comparing options, and preparing documents can be time-consuming and fragmented.

BidLens was inspired by the need to make public procurement more approachable for Zimbabwean suppliers. We wanted to explore what happens when a procurement dashboard is designed for both people and AI agents from the beginning.

What it does

BidLens helps suppliers discover and evaluate procurement opportunities through a unified intelligence workspace.

Users can:

  • Search and filter procurement opportunities
  • Review supplier fit scores and eligibility requirements
  • Identify risks and missing documents
  • Compare two or three opportunities
  • Prepare bid workspaces with checklists and notes
  • Track preparation status and bid readiness
  • Browse opportunities and records through paginated interfaces

BidLens also exposes WebMCP tools that allow an AI agent to work with the application:

  • find_opportunities
  • investigate_opportunity
  • compare_opportunities
  • prepare_bid_workspace
  • update_bid_workspace

Read-only tools can be used directly by an agent. Actions that change application state require explicit human confirmation.

How we built it

BidLens was built as a React and TypeScript single-page application using Vite, TanStack Router, and Tailwind CSS. The application uses realistic demonstration data modelled on Zimbabwean e-GP procurement structures.

The WebMCP integration is implemented through document.modelContext.registerTool(). Each tool has a clear description, structured JSON input schema, and an execution function connected to the application state.

The application is deployed on Cloudflare Pages, with SPA fallback routing configured so that nested pages remain accessible when loaded directly.

We tested the live application using ChatGPT's desktop in-app browser and Google Chrome with WebMCP testing enabled.

Challenges we ran into

One challenge was translating a complex procurement workflow into a clear experience that would be useful to both experienced suppliers and new users.

We also had to connect agent tool execution to React application state while keeping the interface predictable. Browser implementations may provide tool input as either an object or a serialized JSON string, so the tool layer was designed to handle both formats.

Another important challenge was deciding which actions should be automatic and which should require human approval. We chose to keep discovery and analysis read-only, while requiring confirmation before creating or updating bid workspaces.

Finally, we converted the application into a reliable static deployment while preserving nested routes, responsive layouts, pagination, and WebMCP registration.

Accomplishments that we're proud of

  • Built a complete procurement intelligence experience rather than a standalone technical demo
  • Implemented five functional WebMCP tools
  • Connected WebMCP tools to live application state
  • Added human confirmation for state-changing actions
  • Deployed a working public application on Cloudflare Pages
  • Verified tool discovery and read-only tool execution in ChatGPT's desktop in-app browser
  • Added responsive layouts and pagination across the application's data-heavy views
  • Published the source code with an open-source license
  • Created a practical use case focused on suppliers and public procurement in Zimbabwe

What we learned

We learned that WebMCP works best when applications expose meaningful, task-oriented tools instead of forcing agents to reproduce every individual user-interface interaction.

Structured schemas make agent interactions more reliable, while clear tool descriptions help agents understand when each capability should be used.

We also learned that state-changing tools need strong human-in-the-loop safeguards. Agents can help users investigate and prepare decisions, but important procurement actions should remain transparent and explicitly approved.

Most importantly, WebMCP allows a website to become an active workspace where humans and agents can collaborate rather than treating AI as a separate chatbot layered on top of the product.

What's next for BidLens

The next stage is to connect BidLens to authorized live procurement feeds and persistent backend storage.

Future improvements include:

  • Supplier accounts and team collaboration
  • Real-time procurement notifications
  • Document extraction and compliance checking
  • More advanced tender and supplier matching
  • Audit logs for agent activity and human approvals
  • Persistent bid workspaces

Built With

  • agentic-ai
  • artificial-intelligence
  • chatgpt
  • chrome
  • cloudflare-pages
  • data-visualization
  • e-procurement
  • github
  • human-in-the-loop
  • javascript
  • json-schema
  • localstorage
  • open-source
  • procurement-technology
  • react
  • responsive-web-design
  • saas
  • tailwind-css
  • tanstack-router
  • typescript
  • vite
  • webmcp
  • zimbabwe
Share this project:

Updates

Submission history