fluent-visual-sync

Render Fluent state as an interactive HTML widget and persist changes via chat prompts.

Updated Apr 6, 2026

Search Tags:#mcp #persistence #grocery #widget #chat #fluent #visual-sync

Ready to run

npx skills add https://github.com/shaner-git/fluent-oss --skill fluent-visual-sync

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fluent-visual-sync
Source: https://github.com/shaner-git/fluent-oss/tree/main/openclaw-plugin/fluent/skills/fluent-visual-sync
Command: npx skills add https://github.com/shaner-git/fluent-oss --skill fluent-visual-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render Fluent state inside chat as an interactive widget and persist changes by sending structured updates back through chat for the assistant to apply via MCP.

Core Features & Use Cases

Visualizer + sendPrompt round-trip: embed a sandboxed HTML widget that renders Fluent data and allows users to toggle rows and generate a serialized summary.
Data fetch and contract: fetch grocery plans for a given week and embed as a stable itemKey-based model for reliable syncing.
Use case: inline, interactive grocery checklist within chat with a single prompt to persist changes back to Fluent.
Extensibility: designed to support other Fluent domains beyond groceries (e.g., workouts, meals) with the same widget-pattern.

Quick Start

Deploy the visual-sync widget in a chat-enabled host, connect it to the current Fluent grocery plan, and begin interactive syncing.

Frequently Asked Questions about fluent-visual-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I visualize Fluent state inside a chat interface?▼

Visualizing Fluent state inside chat requires embedding a sandboxed HTML widget that renders the data interactively and sends structured update prompts back through the chat. This widget contract enables inline rendering and round-trip persistence directly within the chat host.

Can I persist chat widget updates back to Fluent?▼

Yes, you can persist chat widget updates back to Fluent by generating a serialized summary of changes and sending it as a structured chat prompt. The assistant backend then applies these updates via MCP to complete the round-trip sync.

How do I build an interactive grocery checklist in chat?▼

Building an interactive grocery checklist in chat involves fetching the weekly grocery plan, embedding it as a stable itemKey-based model, and rendering it in a visual-sync widget. Users can toggle rows and send a single prompt to persist changes back to Fluent.

Does the Fluent visual-sync widget support domains other than groceries?▼

Yes, the Fluent visual-sync widget supports extensibility to other domains like workouts and meals. By applying the same widget-pattern, embedded data, and Sync flow, teams can build interactive domain widgets with round-trip persistence beyond grocery checklists.

What is needed to implement round-trip persistence for chat widgets?▼

Implementing round-trip persistence for chat widgets requires a widget contract, embedded stable data using itemKey-based models, and a Sync flow implemented across the UI and assistant backend. The assistant applies structured chat prompts via MCP to persist updates.

Why use itemKey-based models for Fluent chat widgets?▼

ItemKey-based models are used for Fluent chat widgets to ensure reliable syncing between the embedded widget and the backend. Fetching grocery plans and structuring them with stable itemKeys prevents data misalignment during the interactive visual-sync round-trip.