Skip to content

site: add Get started install/usage section #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kleczkowski merged 4 commits into from
Jun 30, 2026
Merged

site: add Get started install/usage section #7

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc0fef6
site: add Get started install/usage section
kleczkowski Jun 30, 2026
5a140f0
site: install bitrefill via upstream plugin, not vendored copy
kleczkowski Jun 30, 2026
6c1e60d
site: connect Bitrefill MCP instead of installing the skill plugin
kleczkowski Jun 30, 2026
28fc79d
site: add mkdir step and full https URL in Get started
kleczkowski Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,40 @@
.pipeline .lead{margin:0 auto 38px}
.pipeline img{width:100%;max-width:1000px;height:auto;border-radius:var(--radius);box-shadow:0 18px 44px rgba(12,40,24,.12)}

/* ---------- Get started ---------- */
.start{padding:88px 0;border-bottom:1px solid var(--line);background:var(--paper-2)}
.start .head{text-align:center;margin:0 auto 48px}
.start h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:14px}
.start .head .lead{margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.step{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 24px;text-align:left;display:flex;flex-direction:column;
box-shadow:0 14px 36px rgba(12,40,24,.06);
}
.step .n{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:999px;background:var(--green);color:#fff;
font-family:var(--mono);font-size:14px;font-weight:600;margin-bottom:16px;
}
.step h3{font-size:1.2rem;margin-bottom:10px}
.step p{color:var(--ink-soft);font-size:.98rem;margin:0 0 16px}
.step code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:rgba(12,20,16,.05);padding:1px 5px;border-radius:5px}
.code{
margin-top:auto;background:var(--ink);border-radius:12px;padding:14px 16px;
font-family:var(--mono);font-size:13px;line-height:1.65;color:#cdd8d1;
white-space:pre;overflow-x:auto;
}
.code .c{color:var(--green-bright)}
.code code{background:none;color:inherit;padding:0}
.ask{
margin-top:auto;background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.28);
border-radius:12px;padding:15px 17px;color:var(--ink);font-size:1.02rem;
font-style:italic;line-height:1.5;
}
.start .cta{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{padding:64px 0 56px;background:var(--ink);color:#cdd8d1}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
Expand All @@ -152,6 +186,7 @@
<a href="#qubo">QUBO</a>
<a href="#pipeline">Pipeline</a>
<a href="#edge">The edge</a>
<a href="#start">Get started</a>
</nav>
</div>
</header>
Expand Down Expand Up @@ -291,6 +326,54 @@ <h2>The optimizer settles into the deepest wells</h2>
</div>
</section>

<!-- ============== 6. GET STARTED ============== -->
<section class="start" id="start">
<div class="wrap">
<div class="head">
<p class="eyebrow">Get started</p>
<h2>Three steps to first run</h2>
<p class="lead">
Install the skill into Claude Code, connect it to the hosted quantum backend, then
ask in plain English. There's no backend to run yourself.
</p>
</div>
<div class="steps">
<div class="step">
<span class="n">1</span>
<h3>Connect &amp; install</h3>
<p>Connect the <code>bitrefill</code> MCP, then drop <code>qupick</code> into Claude Code.</p>
<div class="code"><span class="c">claude mcp add</span> --transport http bitrefill \
https://api.bitrefill.com/mcp
<span class="c">mkdir -p</span> .claude/skills
<span class="c">cp -R</span> skills/qupick .claude/skills/</div>
</div>
<div class="step">
<span class="n">2</span>
<h3>Register &amp; connect</h3>
<p>
Point <code>.mcp.json</code> at the hosted server and register once — your API key is
emailed to you. Paste it into the <code>Authorization</code> header and reconnect.
</p>
<div class="code"><span class="c">url</span> https://qupick.quip.network/mcp
<span class="c">auth</span> Bearer &lt;key-from-email&gt;</div>
</div>
<div class="step">
<span class="n">3</span>
<h3>Just ask</h3>
<p>
The agent picks your worst-performing asset, settles the bill, then retunes the rest of
the basket around it.
</p>
<div class="ask">"Buy a $20 Steam card and pay with my worst-performing crypto."</div>
</div>
</div>
<div class="cta">
<a class="btn primary" href="https://github.com/QuipNetwork/qubitrefill#readme" target="_blank" rel="noopener">Full setup guide → README ↗</a>
<a class="btn ghost" href="https://github.com/QuipNetwork/qubitrefill" target="_blank" rel="noopener">View Repo ↗</a>
</div>
</div>
</section>

<!-- ================= FOOTER ================= -->
<footer>
<div class="wrap">
Expand Down