1import"../chunks/Bzak7iHL.js";import{h as le,r as ce,s as y}from"../chunks/B2hhroed.js";import{o as ve}from"../chunks/Df_nk_mV.js";import{ay as de,s as w,k as i,aq as n,az as ge,E as D,e as pe,au as r,at as c,as as t,aw as J,av as he,ax as e,ai as C}from"../chunks/vP97m1hC.js";import{e as K,s as l}from"../chunks/DuCc3f1Z.js";import{i as ue}from"../chunks/BTP5hFK4.js";import{e as E,i as P}from"../chunks/BMIIZ-SA.js";import{s as N}from"../chunks/D0N0oQQ0.js";import{b as me}from"../chunks/BJNyrp9M.js";import{i as we}from"../chunks/C_KZ5yXO.js";var fe=c('<meta name="description" content="Visual guide and screenshots for Google Workspace MCP Server setup, integration, and usage."/> <link rel="canonical" href="https://workspacemcp.com/screenshots"/>',1),_e=c('<button><div class="nav-item-content svelte-l5sgwq"><span class="nav-item-title svelte-l5sgwq"> </span> <span class="nav-item-count svelte-l5sgwq"> </span></div></button>'),qe=c('<div class="screenshot-image svelte-l5sgwq"><img loading="lazy" class="svelte-l5sgwq"/></div>'),be=c('<div class="screenshot-placeholder svelte-l5sgwq"><div class="placeholder-content svelte-l5sgwq"><div class="placeholder-icon svelte-l5sgwq"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div> <span class="placeholder-text svelte-l5sgwq">Screenshot Coming Soon</span></div></div>'),Ce=c('<div class="screenshot-card svelte-l5sgwq"><!> <div class="screenshot-info svelte-l5sgwq"><h3 class="screenshot-title svelte-l5sgwq"> </h3> <p class="screenshot-description svelte-l5sgwq"> </p></div></div>'),ke=c('<section class="screenshot-category svelte-l5sgwq"><div class="category-header svelte-l5sgwq"><div class="category-title-wrapper svelte-l5sgwq"><div> </div> <div class="category-title-content svelte-l5sgwq"><h2 class="category-title svelte-l5sgwq"> </h2> <p class="category-description svelte-l5sgwq"> </p></div></div></div> <div class="screenshots-grid svelte-l5sgwq"></div></section>'),Se=c(`<div class="screenshots-container svelte-l5sgwq"><aside class="screenshots-sidebar svelte-l5sgwq"><div class="sidebar-content svelte-l5sgwq"><div class="sidebar-header svelte-l5sgwq"><h2 class="sidebar-title svelte-l5sgwq">Screenshots Gallery</h2> <div class="search-container svelte-l5sgwq"><div class="search-input-wrapper svelte-l5sgwq"><svg class="search-icon svelte-l5sgwq" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <input type="text" placeholder="Search screenshots..." class="search-input svelte-l5sgwq"/></div></div></div> <nav class="sidebar-nav svelte-l5sgwq"></nav></div></aside> <main class="screenshots-main svelte-l5sgwq"><div class="screenshots-content svelte-l5sgwq"><header class="screenshots-header svelte-l5sgwq"><div class="header-content svelte-l5sgwq"><h1 class="screenshots-title svelte-l5sgwq">Screenshots Gallery</h1> <p class="screenshots-subtitle svelte-l5sgwq">Visual guide showing Google Workspace MCP Server in action. From 2 setup to integration with AI assistants.</p></div></header> <!> <section class="contribution-section svelte-l5sgwq"><div class="contribution-content svelte-l5sgwq"><div class="contribution-icon svelte-l5sgwq">ð¸</div> <h2 class="contribution-title svelte-l5sgwq">Help Us Build This Gallery</h2> <p class="contribution-description svelte-l5sgwq">Have screenshots of Google Workspace MCP Server in action? We'd love 3 to feature them! Screenshots help other users understand the 4 capabilities and setup process.</p> <div class="contribution-actions svelte-l5sgwq"><a href="https://github.com/taylorwilsdon/google_workspace_mcp/issues" target="_blank" rel="noopener noreferrer" class="contribution-button primary svelte-l5sgwq">Submit Screenshots</a> <a href="/docs" class="contribution-button secondary svelte-l5sgwq">View Documentation</a></div></div></section></div></main></div>`);function Le(X,Y){de(Y,!1);let L=D(""),f=D(""),h=D([]);
4const _=[{id:"setup-installation",title:"ð Setup & Installation",description:"Screenshots showing the installation and initial setup process",color:"from-blue-500 to-indigo-600",screenshots:[{title:"OAuth Configuration",description:"Example Google Cloud Web Application client configuration for hosted Workspace MCP, including a local browser origin for testing.",image:"/google_oauth_web_application_client_example.svg"},{title:"Server Installation",description:"Running the installation commands in terminal",placeholder:!0},{title:"Environment Setup",description:"Configuring environment variables and dependencies",placeholder:!0}]},{id:"claude-integration",title:"ð¤ Claude Integration",description:"Screenshots of Google Workspace MCP working with Claude Desktop",color:"from-orange-500 to-red-600",screenshots:[{title:"Claude Configuration",description:"Adding MCP server to Claude Desktop config.json",image:"/claude_settings.png"},{title:"Calendar Integration",description:"Claude managing Google Calendar events",image:"/claude_calendar.png"},{title:"Gmail Management",description:"Claude reading and sending emails through Gmail",image:"/claude_gmail.png"},{title:"Drive File Access",description:"Claude searching and accessing Google Drive files",image:"/claude_drive_files.png"}]},{id:"oauth-flow",title:"ð OAuth Authentication",description:"Screenshots of the OAuth 2.0 authentication process",color:"from-purple-500 to-violet-600",screenshots:[{title:"Google Authorization",description:"Google OAuth consent screen for permissions",placeholder:!0},{title:"Successful Authentication",description:"Completion of OAuth flow and credential storage",image:"/successful_oauth.png"},{title:"Service Selection",description:"Choosing which Google services to authenticate",placeholder:!0}]},{id:"workspace-features",title:"ð ï¸ Workspace Features",description:"Screenshots showcasing Google Workspace integration capabilities",color:"from-teal-500 to-blue-600",screenshots:[{title:"Document Creation",description:"Creating Google Docs through the MCP server",image:"/doc_creation.png"},{title:"Calendar Events",description:"Managing calendar events and scheduling",image:"/calendar_events.png"},{title:"File Operations",description:"Google Drive file search, creation, and management",image:"/file_operations.png"}]}];ve(()=>{w(h,_);const o=new IntersectionObserver(s=>{s.forEach(a=>{a.isIntersecting&&w(L,a.target.id)})},{threshold:.3,rootMargin:"-100px 0px -50% 0px"});return _.forEach(s=>{const a=document.getElementById(s.id);a&&o.observe(a)}),()=>o.disconnect()});function Z(){if(!i(f).trim()){w(h,_);return}const o=i(f).toLowerCase();w(h,_.filter(s=>s.title.toLowerCase().includes(o)||s.description.toLowerCase().includes(o)||s.screenshots.some(a=>a.title.toLowerCase().includes(o)||a.description.toLowerCase().includes(o))))}function ee(o){const s=document.getElementById(o);s&&s.scrollIntoView({behavior:"smooth",block:"start"})}we();var k=Se();le("l5sgwq",o=>{var s=fe();J(2),pe(()=>{he.title="Screenshots - Google Workspace MCP Server"}),n(o,s)});var S=t(k),O=t(S),x=t(O),z=r(t(x),2),B=t(z),G=r(t(B),2);ce(G),e(B),e(z),e(x);var V=r(x,2);E(V,5,()=>i(h),P,(o,s)=>{var a=_e(),v=t(a),d=t(v),g=t(d,!0);e(d);var q=r(d,2),b=t(q);e(q),e(v),e(a),C(()=>{N(a,1,`nav-item ${i(L)===i(s).id?"active":""}`,"svelte-l5sgwq"),l(g,i(s).title),l(b,`${i(s).screenshots.length??""} images`)}),K("click",a,()=>ee(i(s).id)),n(o,a)}),e(V),e(O),e(S);var F=r(S,2),j=t(F),se=r(t(j),2);E(se,1,()=>i(h),P,(o,s)=>{var a=ke(),v=t(a),d=t(v),g=t(d),q=t(g,!0);e(g);var b=r(g,2),M=t(b),te=t(M,!0);e(M);var H=r(M,2),ie=t(H,!0);e(H),e(b),e(d),e(v);var T=r(v,2);E(T,5,()=>i(s).screenshots,P,(A,u)=>{var I=Ce(),$=t(I);{var ae=p=>{var m=qe(),U=t(m);e(m),C(()=>{y(U,"src",i(u).image),y(U,"alt",i(u).title)}),n(p,m)},oe=p=>{var m=be();n(p,m)};ue($,p=>{i(u).image?p(ae):p(oe,-1)})}var Q=r($,2),W=t(Q),re=t(W,!0);e(W);var R=r(W,2),ne=t(R,!0);e(R),e(Q),e(I),C(()=>{l(re,i(u).title),l(ne,i(u).description)}),n(A,I)}),e(T),e(a),C(A=>{y(a,"id",i(s).id),N(g,1,`category-icon bg-gradient-to-r ${i(s).color??""}`,"svelte-l5sgwq"),l(q,A),l(te,i(s).title),l(ie,i(s).description)},[()=>i(s).title.split(" ")[0]]),n(o,a)}),J(2),e(j),e(F),e(k),me(G,()=>i(f),o=>w(f,o)),K("input",G,Z),n(X,k),ge()}export{Le as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.