aura-components-mcp 1.5.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/flow/compare.html CHANGED
@@ -1,26 +1,62 @@
1
1
  <!doctype html>
2
- <html lang='en' data-theme='dark'>
2
+ <html lang="en" data-theme="dark" class="no-js">
3
3
  <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1'>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
6
  <title>Compare — aura-components-mcp vs official</title>
7
- <meta name='description' content='Free MCP server for the Aura public catalogue: 2,495 components, 187 skills, 30,688 assets, 725 design systems. No login. Built by swastiksingh-dev.'>
8
- <link rel='icon' href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Crect width='500' height='500' rx='110' fill='%2309090b'/%3E%3Cpath d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='%23a855f7'/%3E%3Cpath d='M 180 290 L 320 290' stroke='%2338bdf8' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='110' r='16' fill='white'/%3E%3Ccircle cx='130' cy='330' r='16' fill='%236366f1'/%3E%3Ccircle cx='370' cy='330' r='16' fill='%23ec4899'/%3E%3Ccircle cx='250' cy='290' r='11' fill='%2338bdf8'/%3E%3C/svg%3E">
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet'>
12
- <link rel='stylesheet' href='./styles.css'>
7
+ <meta name="description" content="Same family, different jobs: public catalogue here, your projects there.">
8
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='black'/%3E%3Cpath d='M16 6 26 24h-5l-5-10-5 10H6z' fill='white'/%3E%3C/svg%3E">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <meta name="color-scheme" content="light dark">
13
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
14
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
15
+ <script>(function(){try{var s=localStorage.getItem("acm-theme");document.documentElement.dataset.theme=s==="light"?"light":"dark"}catch(e){document.documentElement.dataset.theme="dark"}})();</script>
16
+ <link rel="stylesheet" href="./styles.css">
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
19
+ <script src="./app.js" defer></script>
13
20
  </head>
14
21
  <body>
15
- <nav class='nav'><div class='nav-in'>
16
- <svg class='mlogo logo-anim' viewBox='0 0 500 500' role='img' aria-label='AURA.MCP logo'><defs><radialGradient id='lg_bg' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='#1e1b4b' stop-opacity='.6'/><stop offset='100%' stop-color='#09090b' stop-opacity='1'/></radialGradient><linearGradient id='lg_aura' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='#6366f1'/><stop offset='50%' stop-color='#a855f7'/><stop offset='100%' stop-color='#ec4899'/></linearGradient><linearGradient id='lg_node' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='#38bdf8'/><stop offset='100%' stop-color='#818cf8'/></linearGradient></defs><rect width='500' height='500' rx='110' fill='url(#lg_bg)'/><path class='lg-a' d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='url(#lg_aura)' opacity='.95'/><path class='lg-bar' d='M 180 290 L 320 290' stroke='url(#lg_node)' stroke-width='14' stroke-linecap='round' fill='none'/><circle class='lg-n lg-n1' cx='250' cy='110' r='16' fill='#fff'/><circle class='lg-n lg-n2' cx='130' cy='330' r='16' fill='#6366f1'/><circle class='lg-n lg-n3' cx='370' cy='330' r='16' fill='#ec4899'/><circle class='lg-n lg-n4' cx='250' cy='290' r='11' fill='#38bdf8'/><text x='250' y='415' font-family='Inter,Arial,sans-serif' font-size='34' font-weight='700' fill='#fff' text-anchor='middle'>AURA<tspan fill='#a855f7'>.MCP</tspan></text></svg>
17
- <div class='bname'>aura-components-mcp<small>by swastiksingh-dev &middot; free only &middot; no login</small></div>
18
- <div class='tabs'><a href='./index.html'>Home</a><a href='./how.html'>How it works</a><a href='./tools.html'>Tools</a><a href='./compare.html' class='on'>Compare</a><a href='./setup.html'>Setup</a><a href='./docs.html'>Docs</a></div>
19
- <button class='iconbtn' id='themeBtn' title='Toggle dark mode'>&#9788;</button>
22
+ <a class="skip" href="#main">Skip to content</a>
23
+ <div id="progress"></div>
24
+ <nav class="nav"><div class="nav-in">
25
+ <a class="brand" href="./index.html"><span class="mark" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 5 27 25h-5.2L16 13.2 10.2 25H5Z" style="fill:var(--bg)"/><rect x="11" y="21.3" width="10" height="2.5" rx="1.25" style="fill:var(--muted2)"/></svg></span>
26
+ <span class="bname">aura-components-mcp<small>free catalogue · no login</small></span></a>
27
+ <div class="tabs" id="tabs"><a href="./index.html">Home</a><a href="./how.html">How it works</a><a href="./tools.html">Tools</a><a href="./compare.html">Compare</a><a href="./setup.html">Setup</a><a href="./docs.html">Docs</a></div>
28
+ <a class="ghbtn" href="https://github.com/swastiksingh-dev/Aura-Components-MCP" aria-label="GitHub"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span>GitHub</span></a>
29
+ <button class="iconbtn menubtn" id="menuBtn" aria-label="Menu">☰</button>
30
+ <button class="iconbtn" id="themeBtn" title="Toggle theme">☾</button>
20
31
  </div></nav>
21
- <header class='hero'><canvas class='gl' aria-hidden='true'></canvas><div class='hero-shade'></div><div class='hero-in'><div class='eyebrow'>compare</div><h1>Same family.<br>Different jobs.</h1><p class='lede'>Use both: catalogue here, account there. This page says which is which.</p><div class='cta'></div><div class='stats'><div class='stat'><b>2,495</b><span>components</span></div><div class='stat'><b>187</b><span>skills</span></div><div class='stat'><b>30,688</b><span>assets</span></div><div class='stat'><b>725</b><span>systems</span></div></div></div></header>
22
- <div class='wrap'><section class='sec'><div class='eyebrow center'>compare</div><h2>This MCP vs the official one.</h2><table class='cmp reveal'><tr><th></th><th>aura-components-mcp</th><th>official aura mcp</th></tr><tr><td>Reads</td><td class='yes'>Public catalogue: 2,495 / 187 / 30,688 / 725</td><td>Your Canvases, projects, sites</td></tr><tr><td>Login</td><td class='yes'>None</td><td class='no'>Aura account + OAuth</td></tr><tr><td>Price</td><td class='yes'>Free, MIT</td><td class='no'>Aura tiers</td></tr><tr><td>Install plans</td><td class='yes'>install_* + tokens</td><td class='no'>Source only</td></tr><tr><td>Publish</td><td class='no'>Not included</td><td class='yes'>Validate + publish</td></tr><tr><td>Transport</td><td>stdio, 48KB, zero deps</td><td>Streamable HTTP</td></tr></table></section></div>
23
- <footer><div class='foot-in'><span><b>aura-components-mcp</b> by swastiksingh-dev</span><span class='sp'></span><a href='https://github.com/swastiksingh-dev/Aura-Components-MCP'>GitHub</a><a href='https://www.aura.build/components'>Aura</a></div></footer>
24
- <script src='./app.js'></script>
32
+ <div class="mpanel" id="mpanel"><div class="moverlay" data-close></div><div class="msheet">
33
+ <div class="mhead"><span>Menu</span><button class="iconbtn" data-close aria-label="Close menu">✕</button></div>
34
+ <a href="./index.html" data-nav>Home</a><a href="./how.html" data-nav>How it works</a><a href="./tools.html" data-nav>Tools</a><a href="./compare.html" data-nav>Compare</a><a href="./setup.html" data-nav>Setup</a><a href="./docs.html" data-nav>Docs</a>
35
+ </div></div>
36
+ <header class="hero"><div class="hero-in">
37
+ <span class="badge"><i></i>compare</span>
38
+ <h1>Same family.<br><span class="grad">Different jobs.</span></h1>
39
+ <p class="lede">Use both: catalogue here, account there.</p>
40
+ <div class="stats"><div class="stat"><b>2,495</b><span>components</span></div><div class="stat"><b>187</b><span>skills</span></div><div class="stat"><b>30,688</b><span>assets</span></div><div class="stat"><b>725</b><span>systems</span></div></div>
41
+ </div></header>
42
+ <main class="wrap" id="main">
43
+ <section class="sec"><div class="kicker">compare</div><h2>This MCP vs the official one.</h2>
44
+ <table class="cmp reveal"><tr><th></th><th>aura-components-mcp</th><th>official aura mcp</th></tr>
45
+ <tr><td>Reads</td><td class="yes">Public catalogue: 2,495 / 187 / 30,688 / 725</td><td>Your Canvases, projects, sites</td></tr>
46
+ <tr><td>Login</td><td class="yes">None</td><td class="no">Aura account + OAuth</td></tr>
47
+ <tr><td>Price</td><td class="yes">Free, MIT</td><td class="no">Aura tiers</td></tr>
48
+ <tr><td>Install plans</td><td class="yes">install_* + tokens</td><td class="no">Source only</td></tr>
49
+ <tr><td>Publish</td><td class="no">Not included</td><td class="yes">Validate + publish</td></tr>
50
+ <tr><td>Transport</td><td>stdio · 48KB · zero deps</td><td>Streamable HTTP</td></tr></table>
51
+ <div class="doc"><div class="note">Rule of thumb: exploring ideas or landing pages → <b>this server</b>. Editing your Canvas or shipping → <b>official</b>.</div>
52
+ <div class="cta"><a class="btn btn-pri" href="./setup.html">Set up this one</a><a class="btn btn-sec" href="./tools.html">See what it adds</a></div></div>
53
+ </section></main>
54
+ <footer><div class="foot-grid">
55
+ <div class="foot-brand"><span class="bname">aura-components-mcp</span><p>Every free thing on Aura, one call away. Free only, no login, MIT.</p><span class="ver">v1.5.4 · 20 tools</span></div>
56
+ <div><h4>Product</h4><a href="./how.html">How it works</a><a href="./tools.html">All 20 tools</a><a href="./compare.html">vs official MCP</a></div>
57
+ <div><h4>Resources</h4><a href="./setup.html">Setup in a minute</a><a href="./docs.html">Docs, slowly</a><a href="https://www.aura.build/components">Aura catalogue</a></div>
58
+ <div><h4>Project</h4><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP/issues">Issues</a><a href="https://www.npmjs.com/package/aura-components-mcp">npm</a></div>
59
+ </div><div class="foot-in"><span><b>aura-components-mcp</b> by swastiksingh-dev · MIT</span><span class="sp"></span><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://www.aura.build/components">Aura</a><span id="yr"></span></div></footer>
60
+ <button id="toTop" aria-label="Back to top">↑</button>
25
61
  </body>
26
62
  </html>
package/flow/docs.html CHANGED
@@ -1,26 +1,73 @@
1
1
  <!doctype html>
2
- <html lang='en' data-theme='dark'>
2
+ <html lang="en" data-theme="dark" class="no-js">
3
3
  <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1'>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
6
  <title>Docs — how aura-components-mcp works</title>
7
- <meta name='description' content='Free MCP server for the Aura public catalogue: 2,495 components, 187 skills, 30,688 assets, 725 design systems. No login. Built by swastiksingh-dev.'>
8
- <link rel='icon' href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Crect width='500' height='500' rx='110' fill='%2309090b'/%3E%3Cpath d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='%23a855f7'/%3E%3Cpath d='M 180 290 L 320 290' stroke='%2338bdf8' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='110' r='16' fill='white'/%3E%3Ccircle cx='130' cy='330' r='16' fill='%236366f1'/%3E%3Ccircle cx='370' cy='330' r='16' fill='%23ec4899'/%3E%3Ccircle cx='250' cy='290' r='11' fill='%2338bdf8'/%3E%3C/svg%3E">
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet'>
12
- <link rel='stylesheet' href='./styles.css'>
7
+ <meta name="description" content="New to MCP? Five minutes top to bottom: status, search, fetch, install. Free-only, fast.">
8
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='black'/%3E%3Cpath d='M16 6 26 24h-5l-5-10-5 10H6z' fill='white'/%3E%3C/svg%3E">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <meta name="color-scheme" content="light dark">
13
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
14
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
15
+ <script>(function(){try{var s=localStorage.getItem("acm-theme");document.documentElement.dataset.theme=s==="light"?"light":"dark"}catch(e){document.documentElement.dataset.theme="dark"}})();</script>
16
+ <link rel="stylesheet" href="./styles.css">
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
19
+ <script src="./app.js" defer></script>
13
20
  </head>
14
21
  <body>
15
- <nav class='nav'><div class='nav-in'>
16
- <svg class='mlogo logo-anim' viewBox='0 0 500 500' role='img' aria-label='AURA.MCP logo'><defs><radialGradient id='lg_bg' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='#1e1b4b' stop-opacity='.6'/><stop offset='100%' stop-color='#09090b' stop-opacity='1'/></radialGradient><linearGradient id='lg_aura' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='#6366f1'/><stop offset='50%' stop-color='#a855f7'/><stop offset='100%' stop-color='#ec4899'/></linearGradient><linearGradient id='lg_node' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='#38bdf8'/><stop offset='100%' stop-color='#818cf8'/></linearGradient></defs><rect width='500' height='500' rx='110' fill='url(#lg_bg)'/><path class='lg-a' d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='url(#lg_aura)' opacity='.95'/><path class='lg-bar' d='M 180 290 L 320 290' stroke='url(#lg_node)' stroke-width='14' stroke-linecap='round' fill='none'/><circle class='lg-n lg-n1' cx='250' cy='110' r='16' fill='#fff'/><circle class='lg-n lg-n2' cx='130' cy='330' r='16' fill='#6366f1'/><circle class='lg-n lg-n3' cx='370' cy='330' r='16' fill='#ec4899'/><circle class='lg-n lg-n4' cx='250' cy='290' r='11' fill='#38bdf8'/><text x='250' y='415' font-family='Inter,Arial,sans-serif' font-size='34' font-weight='700' fill='#fff' text-anchor='middle'>AURA<tspan fill='#a855f7'>.MCP</tspan></text></svg>
17
- <div class='bname'>aura-components-mcp<small>by swastiksingh-dev &middot; free only &middot; no login</small></div>
18
- <div class='tabs'><a href='./index.html'>Home</a><a href='./how.html'>How it works</a><a href='./tools.html'>Tools</a><a href='./compare.html'>Compare</a><a href='./setup.html'>Setup</a><a href='./docs.html' class='on'>Docs</a></div>
19
- <button class='iconbtn' id='themeBtn' title='Toggle dark mode'>&#9788;</button>
22
+ <a class="skip" href="#main">Skip to content</a>
23
+ <div id="progress"></div>
24
+ <nav class="nav"><div class="nav-in">
25
+ <a class="brand" href="./index.html"><span class="mark" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 5 27 25h-5.2L16 13.2 10.2 25H5Z" style="fill:var(--bg)"/><rect x="11" y="21.3" width="10" height="2.5" rx="1.25" style="fill:var(--muted2)"/></svg></span>
26
+ <span class="bname">aura-components-mcp<small>free catalogue · no login</small></span></a>
27
+ <div class="tabs" id="tabs"><a href="./index.html">Home</a><a href="./how.html">How it works</a><a href="./tools.html">Tools</a><a href="./compare.html">Compare</a><a href="./setup.html">Setup</a><a href="./docs.html">Docs</a></div>
28
+ <a class="ghbtn" href="https://github.com/swastiksingh-dev/Aura-Components-MCP" aria-label="GitHub"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span>GitHub</span></a>
29
+ <button class="iconbtn menubtn" id="menuBtn" aria-label="Menu">☰</button>
30
+ <button class="iconbtn" id="themeBtn" title="Toggle theme">☾</button>
20
31
  </div></nav>
21
- <header class='hero'><canvas class='gl' aria-hidden='true'></canvas><div class='hero-shade'></div><div class='hero-in'><div class='eyebrow'>docs</div><h1>How it works,<br>slowly.</h1><p class='lede'>New to MCP? Five minutes, top to bottom.</p><div class='cta'></div><div class='stats'><div class='stat'><b>2,495</b><span>components</span></div><div class='stat'><b>187</b><span>skills</span></div><div class='stat'><b>30,688</b><span>assets</span></div><div class='stat'><b>725</b><span>systems</span></div></div></div></header>
22
- <div class='wrap'><section class='sec'><div class='eyebrow center'>docs</div><h2>The four-step loop.</h2><div class='doc'><h3>What is this?</h3><p>An MCP server: a program your agent launches over stdio (<code>initialize</code>, <code>tools/list</code>, <code>tools/call</code>). Ours exposes the free Aura catalogue as 19 tools.</p><h3>Loop</h3><ol><li><b>Status</b> (<code>aura_status</code>), <b>search</b> (<code>aura_search_all</code>), <b>fetch</b> (<code>aura_get_*</code>), <b>install</b> (<code>aura_install_*</code>).</li></ol><h3>Free-only</h3><p>Queries filter <code>private=false + premium=false</code>. Pro refused with explanation.</p><h3>Fast</h3><p>48KB bundle, 60s LRU, coalescing, bounded payloads.</p></div></section></div>
23
- <footer><div class='foot-in'><span><b>aura-components-mcp</b> by swastiksingh-dev</span><span class='sp'></span><a href='https://github.com/swastiksingh-dev/Aura-Components-MCP'>GitHub</a><a href='https://www.aura.build/components'>Aura</a></div></footer>
24
- <script src='./app.js'></script>
32
+ <div class="mpanel" id="mpanel"><div class="moverlay" data-close></div><div class="msheet">
33
+ <div class="mhead"><span>Menu</span><button class="iconbtn" data-close aria-label="Close menu">✕</button></div>
34
+ <a href="./index.html" data-nav>Home</a><a href="./how.html" data-nav>How it works</a><a href="./tools.html" data-nav>Tools</a><a href="./compare.html" data-nav>Compare</a><a href="./setup.html" data-nav>Setup</a><a href="./docs.html" data-nav>Docs</a>
35
+ </div></div>
36
+ <header class="hero"><div class="hero-in">
37
+ <span class="badge"><i></i>docs · 5 min</span>
38
+ <h1>How it works,<br><span class="grad">slowly.</span></h1>
39
+ <p class="lede">New to MCP? Top to bottom, no jargon.</p>
40
+ <div class="stats"><div class="stat"><b>2,495</b><span>components</span></div><div class="stat"><b>187</b><span>skills</span></div><div class="stat"><b>30,688</b><span>assets</span></div><div class="stat"><b>725</b><span>systems</span></div></div>
41
+ </div></header>
42
+ <main class="wrap" id="main">
43
+ <section class="sec"><div class="kicker">docs</div><h2>The four-step loop.</h2>
44
+ <div class="toc"><a href="#what">What</a><a href="#loop">Loop</a><a href="#free">Free-only</a><a href="#fast">Fast</a><a href="#install">Install</a><a href="#tuning">Tuning</a></div>
45
+ <div class="doc">
46
+ <h3 id="what">What is this?</h3>
47
+ <p>An MCP server: a program your agent launches over stdio (<code>initialize</code>, <code>tools/list</code>, <code>tools/call</code>). Ours exposes the free Aura catalogue as 20 tools.</p>
48
+ <h3 id="loop">Loop</h3>
49
+ <ol><li><b>Status</b> (<code>aura_status</code>) → <b>search</b> (<code>aura_search_all</code>) → <b>fetch</b> (<code>aura_get_*</code>) → <b>install</b> (<code>aura_install_*</code>).</li></ol>
50
+ <h3 id="free">Free-only</h3>
51
+ <p>Queries filter <code>private=false + premium=false</code>. Pro ids are refused with an explanation instead of guessing.</p>
52
+ <h3 id="fast">Fast</h3>
53
+ <p>48KB bundle · 60s LRU (300 keys) · request coalescing · bounded payloads · retries with jittered backoff.</p>
54
+ <h3 id="install">Install via npm</h3>
55
+ <p>On npm as <code>aura-components-mcp</code> — no repo needed. Global install, then run, or zero-install straight through <code>npx</code>:</p>
56
+ <div class="code"><button class="copy" data-copy>Copy</button><pre>npm install -g aura-components-mcp
57
+ npx -y aura-components-mcp@latest</pre></div>
58
+ <p>Full client matrix lives in <a href="./setup.html">Setup</a>.</p>
59
+ <h3 id="tuning">Tuning</h3>
60
+ <div class="code"><button class="copy" data-copy>Copy</button><pre>AURA_TIMEOUT_MS=12000 AURA_RETRIES=2 AURA_CACHE_TTL_MS=60000
61
+ AURA_DEFAULT_LIMIT=10 AURA_MAX_LIMIT=25 AURA_CODE_CHARS=12000</pre></div>
62
+ <div class="note">Every row carries <code>page_url</code> + <code>author</code>. Open the design before you paste it.</div>
63
+ <div class="cta"><a class="btn btn-pri" href="./setup.html">Set up in a minute</a><a class="btn btn-sec" href="./tools.html">See all 20 tools</a></div>
64
+ </div></section></main>
65
+ <footer><div class="foot-grid">
66
+ <div class="foot-brand"><span class="bname">aura-components-mcp</span><p>Every free thing on Aura, one call away. Free only, no login, MIT.</p><span class="ver">v1.5.4 · 20 tools</span></div>
67
+ <div><h4>Product</h4><a href="./how.html">How it works</a><a href="./tools.html">All 20 tools</a><a href="./compare.html">vs official MCP</a></div>
68
+ <div><h4>Resources</h4><a href="./setup.html">Setup in a minute</a><a href="./docs.html">Docs, slowly</a><a href="https://www.aura.build/components">Aura catalogue</a></div>
69
+ <div><h4>Project</h4><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP/issues">Issues</a><a href="https://www.npmjs.com/package/aura-components-mcp">npm</a></div>
70
+ </div><div class="foot-in"><span><b>aura-components-mcp</b> by swastiksingh-dev · MIT</span><span class="sp"></span><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://www.aura.build/components">Aura</a><span id="yr"></span></div></footer>
71
+ <button id="toTop" aria-label="Back to top">↑</button>
25
72
  </body>
26
73
  </html>
package/flow/how.html CHANGED
@@ -1,26 +1,63 @@
1
1
  <!doctype html>
2
- <html lang='en' data-theme='dark'>
2
+ <html lang="en" data-theme="dark" class="no-js">
3
3
  <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1'>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
6
  <title>How it works — aura-components-mcp</title>
7
- <meta name='description' content='Free MCP server for the Aura public catalogue: 2,495 components, 187 skills, 30,688 assets, 725 design systems. No login. Built by swastiksingh-dev.'>
8
- <link rel='icon' href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Crect width='500' height='500' rx='110' fill='%2309090b'/%3E%3Cpath d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='%23a855f7'/%3E%3Cpath d='M 180 290 L 320 290' stroke='%2338bdf8' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='110' r='16' fill='white'/%3E%3Ccircle cx='130' cy='330' r='16' fill='%236366f1'/%3E%3Ccircle cx='370' cy='330' r='16' fill='%23ec4899'/%3E%3Ccircle cx='250' cy='290' r='11' fill='%2338bdf8'/%3E%3C/svg%3E">
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet'>
12
- <link rel='stylesheet' href='./styles.css'>
7
+ <meta name="description" content="Search small, fetch full, paste clean. The four-step agent loop for the free Aura catalogue.">
8
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='black'/%3E%3Cpath d='M16 6 26 24h-5l-5-10-5 10H6z' fill='white'/%3E%3C/svg%3E">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <meta name="color-scheme" content="light dark">
13
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
14
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
15
+ <script>(function(){try{var s=localStorage.getItem("acm-theme");document.documentElement.dataset.theme=s==="light"?"light":"dark"}catch(e){document.documentElement.dataset.theme="dark"}})();</script>
16
+ <link rel="stylesheet" href="./styles.css">
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
19
+ <script src="./app.js" defer></script>
13
20
  </head>
14
21
  <body>
15
- <nav class='nav'><div class='nav-in'>
16
- <svg class='mlogo logo-anim' viewBox='0 0 500 500' role='img' aria-label='AURA.MCP logo'><defs><radialGradient id='lg_bg' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='#1e1b4b' stop-opacity='.6'/><stop offset='100%' stop-color='#09090b' stop-opacity='1'/></radialGradient><linearGradient id='lg_aura' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='#6366f1'/><stop offset='50%' stop-color='#a855f7'/><stop offset='100%' stop-color='#ec4899'/></linearGradient><linearGradient id='lg_node' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='#38bdf8'/><stop offset='100%' stop-color='#818cf8'/></linearGradient></defs><rect width='500' height='500' rx='110' fill='url(#lg_bg)'/><path class='lg-a' d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='url(#lg_aura)' opacity='.95'/><path class='lg-bar' d='M 180 290 L 320 290' stroke='url(#lg_node)' stroke-width='14' stroke-linecap='round' fill='none'/><circle class='lg-n lg-n1' cx='250' cy='110' r='16' fill='#fff'/><circle class='lg-n lg-n2' cx='130' cy='330' r='16' fill='#6366f1'/><circle class='lg-n lg-n3' cx='370' cy='330' r='16' fill='#ec4899'/><circle class='lg-n lg-n4' cx='250' cy='290' r='11' fill='#38bdf8'/><text x='250' y='415' font-family='Inter,Arial,sans-serif' font-size='34' font-weight='700' fill='#fff' text-anchor='middle'>AURA<tspan fill='#a855f7'>.MCP</tspan></text></svg>
17
- <div class='bname'>aura-components-mcp<small>by swastiksingh-dev &middot; free only &middot; no login</small></div>
18
- <div class='tabs'><a href='./index.html'>Home</a><a href='./how.html' class='on'>How it works</a><a href='./tools.html'>Tools</a><a href='./compare.html'>Compare</a><a href='./setup.html'>Setup</a><a href='./docs.html'>Docs</a></div>
19
- <button class='iconbtn' id='themeBtn' title='Toggle dark mode'>&#9788;</button>
22
+ <a class="skip" href="#main">Skip to content</a>
23
+ <div id="progress"></div>
24
+ <nav class="nav"><div class="nav-in">
25
+ <a class="brand" href="./index.html" aria-label="home"><span class="mark" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 5 27 25h-5.2L16 13.2 10.2 25H5Z" style="fill:var(--bg)"/><rect x="11" y="21.3" width="10" height="2.5" rx="1.25" style="fill:var(--muted2)"/></svg></span>
26
+ <span class="bname">aura-components-mcp<small>free catalogue · no login</small></span></a>
27
+ <div class="tabs" id="tabs"><a href="./index.html">Home</a><a href="./how.html">How it works</a><a href="./tools.html">Tools</a><a href="./compare.html">Compare</a><a href="./setup.html">Setup</a><a href="./docs.html">Docs</a></div>
28
+ <a class="ghbtn" href="https://github.com/swastiksingh-dev/Aura-Components-MCP" aria-label="GitHub"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span>GitHub</span></a>
29
+ <button class="iconbtn menubtn" id="menuBtn" aria-label="Menu">☰</button>
30
+ <button class="iconbtn" id="themeBtn" title="Toggle theme">☾</button>
20
31
  </div></nav>
21
- <header class='hero'><canvas class='gl' aria-hidden='true'></canvas><div class='hero-shade'></div><div class='hero-in'><div class='eyebrow'>how it works</div><h1>Search small. Fetch full.<br>Paste clean.</h1><p class='lede'>Lists stay tiny, details load only for finalists, and the guide turns winners into paste-ready answers.</p><div class='cta'><a class='pill dark' href='./tools.html'>Browse the tools</a><a class='pill ghost' href='./docs.html'>Beginner docs</a></div><div class='stats'><div class='stat'><b>2,495</b><span>components</span></div><div class='stat'><b>187</b><span>skills</span></div><div class='stat'><b>30,688</b><span>assets</span></div><div class='stat'><b>725</b><span>systems</span></div></div></div></header>
22
- <div class='wrap'><section class='sec'><div class='eyebrow center'>the loop</div><h2>Four steps, every time.</h2><div class='flow reveal'><div class='fnode' id='n0'><span class='fdot'></span><h3>1 &middot; Agent asks</h3><small>plain words, any client</small></div><div class='wire'><span class='pkt'></span></div><div class='fnode' id='n1'><span class='fdot'></span><h3>2 &middot; MCP searches</h3><small>4 tables in parallel</small></div><div class='wire'><span class='pkt p2'></span></div><div class='fnode' id='n2'><span class='fdot'></span><h3>3 &middot; Agent pastes</h3><small>guide + tokens + files</small></div></div><div class='note'>Beginner rule: status, then search-all, then get-one, then install-one. Never fetch everything up front.</div></section></div>
23
- <footer><div class='foot-in'><span><b>aura-components-mcp</b> by swastiksingh-dev</span><span class='sp'></span><a href='https://github.com/swastiksingh-dev/Aura-Components-MCP'>GitHub</a><a href='https://www.aura.build/components'>Aura</a></div></footer>
24
- <script src='./app.js'></script>
32
+ <div class="mpanel" id="mpanel"><div class="moverlay" data-close></div><div class="msheet">
33
+ <div class="mhead"><span>Menu</span><button class="iconbtn" data-close aria-label="Close menu">✕</button></div>
34
+ <a href="./index.html" data-nav>Home</a><a href="./how.html" data-nav>How it works</a><a href="./tools.html" data-nav>Tools</a><a href="./compare.html" data-nav>Compare</a><a href="./setup.html" data-nav>Setup</a><a href="./docs.html" data-nav>Docs</a>
35
+ </div></div>
36
+ <header class="hero"><div class="hero-in">
37
+ <span class="badge"><i></i>how it works</span>
38
+ <h1>Search small. Fetch full.<br><span class="grad">Paste clean.</span></h1>
39
+ <p class="lede">Lists stay tiny, details load only for finalists, and guides turn winners into paste-ready answers.</p>
40
+ <div class="cta"><a class="btn btn-pri" href="./tools.html">Browse the tools</a><a class="btn btn-sec" href="./docs.html">Beginner docs</a></div>
41
+ <div class="stats"><div class="stat"><b>2,495</b><span>components</span></div><div class="stat"><b>187</b><span>skills</span></div><div class="stat"><b>30,688</b><span>assets</span></div><div class="stat"><b>725</b><span>systems</span></div></div>
42
+ </div></header>
43
+ <main class="wrap" id="main">
44
+ <section class="sec"><div class="kicker">the loop</div><h2>Four steps, every time.</h2>
45
+ <div class="flow reveal"><div class="fnode" id="n0"><span class="fnum">01</span><h3>Agent asks</h3><small>plain words, any client</small></div><div class="wire"></div>
46
+ <div class="fnode" id="n1"><span class="fnum">02</span><h3>MCP searches</h3><small>4 tables in parallel</small></div><div class="wire"></div>
47
+ <div class="fnode" id="n2"><span class="fnum">03</span><h3>Agent pastes</h3><small>guide + tokens + files</small></div></div>
48
+ <div class="doc"><div class="note">Beginner rule: <b>status → search-all → get-one → install-one</b>. Never fetch everything up front.</div>
49
+ <div class="code"><button class="copy" data-copy>Copy</button><pre>aura_status
50
+ aura_search_all "dark cinematic portfolio"
51
+ aura_get_component 732
52
+ aura_install_component 732</pre></div>
53
+ <div class="cta"><a class="btn btn-pri" href="./setup.html">Set up in a minute</a></div></div>
54
+ </section></main>
55
+ <footer><div class="foot-grid">
56
+ <div class="foot-brand"><span class="bname">aura-components-mcp</span><p>Every free thing on Aura, one call away. Free only, no login, MIT.</p><span class="ver">v1.5.4 · 20 tools</span></div>
57
+ <div><h4>Product</h4><a href="./how.html">How it works</a><a href="./tools.html">All 20 tools</a><a href="./compare.html">vs official MCP</a></div>
58
+ <div><h4>Resources</h4><a href="./setup.html">Setup in a minute</a><a href="./docs.html">Docs, slowly</a><a href="https://www.aura.build/components">Aura catalogue</a></div>
59
+ <div><h4>Project</h4><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP/issues">Issues</a><a href="https://www.npmjs.com/package/aura-components-mcp">npm</a></div>
60
+ </div><div class="foot-in"><span><b>aura-components-mcp</b> by swastiksingh-dev · MIT</span><span class="sp"></span><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://www.aura.build/components">Aura</a><span id="yr"></span></div></footer>
61
+ <button id="toTop" aria-label="Back to top">↑</button>
25
62
  </body>
26
63
  </html>
package/flow/index.html CHANGED
@@ -1,26 +1,89 @@
1
1
  <!doctype html>
2
- <html lang='en' data-theme='dark'>
2
+ <html lang="en" data-theme="dark" class="no-js">
3
3
  <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1'>
6
- <title>aura-components-mcp — free Aura catalogue for every AI agent</title>
7
- <meta name='description' content='Free MCP server for the Aura public catalogue: 2,495 components, 187 skills, 30,688 assets, 725 design systems. No login. Built by swastiksingh-dev.'>
8
- <link rel='icon' href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Crect width='500' height='500' rx='110' fill='%2309090b'/%3E%3Cpath d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='%23a855f7'/%3E%3Cpath d='M 180 290 L 320 290' stroke='%2338bdf8' stroke-width='14' stroke-linecap='round'/%3E%3Ccircle cx='250' cy='110' r='16' fill='white'/%3E%3Ccircle cx='130' cy='330' r='16' fill='%236366f1'/%3E%3Ccircle cx='370' cy='330' r='16' fill='%23ec4899'/%3E%3Ccircle cx='250' cy='290' r='11' fill='%2338bdf8'/%3E%3C/svg%3E">
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet'>
12
- <link rel='stylesheet' href='./styles.css'>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>aura-components-mcp — free Aura catalogue for every agent</title>
7
+ <meta name="description" content="Free MCP server for the Aura public catalogue: 2,495 components, 187 skills, 30,688 assets, 725 design systems. No login.">
8
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='black'/%3E%3Cpath d='M16 6 26 24h-5l-5-10-5 10H6z' fill='white'/%3E%3C/svg%3E">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <meta name="color-scheme" content="light dark">
13
+ <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
14
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
15
+ <script>(function(){try{var s=localStorage.getItem("acm-theme");document.documentElement.dataset.theme=s==="light"?"light":"dark"}catch(e){document.documentElement.dataset.theme="dark"}})();</script>
16
+ <link rel="stylesheet" href="./styles.css">
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
19
+ <script src="./app.js" defer></script>
13
20
  </head>
14
21
  <body>
15
- <nav class='nav'><div class='nav-in'>
16
- <svg class='mlogo logo-anim' viewBox='0 0 500 500' role='img' aria-label='AURA.MCP logo'><defs><radialGradient id='lg_bg' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='#1e1b4b' stop-opacity='.6'/><stop offset='100%' stop-color='#09090b' stop-opacity='1'/></radialGradient><linearGradient id='lg_aura' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='#6366f1'/><stop offset='50%' stop-color='#a855f7'/><stop offset='100%' stop-color='#ec4899'/></linearGradient><linearGradient id='lg_node' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='#38bdf8'/><stop offset='100%' stop-color='#818cf8'/></linearGradient></defs><rect width='500' height='500' rx='110' fill='url(#lg_bg)'/><path class='lg-a' d='M 250 110 L 370 330 L 310 330 L 250 210 L 190 330 L 130 330 Z' fill='url(#lg_aura)' opacity='.95'/><path class='lg-bar' d='M 180 290 L 320 290' stroke='url(#lg_node)' stroke-width='14' stroke-linecap='round' fill='none'/><circle class='lg-n lg-n1' cx='250' cy='110' r='16' fill='#fff'/><circle class='lg-n lg-n2' cx='130' cy='330' r='16' fill='#6366f1'/><circle class='lg-n lg-n3' cx='370' cy='330' r='16' fill='#ec4899'/><circle class='lg-n lg-n4' cx='250' cy='290' r='11' fill='#38bdf8'/><text x='250' y='415' font-family='Inter,Arial,sans-serif' font-size='34' font-weight='700' fill='#fff' text-anchor='middle'>AURA<tspan fill='#a855f7'>.MCP</tspan></text></svg>
17
- <div class='bname'>aura-components-mcp<small>by swastiksingh-dev &middot; free only &middot; no login</small></div>
18
- <div class='tabs'><a href='./index.html' class='on'>Home</a><a href='./how.html'>How it works</a><a href='./tools.html'>Tools</a><a href='./compare.html'>Compare</a><a href='./setup.html'>Setup</a><a href='./docs.html'>Docs</a></div>
19
- <button class='iconbtn' id='themeBtn' title='Toggle dark mode'>&#9788;</button>
22
+ <a class="skip" href="#main">Skip to content</a>
23
+ <div id="progress"></div>
24
+ <nav class="nav"><div class="nav-in">
25
+ <a class="brand" href="./index.html" aria-label="aura-components-mcp home">
26
+ <span class="mark" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 5 27 25h-5.2L16 13.2 10.2 25H5Z" style="fill:var(--bg)"/><rect x="11" y="21.3" width="10" height="2.5" rx="1.25" style="fill:var(--muted2)"/></svg></span>
27
+ <span class="bname">aura-components-mcp<small>free catalogue · no login</small></span></a>
28
+ <div class="tabs" id="tabs">
29
+ <a href="./index.html">Home</a><a href="./how.html">How it works</a><a href="./tools.html">Tools</a>
30
+ <a href="./compare.html">Compare</a><a href="./setup.html">Setup</a><a href="./docs.html">Docs</a>
31
+ </div>
32
+ <a class="ghbtn" href="https://github.com/swastiksingh-dev/Aura-Components-MCP" aria-label="GitHub"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span>GitHub</span></a>
33
+ <button class="iconbtn menubtn" id="menuBtn" aria-label="Menu">☰</button>
34
+ <button class="iconbtn" id="themeBtn" title="Toggle theme">☾</button>
20
35
  </div></nav>
21
- <header class='hero'><canvas class='gl' aria-hidden='true'></canvas><div class='hero-shade'></div><div class='hero-in'><div class='eyebrow'>mcp server &middot; stdio &middot; zero dependencies</div><h1>Every free thing on Aura,<br>one call away.</h1><p class='lede'>The whole free Aura catalogue behind 19 tools your agent already knows how to call. No account, no key, no browser tabs.</p><div class='cta'><a class='pill dark' href='./setup.html'>Set up in a minute</a><a class='pill ghost' href='./how.html'>See how it works</a></div><div class='stats'><div class='stat'><b>2,495</b><span>components</span></div><div class='stat'><b>187</b><span>skills</span></div><div class='stat'><b>30,688</b><span>assets</span></div><div class='stat'><b>725</b><span>systems</span></div></div></div></header>
22
- <div class='wrap'><section class='sec'><div class='eyebrow center'>start</div><h2>Begin in three clicks.</h2><p class='center muted'><a href='./docs.html'>How it works, slowly</a> &middot; <a href='./tools.html'>Every tool, grouped</a> &middot; <a href='./compare.html'>This vs official</a> &middot; <a href='./setup.html'>Setup in a minute</a></p></section></div>
23
- <footer><div class='foot-in'><span><b>aura-components-mcp</b> by swastiksingh-dev</span><span class='sp'></span><a href='https://github.com/swastiksingh-dev/Aura-Components-MCP'>GitHub</a><a href='https://www.aura.build/components'>Aura</a></div></footer>
24
- <script src='./app.js'></script>
36
+ <div class="mpanel" id="mpanel"><div class="moverlay" data-close></div><div class="msheet">
37
+ <div class="mhead"><span>Menu</span><button class="iconbtn" data-close aria-label="Close menu">✕</button></div>
38
+ <a href="./index.html" data-nav>Home</a><a href="./how.html" data-nav>How it works</a><a href="./tools.html" data-nav>Tools</a><a href="./compare.html" data-nav>Compare</a><a href="./setup.html" data-nav>Setup</a><a href="./docs.html" data-nav>Docs</a>
39
+ </div></div>
40
+ <header class="hero"><div class="hero-in">
41
+ <div class="hero-badge-row"><span class="badge"><i></i>mcp server · stdio · zero deps</span><span class="badge">v1.5.4 · 20 tools</span></div>
42
+ <h1>Every free thing on Aura,<br><span class="grad">one call away.</span></h1>
43
+ <p class="lede">2,495 components, 187 skills, 30,688 assets, 725 design systems — behind 20 tools your agent already knows how to call.</p>
44
+ <div class="cta"><a class="btn btn-pri" href="./setup.html">Set up in a minute</a>
45
+ <a class="btn btn-sec" href="./how.html">See how it works</a></div>
46
+ <div class="stats"><div class="stat"><b data-count="2495">2,495</b><span>components</span></div>
47
+ <div class="stat"><b data-count="187">187</b><span>skills</span></div>
48
+ <div class="stat"><b data-count="30688">30,688</b><span>assets</span></div>
49
+ <div class="stat"><b data-count="725">725</b><span>systems</span></div></div>
50
+ </div></header>
51
+ <div class="marquee" aria-hidden="true"><div class="mtrack">
52
+ <span><b>aura_status</b> → health + counts</span><span><b>aura_search_all</b> → 4 surfaces at once</span><span><b>aura_recommend</b> → starter kit</span><span><b>aura_bundle</b> → 8 details, 1 call</span><span><b>aura_scaffold_page</b> → full page, 1 turn</span><span><b>aura_install_component</b> → paste plan</span><span><b>aura_use_design_system</b> → tokens first</span>
53
+ <span><b>aura_status</b> → health + counts</span><span><b>aura_search_all</b> → 4 surfaces at once</span><span><b>aura_recommend</b> → starter kit</span><span><b>aura_bundle</b> → 8 details, 1 call</span><span><b>aura_scaffold_page</b> → full page, 1 turn</span><span><b>aura_install_component</b> → paste plan</span><span><b>aura_use_design_system</b> → tokens first</span>
54
+ </div></div>
55
+ <main class="wrap" id="main">
56
+ <section class="sec"><div class="kicker">start</div><h2>Begin in three steps.</h2>
57
+ <p class="sub"><a href="./docs.html">How it works, slowly</a> · <a href="./tools.html">Every tool, grouped</a> · <a href="./compare.html">This vs official</a> · <a href="./setup.html">Setup</a></p>
58
+ <div class="grid3">
59
+ <div class="card reveal"><code>aura_status → aura_search_all</code><h3>1 · Find</h3><p>Confirm reachability, then search all four surfaces in parallel. Never empties — fallback + suggestions.</p></div>
60
+ <div class="card reveal"><code>aura_get_component</code><h3>2 · Fetch full</h3><p>Lists stay tiny. Load markup, SKILL.md, or DESIGN.md only for finalists.</p></div>
61
+ <div class="card reveal"><code>aura_install_* + aura_use_*</code><h3>3 · Paste clean</h3><p>Guides hand back deps, fonts, tokens first, file map second. <span class="tag">beyond official</span></p></div>
62
+ </div></section>
63
+ <section class="sec"><div class="kicker">why</div><h2>Why not the official MCP?</h2>
64
+ <p class="sub">Aura ships an official MCP for your projects. This covers the public catalogue — no OAuth, no key.</p>
65
+ <div class="grid3">
66
+ <div class="card reveal"><code>free-only default</code><h3>No login, ever</h3><p>Reads hit public endpoints. Pro rows never sneak in; Pro ids are refused with an explanation.</p></div>
67
+ <div class="card reveal"><code>48KB · 60s cache</code><h3>Fast by design</h3><p>One bundled file, zero deps, LRU + coalescing, bounded payloads, retries with backoff.</p></div>
68
+ <div class="card reveal"><code>aura_scaffold_page</code><h3>One-turn builds</h3><p>Tokens + system preview + markup in dependency order. <span class="tag">beyond official</span></p></div>
69
+ </div></section>
70
+ <section class="sec"><div class="kicker">install</div><h2>One file. Any client.</h2>
71
+ <div class="doc"><div class="code"><button class="copy" data-copy>Copy</button><pre>git clone https://github.com/swastiksingh-dev/aura-components-mcp.git
72
+ cd aura-components-mcp
73
+ npm run build
74
+ node ./dist/server.js</pre></div>
75
+ <div class="note">If it prints <b>listening on stdio</b>, it works. Then register: <code>claude mcp add aura-components -- node ./dist/server.js</code> · or skip the clone via <code>npm i -g aura-components-mcp</code> · full matrix in <a href="./setup.html">Setup</a>.</div>
76
+ <div class="cta"><a class="btn btn-pri" href="./setup.html">Full setup guide</a><a class="btn btn-sec" href="./tools.html">Browse 20 tools</a></div>
77
+ </div></section>
78
+ </main>
79
+ <footer><div class="foot-grid">
80
+ <div class="foot-brand"><span class="bname">aura-components-mcp</span><p>Every free thing on Aura, one call away. Free only, no login, MIT.</p><span class="ver">v1.5.4 · 20 tools</span></div>
81
+ <div><h4>Product</h4><a href="./how.html">How it works</a><a href="./tools.html">All 20 tools</a><a href="./compare.html">vs official MCP</a></div>
82
+ <div><h4>Resources</h4><a href="./setup.html">Setup in a minute</a><a href="./docs.html">Docs, slowly</a><a href="https://www.aura.build/components">Aura catalogue</a></div>
83
+ <div><h4>Project</h4><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP/issues">Issues</a><a href="https://www.npmjs.com/package/aura-components-mcp">npm</a></div>
84
+ </div><div class="foot-in"><span><b>aura-components-mcp</b> by swastiksingh-dev · MIT</span>
85
+ <span class="sp"></span><a href="https://github.com/swastiksingh-dev/Aura-Components-MCP">GitHub</a>
86
+ <a href="https://www.aura.build/components">Aura</a><span id="yr"></span></div></footer>
87
+ <button id="toTop" aria-label="Back to top">↑</button>
25
88
  </body>
26
89
  </html>