Skip to content
famasi.ai

Widgets

Famasi uses 3 interactive widgets for interactions where plain text doesn’t work. Widgets appear as embedded iframes inside ChatGPT and Claude.ai conversations.

Design principle

Widgets exist only where text genuinely cannot do the job. Everything else stays as LLM conversation — building a widget for every step would recreate the app and remove the reason to use the AI surface.

Pharmacy Selection

Triggered by: place_order response

Select Pharmacy Offer

Swift Health Pharmacy
🕐 30-45 mins 📍 1.2 km ⭐ 4.8
₦4,500
MedPlus Ikeja
🕐 60-90 mins 📍 3.4 km ⭐ 4.5
₦4,200
✓
Wellness Pharmacy
🕐 15-20 mins 📍 0.8 km ⭐ 4.9
₦4,800

What it shows:

  • Price comparison across pharmacies
  • Estimated delivery time (ETA) for each
  • Pharmacy ratings
  • Distance from the individual

Why a widget: Comparing price, ETA, and ratings across multiple pharmacies is not legible as plain text. A visual grid makes the decision faster.

Interaction: Individual clicks to select a pharmacy. Selection is sent back to the agent to complete the order.

Adapted from: DeliveryOptionsModal.tsx in the Famasi web app.

OTP Login

Triggered by: When authentication is required (before confirming an order)

Welcome to Famasi

Enter your phone number to get started.

📱
0801 234 5678

What it shows:

  • Phone number input field
  • OTP code input field
  • Submit button

Why a widget: Phone number input + OTP entry cannot be done reliably in text back-and-forth. A form with input validation is clearer and more secure.

Interaction: Individual enters phone number, receives SMS, enters OTP code, submits.

Note: This is a net-new widget — no equivalent exists in the web app since the web app uses standard form authentication.

Order Tracking

Triggered by: check_order_status response

Order #FMS-9283

In Transit
✓
Order Placed
10:30 AM
✓
Pharmacy Confirmed
10:45 AM
🚚
Rider Assigned
11:05 AM
○
Delivered

What it shows:

  • Status badge (Pending, Confirmed, Dispatched, Delivered)
  • Delivery timeline with timestamps
  • Pharmacy and order details

Why a widget: A status badge + timeline is clearer as a visual than a text description of each step.

Interaction: Read-only — individual views the current status. Updates appear when the page is refreshed or the tool is called again.

Adapted from: OrderTrackingPage.tsx in the Famasi web app.

Order Confirmation

Order confirmation does not use a custom widget. It uses MCP elicitation — the native yes/no prompt built into the MCP protocol. This keeps the confirmation simple and consistent across all platforms.

Technical details

Build system: Widgets are built with Vite + React + viteSingleFile plugin. Each widget compiles to a single self-contained HTML file with all JS and CSS inlined (no external dependencies at runtime). Output: 3 HTML files, embeddable as iframes.

Source location: Widget source lives in apps/widgets/ in the provider-guide-docs repo.

Embedding: MCP-compatible apps (ChatGPT, Claude.ai) render widgets as iframes in the conversation. The widget communicates with the host via window.openai bridge (ChatGPT) or postMessage (Claude.ai).

Terminal clients: Claude Code and Codex use text-based alternatives since they don’t support iframes.