{ "id": "Q2jXWo-iO_eefuMxGrDYq", "meta": { "templateCredsSetupCompleted": true }, "name": "MCP Google Stitch Agent via Telegram", "tags": [], "nodes": [ { "id": "58ca337c-08fd-4cba-80e6-06c006fe8fef", "name": "When chat message received", "type": "@n8n/n8n-nodes-langchain.chatTrigger", "position": [ -256, -144 ], "parameters": { "options": {} }, "typeVersion": 1.4 }, { "id": "bb3fd9e0-7a46-4ae2-b503-a3d5e7a541e4", "name": "Google Gemini Chat Model", "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini", "position": [ -16, -96 ], "parameters": { "options": {} }, "credentials": { "googlePalmApi": { "name": "" } }, "typeVersion": 1 }, { "id": "84cb4bde-15b3-4284-b08b-34e468ce4b09", "name": "Sticky Note", "type": "n8n-nodes-base.stickyNote", "position": [ 240, -128 ], "parameters": { "color": 7, "width": 528, "height": 496, "content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## STEP 2 - Google Stitch\n[Get your API Key](https://stitch.withgoogle.com/docs/mcp/setup) and set Header Auth with name: \"X-Goog-Api-Key\" and value \"YOUR-API-KEY\"\"" }, "typeVersion": 1 }, { "id": "da184335-9adc-423a-8d23-55fd63c4cc3d", "name": "Simple Memory", "type": "@n8n/n8n-nodes-langchain.memoryBufferWindow", "position": [ 128, -80 ], "parameters": {}, "typeVersion": 1.3 }, { "id": "2d8f7450-9cc1-4dac-8145-2b598258f801", "name": "Create Project", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 304, -64 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "create_project" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "832b9197-cdd1-463e-a84a-eac1e981f603", "name": "Get Project", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 432, -64 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "get_project" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "59607d6a-9cbf-44bc-8a0f-b7621378a824", "name": "List projects", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 560, -64 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "list_projects" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "83cf7b04-6c37-4317-8758-f84f41aa419a", "name": "List screen", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 304, 112 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "list_screens" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "f24d9ca5-3999-4a73-92df-789e28038e28", "name": "Get screen", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 432, 112 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "get_screen" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "d4ddf52d-9a66-40cc-b84d-0fe58741a33c", "name": "Generate Screen", "type": "@n8n/n8n-nodes-langchain.mcpClientTool", "position": [ 560, 112 ], "parameters": { "include": "selected", "options": { "timeout": 600000 }, "endpointUrl": "https://stitch.googleapis.com/mcp", "includeTools": [ "generate_screen_from_text" ], "authentication": "headerAuth" }, "credentials": { "httpHeaderAuth": { "name": "" } }, "typeVersion": 1.2 }, { "id": "1d3c9bb2-6201-4fa0-9398-d893bb4e7ea9", "name": "Search on web", "type": "n8n-nodes-base.perplexityTool", "position": [ 832, -80 ], "parameters": { "options": {}, "messages": { "message": [ { "content": "={{ /*n8n-auto-generated-fromAI-override*/ $fromAI('message0_Text', ``, 'string') }}" } ] }, "requestOptions": {} }, "credentials": { "perplexityApi": { "name": "" } }, "typeVersion": 1 }, { "id": "08bfae9e-bfb1-4495-9482-fad2118aa032", "name": "Code", "type": "n8n-nodes-base.code", "position": [ -928, -336 ], "parameters": { "jsCode": "if ($input.first().json.message.from.id !== xxx) { // Replace with your Telegram user ID\n return { unauthorized: true };\n} else {\n // Return the original data when authorized\n return $input.all();\n}\n" }, "typeVersion": 2 }, { "id": "1b6f04f2-4e75-48be-b342-d70dbf2f175a", "name": "Search with MCP?", "type": "n8n-nodes-base.if", "position": [ -704, -336 ], "parameters": { "options": {}, "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "9c5ea127-cbbb-4304-8a93-b47b5c09b837", "operator": { "type": "string", "operation": "startsWith" }, "leftValue": "={{ $json.message.text }}", "rightValue": "/stitch" } ] } }, "typeVersion": 2.2 }, { "id": "80599982-490d-4160-ba71-2cec80fb02e4", "name": "Get Message", "type": "n8n-nodes-base.telegramTrigger", "position": [ -1152, -336 ], "parameters": { "updates": [ "message" ], "additionalFields": {} }, "credentials": { "telegramApi": { "name": "" } }, "typeVersion": 1.1 }, { "id": "12d0b4dc-9204-4324-997c-020301886860", "name": "Sticky Note8", "type": "n8n-nodes-base.stickyNote", "position": [ -1024, -464 ], "parameters": { "color": 7, "width": 720, "height": 292, "content": "## STEP 1 - Set Telegram Bot\n\nSet your Telegram ID here. the search only occurs when the command \"/stitch\" is present in the message" }, "typeVersion": 1 }, { "id": "7ad2cba9-a301-4960-bd2d-8498671c1fec", "name": "Get Text", "type": "n8n-nodes-base.set", "position": [ -480, -336 ], "parameters": { "options": {}, "assignments": { "assignments": [ { "id": "029f4e7e-b367-4aa9-863e-e372694940fb", "name": "chatInput", "type": "string", "value": "={{ $json.message.text }}" }, { "id": "398c1d7f-0c90-4af6-a414-d4d1968855b9", "name": "sessionId", "type": "number", "value": "={{ $json.message.from.id }}" } ] } }, "typeVersion": 3.4 }, { "id": "fa76c04c-1624-4c8a-a0cd-80b0660ac2f4", "name": "Send a text message", "type": "n8n-nodes-base.telegram", "position": [ 1392, -512 ], "parameters": { "text": "={{ $json.text }}", "chatId": "={{ $('Get Message').item.json.message.from.id }}", "additionalFields": { "parse_mode": "HTML" } }, "credentials": { "telegramApi": { "name": "" } }, "typeVersion": 1.2 }, { "id": "725d1d2f-fabd-4c6e-8a84-c0619412e662", "name": "Google Gemini Chat Model1", "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini", "position": [ 1056, -320 ], "parameters": { "options": {} }, "credentials": { "googlePalmApi": { "name": "" } }, "typeVersion": 1 }, { "id": "dd7b7f1c-c2d2-4d34-958c-ade116e05752", "name": "Google Stitch Agent", "type": "@n8n/n8n-nodes-langchain.agent", "position": [ 256, -336 ], "parameters": { "options": { "systemMessage": "=You are an AI agent with access to the Google Stitch MCP tool.\nYour task is to intelligently use Stitch to support design, UI generation, and product prototyping workflows.\n\nBefore taking any action, do the following:\n\nInspect and enumerate all available functions exposed by the Google Stitch MCP tool, including (but not limited to):\n\nUI or layout generation\n\nScreen or component creation\n\nDesign system or style token handling\n\nUX flow generation\n\nWireframe or mockup synthesis\n\nAny transformation, export, or validation capabilities\n\nEvaluate which function or combination of functions best fits the user\u2019s request, considering:\n\nLevel of fidelity (wireframe vs high-fidelity UI)\n\nPlatform target (web, mobile, desktop)\n\nDesign intent (exploration, iteration, production-ready)\n\nInput constraints (text-only prompt, structured data, existing components)\n\nIf the request is ambiguous or underspecified, make reasonable assumptions and clearly state them before calling the tool.\n\nCall the Google Stitch MCP tool using the most appropriate function(s) and provide:\n\nClear, structured inputs\n\nDescriptive naming for screens, components, and flows\n\nConsistent design intent across outputs\n\nAfter the tool call:\n\nSummarize what was generated\n\nExplain which Stitch functions were used and why\n\nSuggest possible follow-up actions or refinements using other available Stitch capabilities\n\nConstraints\n\nDo not hallucinate Stitch features that are not exposed by the MCP tool.\n\nPrefer modular, reusable UI and design outputs.\n\nOptimize for clarity, usability, and extensibility.\n\nAct as a design-aware AI agent: pragmatic, structured, and intentional in how you use Google Stitch.\n\nUse search on web tool in necessary" } }, "typeVersion": 3.1 }, { "id": "37dd1c91-74f7-4fdd-8fa2-0c9d97f76766", "name": "From MD to HTML", "type": "@n8n/n8n-nodes-langchain.chainLlm", "position": [ 1056, -512 ], "parameters": { "text": "={{ $json.output }}", "batching": {}, "messages": { "messageValues": [ { "message": "Convert this text from markdown to html format for telegram message.\n\nWithout ```html\\n and \\n```...only html for telegram.\n\nTelegram supports a limited set of HTML tags including , , , , , , , , , 
, and . "
            }
          ]
        },
        "promptType": "define"
      },
      "typeVersion": 1.9
    },
    {
      "id": "e9e6cfa0-2340-4b8e-baa7-ac69bde3b5aa",
      "name": "Clean query",
      "type": "n8n-nodes-base.code",
      "position": [
        -96,
        -336
      ],
      "parameters": {
        "jsCode": "for (const item of $input.all()) {\n  const originalText = item.json.chatInput;\n\n  const query = originalText.replace(\"/stitch \", \"\");\n\n  item.json.chatInput = query;\n  item.json.sessionId = item.json.sessionId;\n}\n\nreturn $input.all();\n"
      },
      "typeVersion": 2
    },
    {
      "id": "25a65c54-bee4-4e63-a2b7-1788427fcd77",
      "name": "is Telegram?",
      "type": "n8n-nodes-base.if",
      "position": [
        768,
        -336
      ],
      "parameters": {
        "options": {
          "ignoreCase": true
        },
        "conditions": {
          "options": {
            "version": 3,
            "leftValue": "",
            "caseSensitive": false,
            "typeValidation": "strict"
          },
          "combinator": "and",
          "conditions": [
            {
              "id": "a57cbda0-cd51-4842-9747-19b0415a96c9",
              "operator": {
                "type": "boolean",
                "operation": "true",
                "singleValue": true
              },
              "leftValue": "={{ $('Get Message').isExecuted }}",
              "rightValue": ""
            }
          ]
        }
      },
      "typeVersion": 2.3
    },
    {
      "id": "8b8a2d45-29b8-440e-ae01-ee4e8ab3a8d3",
      "name": "Sticky Note9",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1008,
        -624
      ],
      "parameters": {
        "color": 7,
        "width": 672,
        "height": 452,
        "content": "## STEP 3- Send Response\n\nSet response message for Telegram and send it"
      },
      "typeVersion": 1
    },
    {
      "id": "42bbb0f3-0e2e-4bfb-8f14-4160b7b7d378",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1024,
        -1104
      ],
      "parameters": {
        "width": 704,
        "height": 592,
        "content": "## AI-powered Google Stitch Design Agent via Telegram using MCP and Gemini\nThis workflow implements an **AI-powered design and prototyping assistant** that integrates **Telegram**, **Google Gemini**, and **Google Stitch (MCP)** to enable conversational UI generation and project management.\n\n### **How it works**\n\nThis workflow acts as a Telegram-based AI design assistant that uses Google Gemini as an LLM and Google Stitch MCP tools to manage design projects and generate UI screens from natural language. Incoming Telegram messages are authorized by user ID and filtered to only run when the `/stitch` command is used. The cleaned user query is passed to an AI agent with conversational memory, which analyzes intent and selectively calls Stitch MCP functions such as project creation, screen listing, or UI generation. The agent can also use web search when additional context is needed. Responses are converted from Markdown to Telegram-compatible HTML before being sent back to the user.\n\n### **Setup steps**\n\nConfigure Telegram access by setting your Telegram User ID in the authorization Code node and ensuring bot credentials are valid for both trigger and response nodes. Set up Google Stitch by creating an API key and configuring an HTTP Header Auth credential with `X-Goog-Api-Key`, which is shared across all Stitch MCP tool nodes. Verify credentials for the Google Gemini chat model and the Perplexity web search tool if used. After all credentials are in place, activate the workflow so the Telegram webhook is registered and the agent can respond to `/stitch` commands.\n"
      },
      "typeVersion": 1
    },
    {
      "id": "37dcf1d8-119b-4e2b-99f9-4159ad3e5931",
      "name": "Sticky Note10",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -288,
        -1248
      ],
      "parameters": {
        "color": 7,
        "width": 736,
        "height": 736,
        "content": "## MY NEW YOUTUBE CHANNEL\n\ud83d\udc49 [Subscribe to my new **YouTube channel**](https://youtube.com/@n3witalia). Here I\u2019ll share videos and Shorts with practical tutorials and **FREE templates for n8n**.\n\n[![image](https://n3wstorage.b-cdn.net/n3witalia/youtube-n8n-cover.jpg)](https://youtube.com/@n3witalia)"
      },
      "typeVersion": 1
    }
  ],
  "active": false,
  "settings": {
    "callerPolicy": "workflowsFromSameOwner",
    "timeSavedMode": "fixed",
    "availableInMCP": false,
    "executionOrder": "v1",
    "executionTimeout": 3600
  },
  "versionId": "3c8415cf-3c87-42bf-b0fa-4eee3c9ecbfa",
  "connections": {
    "Code": {
      "main": [
        [
          {
            "node": "Search with MCP?",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Text": {
      "main": [
        [
          {
            "node": "Clean query",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get screen": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Clean query": {
      "main": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Message": {
      "main": [
        [
          {
            "node": "Code",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Project": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "List screen": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "is Telegram?": {
      "main": [
        [
          {
            "node": "From MD to HTML",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "List projects": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Search on web": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Simple Memory": {
      "ai_memory": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_memory",
            "index": 0
          }
        ]
      ]
    },
    "Create Project": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "From MD to HTML": {
      "main": [
        [
          {
            "node": "Send a text message",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Generate Screen": {
      "ai_tool": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Search with MCP?": {
      "main": [
        [
          {
            "node": "Get Text",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Google Stitch Agent": {
      "main": [
        [
          {
            "node": "is Telegram?",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Google Gemini Chat Model": {
      "ai_languageModel": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "Google Gemini Chat Model1": {
      "ai_languageModel": [
        [
          {
            "node": "From MD to HTML",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "When chat message received": {
      "main": [
        [
          {
            "node": "Google Stitch Agent",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}