SaaS AI Agent Frontend Development FastAPI

AgileRadar

AI-Assisted Public Tender Scouting & Proposals

AgileRadar tender dashboard on desktop and its responsive version on a tablet
Role
Product design and development
Platform
Internal web app
Data
Mercado Público · Compra Ágil

01

Project Overview

AgileRadar is an internal intelligent bidding scouting and proposal drafting platform built for Shape. The system interfaces with Chile's public procurement portal (Mercado Público) to evaluate incoming bids and draft commercial proposals in minutes.

02

The Challenge

Scouting public bids on government portals is a tedious process requiring managers to read through extensive PDF or Word documentation (typically 50-100 pages per bid). Evaluating technical fit is manual and consumes days, meaning high-value opportunities can easily be missed. The challenge was to centralize, automatically assess fit using AI, and generate technical-commercial proposal drafts.

The product in use

Screenshots of the platform running with real Mercado Público tenders.

Dashboard with Shape Creative Studio's profile, indicators and the tender kanban board

Opportunity board

Shape's accreditation status, pipeline indicators and a kanban by stage, from opportunity to submitted, with each tender's match.

Opportunity panel with tender data and a 98% match analysis with its justification

AI evaluation

Each tender opens in a detail panel with its Mercado Público data and the radar analysis: a 0 to 100 score with its justification.

Technical proposal draft with options to regenerate, copy and download

Generated technical proposal

The AI drafts the technical and commercial proposal and the data for the Compra Ágil form; it can be regenerated or downloaded as Markdown or Word.

Accreditation settings modal with supplier statuses and expiration date

Supplier accreditation

Shape's status in Mercado Público (enabled, disabled or expired) with the fee expiration date, so bids are never submitted out of term.

Board filtered by urgent tenders

Urgency filters

Urgent deadlines (2 days or less), upcoming (5 days or less), region and tender type to prioritize where to focus.

AgileRadar dashboard on a tablet

Responsive on tablet

The same dashboard adapted to tablet, with indicators and filters rearranged.

Design System

AgileRadar Design System

A light, information-dense interface built with Tailwind CSS v4: violet for action, Shape's warm palette as accent and the system font.

Color Tokens

Primary, secondary, and neutral system tokens built for contrast and consistency.

Violet
#7F22FE · RGB 127, 34, 254

Primary action, buttons and active states (violet-600)

Shape Orange
#FC6736 · RGB 252, 103, 54

Brand accent in gradients and highlights

Background
#F8F9FA · RGB 248, 249, 250

Main app background

Surface
#FFFFFF · RGB 255, 255, 255

Cards and panels

Shape Peach
#FFE4C9 · RGB 255, 228, 201

Accent backgrounds and borders

Main Text
#101828 · RGB 16, 24, 40

Titles and figures (gray-900)

Secondary Text
#6A7282 · RGB 106, 114, 130

Metadata and labels (gray-500)

Success
#009966 · RGB 0, 153, 102

High matches and positive states (emerald-600)

Error
#FF2056 · RGB 255, 32, 86

Alerts and discarded opportunities (rose-500)

Typography Scale

Primary Typeface: System font (Tailwind font-sans) (Web app)

KPI
30px / 800
Dashboard figures
The quick brown fox jumps over the lazy dog
Text
14px / 500
Card and table content
The quick brown fox jumps over the lazy dog
Label
12px / 700
Most used style: labels, statuses and metadata
The quick brown fox jumps over the lazy dog
Micro
10px / 700
Badges and counters
The quick brown fox jumps over the lazy dog

UI Component States

Interactive primitives sharing token geometry, borders, and typographic rules.

Buttons

Primary Action Secondary Ghost

Form Inputs

Default State
name@company.com

Value Proposition

We designed an automated pre-qualification workflow combining natural language processing and real-time visualization:

  • Real-Time Kanban Board: Opportunities organized across pipeline stages, utilizing WebSockets for instant interface updates.
  • AI fit-scoring: each tender is evaluated against Shape's capabilities with a 0 to 100 score and a written justification. Groq (GPT-OSS models) is the primary provider, with Gemini and a local model (Ollama) as fallbacks.
  • Multi-Document consolidator: Drag-and-drop document upload (PDF/Word) that extracts text and compiles it into a structured reference context.
  • Technical Proposal Draft Engine: Instant generation of tailored proposals addressing critical Chilean bidding criteria in Markdown format.

UX & Design Process

01

Mapping Shape's Core Stack

Interfaced with Shape's team to define core criteria (UI/UX, React/TS, Design Systems) and structured them as system constraints for the AI scoring model.

02

Kanban Pipeline Design

Structured the board to display bids based on their compatibility match_score, automatically filtering out low-scoring bids to reduce manager cognitive fatigue.

03

Consolidating Bidding Documents

Created an intuitive sidebar drawer supporting multiple drag-and-drop document uploads, parsing them on-the-fly to construct the context package.

04

Interactive Proposal UX

Designed an interface that allows managers to read, refine, and edit proposal AI-generated drafts before downloading them as Markdown or Word.

Estimated results

≈85%

Estimated reduction in scouting and qualification time

≈15 min

Estimated time to a first technical and commercial draft

3

Cascading AI layers (Groq, Gemini and local Ollama) so the pipeline never stops

AgileRadar demonstrates how modern web applications built with LLMs can streamline complex B2G procurement pipelines, converting days of manual document parsing into minutes of intuitive, AI-assisted operations.

Similar challenge?

Have complex software that needs clarity?

Let's talk directly—I'll tell you what makes sense to tackle first.

Let's talk about your project