MCP Connect Steps
Overview
Three step cards that explain setup: copying the link pops a Copied toast, the middle shows a mini tool connection diagram, and in the third an animated cursor clicks Allow on an authorization dialog, which then shows Allowed. A row of supported tool pills sits below.
Taken from the page template Lingye Design Prompt Library Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds MCP Connect Steps to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add mcp-connect-steps
mcp › Use 8pt MCP to call get_component("mcp-connect-steps")
Code
Source for MCP Connect Steps. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-mcp"><div class="mcp-grid"> <div class="mcp-c"><div class="mcp-v"><div class="mcp-url"><i></i><code>mcp.example.com</code><button type="button" class="mcp-copy">复制</button><span class="mcp-toast"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg> 已复制</span></div></div><em>01</em><h4>复制一条链接</h4><p>一条链接，就能把你的棱页资源库接入任何支持 MCP 的 AI 工具。</p></div> <div class="mcp-c"><div class="mcp-v"><div class="mh"><div class="mh-col"><span class="mh-p"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span>闪建</span><span class="mh-p"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span>码舟</span><span class="mh-p"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span>拼页</span></div><span class="mh-orb"><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span></span><div class="mh-col"><span class="mh-p"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span>云匠</span><span class="mh-p"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span>栈工</span><span class="mh-p"><span class="tl-ic" style="background:#6366F1"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 8v4l3 2" stroke="#fff" stroke-width="2" fill="none"/></svg></span>速搭</span></div></div></div><em>02</em><h4>添加到你的 AI 工具</h4><p>常见的 AI 编程与建站工具都支持，点几下就好，不需要密钥。</p></div> <div class="mcp-c"><div class="mcp-v"><div class="mcp-dlg"><div class="md-h"><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span><span><b>允许访问棱页？</b><small>码舟 想使用你的资源库</small></span></div><div class="md-b"><span class="md-no">取消</span><span class="md-ok"><i class="t1">允许</i><i class="t2">已允许 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></span></div><svg class="md-cur" viewBox="0 0 24 24" width="20" height="20"><path d="M5 3l14 8-6 2-3 6z" fill="#0B0B0F" stroke="#fff" stroke-width="1.4" stroke-linejoin="round"/></svg></div></div><em>03</em><h4>登录后直接提问</h4><p>用棱页账号确认授权，然后按名字向 AI 要任意区块。</p></div> </div><div class="mcp-works"><small>已适配你常用的 AI 工具</small><div class="mcp-row"><span class="mcp-t"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span><b>闪建</b></span><span class="mcp-t"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span><b>码舟</b></span><span class="mcp-t"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span><b>拼页</b></span><span class="mcp-t"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span><b>云匠</b></span><span class="mcp-t"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span><b>栈工</b></span><span class="mcp-more">还有更多</span></div></div></div>
.x-mcp{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-mcp,.x-mcp *{box-sizing:border-box}.x-mcp a{color:inherit;text-decoration:none}.x-mcp button{font:inherit;cursor:pointer}.x-mcp .lg-mark{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.x-mcp .lg-mark svg{width:60%;height:60%}.x-mcp{width:100%;max-width:1080px;margin:0 auto;color:var(--ink)}.x-mcp .mcp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-mcp .mcp-c{background:#F6F6F8;border:1px solid #EDEDF0;border-radius:18px;padding:8px 8px 20px;transition:transform .3s,box-shadow .3s}.x-mcp .mcp-c:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(124,58,237,.45)}.x-mcp .mcp-v{position:relative;height:200px;border-radius:12px;background:linear-gradient(135deg,#F3E8FF,#FCE7F3 60%,#EDE9FE);display:grid;place-items:center;overflow:hidden;margin-bottom:16px}.x-mcp em{display:block;padding:0 12px;font-style:normal;font-family:ui-monospace,monospace;font-size:12px;color:var(--pur)}.x-mcp h4{margin:6px 12px 8px;font-size:18px;font-weight:700}.x-mcp p{margin:0 12px;font-size:13px;line-height:1.7;color:var(--mut)}.x-mcp .mcp-url{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px 8px 8px 14px;box-shadow:0 10px 30px -14px rgba(76,29,149,.4)}.x-mcp .mcp-url i{width:8px;height:8px;border-radius:50%;background:#22C55E}.x-mcp .mcp-url code{font-size:13px;color:#18181B}.x-mcp .mcp-copy{border:0;background:var(--pur);color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;transition:transform .15s}.x-mcp .mcp-copy:active{transform:scale(.94)}.x-mcp .mcp-toast{position:absolute;left:50%;top:-36px;transform:translate(-50%,6px);display:flex;align-items:center;gap:5px;font-size:12px;color:#fff;background:#0B0B0F;padding:5px 10px;border-radius:999px;opacity:0;transition:all .3s;white-space:nowrap}.x-mcp .mcp-url.done .mcp-toast{opacity:1;transform:translate(-50%,0)}.x-mcp .mh{display:flex;align-items:center;gap:14px}.x-mcp .mh-col{display:grid;gap:8px}.x-mcp .mh-p{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;box-shadow:0 4px 10px -6px rgba(76,29,149,.35)}.x-mcp .tl-ic{width:16px;height:16px;border-radius:4px;display:grid;place-items:center}.x-mcp .tl-ic svg{width:11px;height:11px}.x-mcp .mh-orb{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(167,139,250,.25),0 8px 24px -8px rgba(124,58,237,.7);animation:mcp-pulse 2.4s ease-in-out infinite}.x-mcp .mh-orb .lg-mark{width:30px;height:30px}.x-mcp .mcp-dlg{position:relative;width:78%;background:#fff;border-radius:14px;padding:14px;box-shadow:0 14px 34px -14px rgba(76,29,149,.45)}.x-mcp .md-h{display:flex;gap:10px;align-items:flex-start}.x-mcp .md-h span{display:flex;flex-direction:column;gap:2px}.x-mcp .md-h b{font-size:13px}.x-mcp .md-h small{font-size:11px;color:var(--mut)}.x-mcp .md-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.x-mcp .md-b span{text-align:center;font-size:12px;padding:7px 0;border-radius:8px}.x-mcp .md-no{background:#F4F4F5}.x-mcp .md-ok{border:1.5px solid var(--pur);color:var(--pur);font-weight:600;transition:background .2s,color .2s}.x-mcp .md-ok i{font-style:normal;display:inline-flex;align-items:center;gap:4px}.x-mcp .md-ok .t2{display:none}.x-mcp .mcp-dlg.ok .md-ok{background:var(--pur);color:#fff}.x-mcp .mcp-dlg.ok .t1{display:none}.x-mcp .mcp-dlg.ok .t2{display:inline-flex}.x-mcp .md-cur{position:absolute;right:6%;bottom:-18px;transition:transform .9s cubic-bezier(.4,.1,.2,1)}.x-mcp .mcp-dlg.go .md-cur{transform:translate(-30px,-34px)}.x-mcp .mcp-works{margin-top:40px;text-align:center}.x-mcp .mcp-works small{font-size:13px;color:var(--mut)}.x-mcp .mcp-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:14px}.x-mcp .mcp-t{display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center;height:40px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14px}.x-mcp .mcp-t .tl-ic{width:20px;height:20px}.x-mcp .mcp-t .tl-ic svg{width:13px;height:13px}.x-mcp .mcp-more{font-size:13px;color:#3F3F46;padding:0 8px}@keyframes mcp-pulse{50%{box-shadow:0 0 0 10px rgba(167,139,250,.15),0 8px 24px -8px rgba(124,58,237,.7)}}@media (max-width:820px){.x-mcp .mcp-grid{grid-template-columns:1fr}.x-mcp .mcp-t{min-width:0}}@media (prefers-reduced-motion:reduce){.x-mcp *{animation:none!important;transition:none!important}}.x-mcp{max-width:none;padding:60px 5%;background-image:radial-gradient(rgba(16,16,24,.12) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-mcp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const url = root.querySelector('.mcp-url'), btn = root.querySelector('.mcp-copy'), dlg = root.querySelector('.mcp-dlg');
const timers = [];
const copied = () => { url.classList.add('done'); btn.textContent = '已复制'; timers.push(setTimeout(() => { url.classList.remove('done'); btn.textContent = '复制'; }, 1600)); };
const onCopy = () => copied();
btn.addEventListener('click', onCopy);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const loop = () => {
dlg.classList.remove('ok', 'go');
timers.push(setTimeout(() => dlg.classList.add('go'), 600));
timers.push(setTimeout(() => dlg.classList.add('ok'), 1600));
timers.push(setTimeout(copied, 2400));
…Subscribe to Builder to see the full source.See pricing