Stitch React Components
UI Generation Protocol
When generating components using StitchMCP design definitions:
- Stateless Dominance: Keep generated views as stateless pure functions where possible.
- Prop Drilling: Avoid deep prop drilling; use Context API or state managers for global metrics (like agent presence in War Room).
- Component Reusability: Do not hardcode values inside generic UI constructs like
CardorAlert. Pass them aschildrenor named slots.
Integration with Agentic Events
- Use React
useEffectcleanups diligently when subscribing to OpenClaw Gateway Websocket events inside a component. - Example: Ensure
socket.off('INTELLIGENCE_DISCOVERED')is always called when unmounting a War Room chat component to prevent memory leaks.