React/MUI Chat UI Engineer for Figma-Exact Widget Refactor (API-Driven)

Project Overview

BuzzGrid is a B2B platform that allows creators and brands to deploy AI Sales Agents. We already have a functioning chat widget in production along with all backend APIs, theme pages, and product systems. This project is a refactor and modernization of the existing widget into a clean, scalable React + TypeScript + Material UI architecture. The layout and theme are fully defined in Figma, and the widget should match the design exactly.

What You’ll Build

You will refactor the current widget into a set of reusable, well-structured React + MUI components. The widget must become fully data-driven: all text, visuals, colors, messages, product cards, quick replies, and other UI elements will come from a backend agentConfig JSON object. The AI updates this config during onboarding, and the widget simply re-renders it without changing its layout. Your role is to build a stable component architecture that cleanly supports this.

This is a chat-focused build. The final widget must correctly handle message bubbles for both user and agent, scrolling chat history, auto-scroll behavior, typing indicators, loading states, quick replies, and a responsive mobile-first layout. Strong attention to spacing, padding, alignment, and Figma design fidelity is essential.

AI-Iterability

AI-iterability means the widget should never contain hardcoded UI text. Instead, it must render everything from the agentConfig provided by the backend. This includes the profile image, banner, brand colors, greeting message, skills, quick replies, product recommendations, lead form text, and the footer promo area. The frontend does not perform AI logic; it only renders data.

Component Structure

The widget will be rebuilt as a small, consistent set of React + MUI components such as the message component, hero header, product card, recommendation section, quick replies, lead form, and footer promo. These components must closely follow the Figma layout while remaining entirely data-driven.

API Integration

The widget connects to a small set of existing backend endpoints. These include retrieving the agent configuration, sending chat messages, pulling product recommendations, and capturing lead form submissions. If additional minor endpoints are required, the backend team will supply them. Your job is to wire the frontend cleanly, maintain clear UI state, and handle loading and error scenarios.

Embedding Requirements

The widget must function as a standalone component that can be embedded on any site using an iframe and a script initializer. It should accept configuration via query parameters or an initialization object. No cross-domain postMessage communication is needed.

Theme Refresh

The project includes a light theme refresh on a few storefront pages built in Twig. This involves applying updated MUI tokens, adjusting spacing and colors to align with the new widget, and ensuring consistency in visuals. This is a styling pass only, not a structural redesign.

Out of Scope

To avoid confusion: this project does not include checkout logic, product-type rendering, routing within the widget, AI logic inside the frontend, dynamic layouts, multiple theme versions, or redesigning theme pages. All actions such as viewing a product or going to checkout link out to existing pages.

Deliverables

Your deliverables include the refactored chat widget built in React + TypeScript + MUI, a clean and reusable component structure, full API wiring, iframe embedding support, responsive layout behavior, the light theme refresh, and brief documentation for handoff.

Required Skills

You should have strong experience in React, TypeScript, Material UI, REST API integration, and building polished, responsive UIs. Experience implementing designs from Figma at a high level of fidelity is essential. Prior work with chat interfaces, messaging apps, or similar real-time UI experiences is strongly preferred. Familiarity with embedding widgets through script loaders and iframes is helpful.

Contract Details

This is an hourly contract open to worldwide applicants. The experience level required is Expert. The expected engineering timeline is approximately four to six weeks, but the Upwork contract period is set to one to three months to provide flexibility. The target hourly rate range is $35 to $65 depending on experience.

How to Apply

Please include examples of chat interfaces or messaging UIs you have built, links to React or MUI component work, a brief explanation of how you’ve built config-driven UIs in the past, an estimated timeline based on this scope, and whether you use AI-assisted tools like Cursor or Copilot to accelerate development.