{"product_id":"n8n-workflow-create-ui-screens-from-chat-gemini-stitch","title":"n8n Workflow: Create UI Screens From Chat (Gemini \u0026 Stitch)","description":"\u003ch3\u003eTurn Chat Messages into UI Screens—Automatically (Gemini \u0026amp; Stitch + n8n)\u003c\/h3\u003e\n\u003cp\u003eThis n8n workflow lets users request UI screens through an n8n chat interface or a Telegram bot. It remembers each user’s last prompt in Google Sheets, uses Google Gemini with Google Stitch MCP tools to generate and iterate on UI screens, and then returns results in the right format for web chat (Markdown) or Telegram (safe HTML).\u003c\/p\u003e\n\n\u003ch3\u003eWhat this workflow does\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReceives a message\u003c\/strong\u003e from the n8n chat UI or via a Telegram bot trigger.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eNormalizes and validates input\u003c\/strong\u003e by creating a per-user session ID, then rejects empty or very short prompts with a helpful hint.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eLoads conversation continuity\u003c\/strong\u003e by reading the user’s previous prompt from a Google Sheets tab named \u003cstrong\u003eProjectMemory\u003c\/strong\u003e and prepending it to the new request.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eGenerates UI screens\u003c\/strong\u003e using a \u003cstrong\u003eGoogle Gemini–powered agent\u003c\/strong\u003e that calls \u003cstrong\u003eGoogle Stitch MCP tools\u003c\/strong\u003e (create\/get\/list projects, list\/get screens, and generate screens from text). Optionally, it can use \u003cstrong\u003ePerplexity\u003c\/strong\u003e for web research.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eReturns responses\u003c\/strong\u003e back to the user: Markdown for n8n web chat, and converted \u003cstrong\u003eTelegram-supported HTML\u003c\/strong\u003e for Telegram messages.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePersists context\u003c\/strong\u003e by appending the latest prompt and metadata to Google Sheets for future iterations.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eHandles failures\u003c\/strong\u003e by alerting an admin in Telegram and logging errors to a Google Sheets tab called \u003cstrong\u003eErrorLog\u003c\/strong\u003e.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eSaaS operators: quickly turn product ideas into UI screen drafts from chat.\u003c\/li\u003e\n  \u003cli\u003eAutomation engineers: prototype UI flows by iterating on prompts with stored context.\u003c\/li\u003e\n  \u003cli\u003eDesign-first teams: collaborate with users through Telegram and keep a consistent screen generation history.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003en8n nodes\/logic:\u003c\/strong\u003e if, code, telegram, sticky note, error trigger, google sheets.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eIntegrations:\u003c\/strong\u003e Telegram bot (trigger + admin alerts), Google Sheets (ProjectMemory + ErrorLog), Google Gemini, Google Stitch MCP tools, optionally Perplexity.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSetup required:\u003c\/strong\u003e Telegram bot credential, enable Telegram trigger webhook, set \u003cstrong\u003eADMIN_TELEGRAM_CHAT_ID\u003c\/strong\u003e, and create the \u003cstrong\u003eProjectMemory\u003c\/strong\u003e and \u003cstrong\u003eErrorLog\u003c\/strong\u003e tabs with the expected fields.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"N8N Commerce","offers":[{"title":"Default Title","offer_id":45967609954483,"sku":"N8N-19254","price":54.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0749\/6279\/6723\/files\/OwwvPVRjSE_r-NZQKesFP_M4Lzkehj.png?v=1788685982","url":"https:\/\/buyflowscripts.com\/products\/n8n-workflow-create-ui-screens-from-chat-gemini-stitch","provider":"N8N Commerce","version":"1.0","type":"link"}