Design UI projects 🎨🖼️ with Google Stitch via Telegram using MCP and Gemini AI

This 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. Supported actions include: Creating new design projects Retrieving existing projects Listing projects and screens Fetching individual screens Generating new UI screens directly from text descriptions --- Key Advantages 1. ✅ Conversational Design Workflow Design and UI prototyping can be driven entirely through natural language. Users can create screens, explore layouts, or manage projects simply by chatting, without opening design tools. 2. ✅ Tight Integration with Google Stitch By leveraging the Stitch MCP API, the workflow provides direct access to structured design capabilities such as screen generation, project management, and UI exploration, avoiding manual API calls or custom scripting. 3. ✅ Intelligent Tool Selection The AI agent does not blindly call APIs. It first analyzes the user request, determines the required level of fidelity and intent, and then selects the most appropriate Stitch function or combination of functions. 4. ✅ Multi-Channel Support The workflow supports both generic chat triggers and Telegram, making it flexible for internal tools, demos, or production chatbots. 5. ✅ Security and Access Control Telegram access is restricted to a specific user ID, and execution only happens when a dedicated command is used. This prevents accidental or unauthorized usage. 6. ✅ Context Awareness with Memory The inclusion of conversational memory allows the agent to maintain context across interactions, enabling iterative design discussions rather than isolated commands. 7. ✅ Production-Ready Output Formatting Responses are automatically converted into Telegram-compatible HTML, ensuring clean, readable, and well-formatted messages without manual post-processing. 8. ✅ Extensible and Modular Architecture The workflow is highly modular: additional Stitch tools, AI models, or communication channels can be added with minimal changes, making it future-proof and easy to extend. --- How It Works This workflow functions as a Telegram-powered AI agent that leverages Google Stitch's MCP (Model Context Protocol) tools for design, UI generation, and product prototyping. It combines conversational AI, tool-based actions, and web search capabilities. 1. Trigger & Authorization: The workflow is activated by an incoming message from a configured Telegram bot. A code node first checks the sender's Telegram User ID against a hardcoded value (xxx) to restrict access. Only authorized users can proceed. 2. Command Parsing: An IF node filters messages, allowing the agent to proceed only if the message text starts with the command /stitch. This ensures the agent is only invoked intentionally. 3. Query Preparation: The /stitch prefix is stripped from the message text, and the cleaned query, along with the user's ID (used as a session identifier), is passed to the main agent. 4. AI Agent Execution: The core "Google Stitch Agent" node is an LLM-powered agent (using Google Gemini) equipped with: Tools: Access to several Google Stitch MCP functions (createproject, getproject, listprojects, listscreens, getscreen, generatescreenfromtext) and a Perplexity web search tool. Memory: A conversation buffer window to maintain context within a session. System Prompt: Instructs the agent to intelligently select and use the appropriate Stitch tools based on the user's design-related request (e.g., generating screens from text, managing projects). It is directed to use web search when necessary for additional context. 5. Response Processing & Delivery: The agent's text output (in Markdown) is passed through another LLM chain ("From MD to HTML") that converts it to Telegram-friendly HTML. Finally, the formatted response is sent back to the user via the Telegram bot. --- Set Up Steps To make this workflow operational, you need to configure credentials and update sp