---
tags: help
---
# ESP (Mind Meld): let your AI show you the page

When you talk with your AI about a page ("open the sync section", "show me that item"), ESP (also called Mind Meld) lets it take you there. You don't have to hunt for the page yourself.

```embedhtml
<div id="mm" role="img" aria-label="Animation: you and your AI linked by ESP (Mind Meld). As you talk, your AI takes your tab to the page you mean, with a note and a Back button.">
<style>
#mm{--a:var(--leaf,#2f8f6a);--b:var(--rose,#c2577a);--k:var(--ink,#1d1d1f);--c:var(--card,#fff);--l:var(--line,#d8d8dc);--s:var(--soft,#8a8a90);font-family:var(--body,system-ui,sans-serif);color:var(--k);max-width:560px;margin:0 auto;user-select:none}
#mm .st{position:relative;border:1px solid var(--l);border-radius:14px;background:var(--c);overflow:hidden;padding:12px}
#mm .bw{border:1px solid var(--l);border-radius:10px;overflow:hidden;background:var(--c);position:relative;height:150px}
#mm .bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--l);font-size:11px}
#mm .addr{flex:1;padding:2px 8px;border:1px solid var(--l);border-radius:20px;color:var(--s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
#mm .pill{padding:2px 8px;border-radius:20px;border:1px solid var(--l);color:var(--s);font-weight:700;transition:all .35s}
#mm .pill.on{background:var(--a);border-color:var(--a);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 25%,transparent)}
#mm .pg{position:absolute;left:0;right:0;top:31px;bottom:0;padding:10px 12px;opacity:0;transform:translateX(30px);transition:opacity .45s,transform .45s}
#mm .pg.on{opacity:1;transform:none}#mm .pg.out{opacity:0;transform:translateX(-30px)}
#mm .h{font-family:var(--display,inherit);font-weight:700;font-size:13px;margin-bottom:8px}
#mm .ln{height:7px;border-radius:4px;background:var(--l);margin:6px 0}
#mm .hl{background:color-mix(in srgb,var(--a) 22%,transparent);border-left:3px solid var(--a);border-radius:4px;padding:5px 7px;font-size:11px;margin:6px 0;animation:mmp 1.6s ease-in-out infinite}
@keyframes mmp{50%{background:color-mix(in srgb,var(--a) 38%,transparent)}}
#mm .tile{display:inline-block;padding:6px 9px;margin:3px 4px 0 0;border:1px solid var(--l);border-radius:8px;font-size:11px}
#mm .toast{position:absolute;left:10px;right:10px;bottom:8px;display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;background:var(--k);color:var(--c);font-size:11px;opacity:0;transform:translateY(10px);transition:all .35s}
#mm .toast.on{opacity:.94;transform:none}#mm .toast b{margin-left:auto;padding:1px 7px;border-radius:5px;border:1px solid currentColor}
#mm .toast b.tap{background:var(--c);color:var(--k)}
#mm .meld{display:flex;align-items:center;justify-content:center;margin-top:12px}
#mm .who{display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;font-size:11px;color:var(--s)}
#mm .orb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;transition:box-shadow .4s}
#mm .me{background:var(--a)}#mm .ai{background:var(--b)}
#mm.linked .orb{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 0%,transparent),0 0 18px 2px color-mix(in srgb,var(--a) 55%,transparent)}
#mm svg{width:150px;height:44px;overflow:visible}
#mm .w{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.15;transition:opacity .5s}
#mm.linked .w{opacity:1;stroke-dasharray:6 8;animation:mmd 1s linear infinite}#mm.linked .w2{animation-direction:reverse}
@keyframes mmd{to{stroke-dashoffset:-28}}
#mm .say{min-height:34px;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px;font-size:12px}
#mm .bub{padding:4px 10px;border-radius:12px;opacity:0;transition:opacity .35s;max-width:90%}
#mm .bub.on{opacity:1}#mm .bub.u{background:color-mix(in srgb,var(--a) 18%,transparent)}#mm .bub.a{background:color-mix(in srgb,var(--b) 18%,transparent)}
#mm .ctl{display:flex;justify-content:center;gap:6px;margin-top:8px}
#mm .ctl button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--s);background:transparent;cursor:pointer}
#mm .ctl button.on{background:var(--k);border-color:var(--k)}
@media (prefers-reduced-motion:reduce){#mm *{animation:none!important;transition:none!important}}
</style>
<div class="st">
 <div class="bw">
  <div class="bar"><span class="addr" id="mm-addr">aiheroapps.com/home</span><span class="pill" id="mm-esp">ESP</span></div>
  <div class="pg on" data-p="0"><div class="h">My projects</div><span class="tile">Book club</span><span class="tile">Garden</span><span class="tile">Recipes</span><div class="ln" style="width:70%;margin-top:12px"></div></div>
  <div class="pg" data-p="1"><div class="h">Garden · Rules</div><div class="ln" style="width:85%"></div><div class="hl">§3 Watering: water when it's dry for 3 days</div><div class="ln" style="width:60%"></div></div>
  <div class="pg" data-p="2"><div class="h">Garden · To-dos</div><div class="hl">☐ Add a frost warning</div><div class="ln" style="width:75%"></div><div class="ln" style="width:50%"></div></div>
  <div class="toast" id="mm-t"><span id="mm-tt"></span><b id="mm-back">Back</b></div>
 </div>
 <div class="meld">
  <div class="who"><div class="orb me">🙂</div>You</div>
  <svg viewBox="0 0 150 44" aria-hidden="true"><path class="w" stroke="var(--a)" d="M2 22 C 20 4, 38 4, 56 22 S 92 40, 110 22 S 140 4, 148 22"/><path class="w w2" stroke="var(--b)" d="M2 22 C 20 40, 38 40, 56 22 S 92 4, 110 22 S 140 40, 148 22"/></svg>
  <div class="who"><div class="orb ai">✦</div>Your AI</div>
 </div>
 <div class="say"><span class="bub u" id="mm-u"></span><span class="bub a" id="mm-a"></span></div>
 <div class="ctl" id="mm-dots"></div>
</div>
<script>
(function(){
var R=document.getElementById('mm'),$=function(i){return document.getElementById('mm-'+i)};
var S=[
 {p:0,esp:0,u:'',a:'',t:'',addr:'aiheroapps.com/home'},
 {p:0,esp:1,u:'(taps ESP)',a:'Mind meld on: I can see your page now.',t:'',addr:'aiheroapps.com/home'},
 {p:1,esp:1,u:'How does the watering rule work?',a:'Here it is, §3.',t:'Your AI moved you: the watering rule',addr:'garden.aiheroapps.com/topics/Rules#watering'},
 {p:2,esp:1,u:'Add a frost warning to my list.',a:'Added. Showing you.',t:'Your AI moved you: your new to-do',addr:'garden.aiheroapps.com/todos'},
 {p:1,esp:1,u:'(taps Back)',a:'',t:'Back where you were',addr:'garden.aiheroapps.com/topics/Rules#watering',back:1}
];
var i=0,tm=null,auto=true,cur=0,d=$('dots');
S.forEach(function(_,k){var b=document.createElement('button');b.setAttribute('aria-label','Step '+(k+1));b.onclick=function(){auto=false;clearTimeout(tm);go(k)};d.appendChild(b)});
function go(k){var s=S[k];i=k;
 R.querySelectorAll('.pg').forEach(function(e){var on=+e.dataset.p===s.p;if(on&&!e.classList.contains('on')){e.classList.remove('out');e.classList.add('on')}else if(!on&&e.classList.contains('on')){e.classList.remove('on');e.classList.add('out')}});
 $('esp').classList.toggle('on',!!s.esp);R.classList.toggle('linked',!!s.esp);$('addr').textContent=s.addr;
 $('u').textContent=s.u;$('u').classList.toggle('on',!!s.u);
 $('a').textContent=s.a;$('a').classList.remove('on');if(s.a)setTimeout(function(){if(i===k)$('a').classList.add('on')},700);
 $('tt').textContent=s.t;$('t').classList.toggle('on',!!s.t);$('back').classList.toggle('tap',!!s.back);$('back').style.display=s.back?'none':'';
 d.querySelectorAll('button').forEach(function(b,j){b.classList.toggle('on',j===k)});
 if(auto){tm=setTimeout(function(){go((k+1)%S.length)},k===0?1600:3200)}}
go(0);
})();
</script>
</div>

```

**What it does**

- It's the **ESP** button at the top, right of the sync button. It's off until you turn it on, and only for the tab you turned it on in. Turning it on also turns on [Dev-sync](/topics/Help:DevSync), so you see the drafts your AI just wrote; turning it off leaves Dev-sync on.
- With it on, your AI can move this tab to a d2 page and point at the section. A note at the bottom says which of your AIs moved you and why, with **Back** to return to where you were.
- With it on, your AI can also see which page and section you're looking at, so "this page" means the page on your screen.

**What it doesn't do**

- It never clicks, types, approves or publishes anything for you. It only changes which page you're looking at.
- Only your own AIs, and the agents they started, can move your tab. Nobody else's can.
- It only goes to d2 pages you can already open, never to other websites.
- With ESP off, nothing happens, and nothing waits to happen later.

**Asking first instead.** On your project's [AI permissions](/d2admin/permissions), *take you to a page (ESP / Mind Meld)* decides how this works. With **asks**, your AI shows a **Go** button and waits for you. With **tells**, it moves you and says why, with Back. With **free** (the default), it moves you with a short note. With **person**, your AIs can't move you at all.

**Asking your AI to turn it on.** Say "switch to ESP" or "mind meld". Normally a small bar appears at the top of your page: tap **Turn ESP on**. If you set *turn ESP (Mind Meld) on for you* to **free** on your AI permissions, your AI turns it on directly and tells you, with **Turn off**.

**Turning it off:** tap the radar button again, close the tab, or ask your AI to turn it off.
