All templates By NappAI team Chat with Gmail Calendar
The goal is to automate the management of events and tasks in Google Calendar and Gmail. It allows users to interact with these applications conversationally, simplifying scheduling and inquiry.
graph TD
%%{init: {'theme': 'mc','layout': 'elk'}}%%
ChatInput-eoj7g[<div><img src="/_astro/messages-square.BaSDmT6g.svg" style="height: 20px !important;width: 20px !important"/></div>Chat Input]
style ChatInput-eoj7g stroke:#a170ff
LanggraphReactAgent-zrcpz[ChatBot]
style LanggraphReactAgent-zrcpz stroke:#a170ff
ChatOutput-vmzfb[<div><img src="/_astro/messages-square.BaSDmT6g.svg" style="height: 20px !important;width: 20px !important"/></div>Chat Output]
style ChatOutput-vmzfb stroke:#a170ff
GmailMesageComponent-h9m4p[<div><img src="/_astro/gmail.CLxyIGOu.svg" style="height: 20px !important;width: 20px !important"/></div>Obtener Correos]
style GmailMesageComponent-h9m4p stroke:#a170ff
GoogleGenerativeAIModel-5k5zx[Gemini]
style GoogleGenerativeAIModel-5k5zx stroke:#a170ff
googlecalendarcomponent-b2avz[Obtener Eventos]
style googlecalendarcomponent-b2avz stroke:#a170ff
ChatInput-eoj7g -.- LanggraphReactAgent-zrcpz
linkStyle 0 stroke:#a170ff
LanggraphReactAgent-zrcpz -.- ChatOutput-vmzfb
linkStyle 1 stroke:#a170ff
GmailMesageComponent-h9m4p -.- LanggraphReactAgent-zrcpz
linkStyle 2 stroke:#a170ff
GoogleGenerativeAIModel-5k5zx -.- LanggraphReactAgent-zrcpz
linkStyle 3 stroke:#a170ff
googlecalendarcomponent-b2avz -.- LanggraphReactAgent-zrcpz
linkStyle 4 stroke:#a170ff
Chat with Gmail Calendar
🧩 Overview
The workflow enables users to manage Gmail and Google Calendar through natural‑language conversation. A conversational agent receives the user’s request, determines whether Gmail or Calendar actions are required, and executes the corresponding Google API calls. The final answer is returned as a chat message, making scheduling, event retrieval, and email handling possible without manual interaction.
⚙️ Main Features
- Conversational interface for natural‑language queries about calendar events and emails.
- Automatic tool selection: the agent decides whether to read, create, or update events or messages.
- Google Calendar integration for event retrieval, creation, and modification.
- Gmail integration for reading, replying, and labeling messages.
- AI‑powered reasoning with the Gemini model to generate responses and tool‑invocation logic.
- ISO 8601 date formatting for all calendar operations.
- Secure credential management via Google API credentials for Gmail and Calendar.
🔄 Workflow Steps
| Component Name | Role in the Workflow | Key Inputs | Key Outputs |
|---|---|---|---|
| Chat Input | Collects the user’s natural‑language query and optional attachments. | Text message (e.g., “Dime todos los eventos entre los días 3 y 10 de octubre del 2025”), optional files, conversation identifiers. | Message containing the user input. |
| Gemini | Provides the language model that processes the query and may request tool usage. | Input text (user query). | Text (model response or instruction for a tool). |
| Langgraph React Agent (Chat Bot) | Orchestrates the conversation, feeds the Gemini model, interprets tool outputs, and produces the final answer. | User message, Gemini model, Gmail tool, Calendar tool. | Message (final chat reply). |
| Gmail Message Component | Performs Gmail actions such as retrieving messages, replying, or labeling. | Operation type (e.g., “Get”), query, mailbox identifiers, email body, etc. | Data (retrieved messages or action confirmation). |
| Google Calendar Component | Handles calendar operations: creating, updating, retrieving, or deleting events. | Operation type (e.g., “Get”), date range, event details, attendee list. | Data (event details or action confirmation). |
| Chat Output | Renders the agent’s reply to the user in the playground interface. | Text (response from the agent). | Displayed chat message. |
The sequence of interactions follows the edges shown in the flow diagram:
- Chat Input → Langgraph React Agent – the user’s query becomes the agent’s initial input.
- Gemini → Langgraph React Agent – the LLM processes the query.
- Langgraph React Agent → Gmail / Calendar Tools – the agent invokes the appropriate tool if required.
- Tools → Langgraph React Agent – tool results are returned.
- Langgraph React Agent → Chat Output – the final response is displayed.
🧠 Notes
- The workflow requires valid Google API credentials with Gmail and Calendar scopes.
- The Gemini model is identified by the
gemini-2.5-prokey; other model names can be selected through the agent’s configuration. - Calendar events use the ISO 8601 format (
YYYY‑MM‑DDTHH:MM:SSfor timed events,YYYY‑MM‑DDfor all‑day events). - The agent’s system prompt explicitly instructs the model to use the ISO 8601 format and to treat dates as
datetimeobjects rather than strings. - Tool selection is dynamic: the agent decides whether to call Gmail or Calendar based on the content of the user query.
- If the Gemini model does not support tool calls, the agent can fall back to a simpler response strategy.
- The system maintains conversation state through the
conversation_idandsession_idparameters, enabling multi‑turn interactions.
This documentation provides a concise, functional overview of the workflow, focusing on the purpose and interaction of each component without exposing internal configuration details.