Inspiration
Cross-border trade across Africa under the African Continental Free Trade Area (AfCFTA) holds immense potential, yet micro, small, and medium enterprises (MSMEs) lose millions daily due to complex Harmonized System (HS) tariff codes, varying MFN vs. AfCFTA preferential rates, hidden border clearance fees, and tedious manual customs declarations.
So I built SwiftClear to transform African cross-border logistics into an agent-native experience. I exposed web tools directly via the new WebMCP (Web Model Context Protocol) standard enabling browser AI agents to autonomously look up tariff rules, compute duty savings, and prepopulate customs manifests for traders in seconds.
What it does
SwiftClear is an agent-native AfCFTA trade compliance and customs declaration workspace. Key features include:
AI Trade Analysis: Instant HS tariff classification, rule-of-origin verification, and duty breakdown powered by Google Gemini 3.1 Flash Lite.
WebMCP Tool Suite: Exposes structured client-side tools directly onto navigator.modelContext so external AI web agents (or in-page agents) can query trade rules and drive the application UI.
AfCFTA Preferential Tariff Calculator: Calculates baseline MFN duty vs. AfCFTA preferential rates, VAT, security fees, escort fees, and net USD savings across key African transport corridors (e.g., Kano to Accra, Mombasa to Kampala).
Live WebMCP Inspector & Terminal: Provides a real-time event stream of WebMCP tool registration, execution requests, parameters, and dynamic DOM updates.
How I built it/WebMCP Architecture
SwiftClear is built using a modern, resilient tech stack:
WebMCP Standard: Implemented client-side tool registration on navigator.modelContext with a robust fallback polyfill (src/utils/webmcpPolyfill.ts) supporting event dispatching for tool execution.
Registered WebMCP Tools: 1) lookup_hs_code: Resolves product descriptions to 6-digit HS codes, duty rates, and AfCFTA eligibility using Gemini 3.1 Flash. 2) calculate_duties: Calculates exact duty fees, VAT, port handling, escort fees, and total clearance costs based on declared consignment value and quantity. 3) populate_customs_manifest: Injects parsed manifest state directly into the frontend reactive DOM.
AI Backend: Express server (server.ts) and Vercel serverless endpoint (api/gemini/analyze-trade.ts) using @google/genai with gemini-3.1-flash-lite, structured JSON schema enforcement (responseMimeType: "application/json"), and offline trade fallback models.
Frontend: React 19, Vite, Tailwind CSS v4, Framer Motion, and Lucide Icons.
Challenges and Accomplishments
WebMCP Browser Compatibility: Chrome's native WebMCP flag (chrome://flags/#enable-webmcp-testing) exposes a native navigator.modelContext object. I designed a dual-layer registration architecture that seamlessly interfaces with both native browser environments and standalone WebMCP bridges without breaking page state.
Structured AI Responses: Enforcing strict JSON schema validation with Gemini 3.1 Flash Lite to guarantee reliable numeric duty rates and standardized HS codes for seamless tool execution.
Trade Fallback Engine: Built a robust offline AfCFTA tariff matrix ensuring the application remains 100% operational even during network or credential unavailability.
What's next for Swiftclear
Expanded Corridor Coverage: Expand tariff data across all 54 AfCFTA signatory nations.
Real-time Customs API Sync: Integrate direct webhooks with national customs systems (e.g., Ghana Single Window, Nigeria Trade Portal).
Multi-Lingual Agent Support: Enable French, Swahili, Arabic, and Portuguese agent interactions for cross-regional trade facilitation.
Built With
- express.js
- framer-motion
- gemini-api
- google-gemini
- json-schema
- lucide-react
- node.js
- react
- tailwindcss
- typescript
- vercel
- vite
- webmcp
Log in or sign up for Devpost to join the conversation.