Refinement Pattern
Spotify Loop
How natural language feedback refines layouts while preserving user preferences - just like training Spotify's recommendations.
The Pattern
"Spotify Loop" refers to how Spotify learns your music taste through implicit and explicit feedback. In V2, users can refine layouts through natural language:
"Too expensive"
Agent filters to products under $100 while maintaining style preferences
"More casual options"
Agent prioritizes casual tags, removes formal items
"I need something for rain"
Agent surfaces waterproof/rain-ready products
"Show brighter colors"
Agent adjusts selection based on color metadata
How It Works
User Submits Critique
Via RefinementChat component or quick refinement chips
Agent Routes to Refine Node
LangGraph's conditional routing detects currentCritique and routes to refineLayoutNode
GPT-4o Generates New Layout
Refinement prompt includes current layout + critique + available products
State Updated with History
New layout replaces current, critique added to refinementHistory
Refinement History
Each refinement is recorded in the shared state, creating a history of how the layout has evolved:
interface RefinementEntry {
timestamp: number;
critique: string; // User's feedback
appliedChanges: string[]; // What agent changed
previousLayoutHash: string; // Reference to prior state
}
// Example history:
refinementHistory: [
{
timestamp: 1699900000000,
critique: "too expensive",
appliedChanges: ["Filtered to products under $100"],
previousLayoutHash: "abc123..."
},
{
timestamp: 1699900060000,
critique: "more casual options",
appliedChanges: ["Prioritized casual tags", "Removed formal wear"],
previousLayoutHash: "def456..."
}
]