multi-ai-sidepanel/docs/browser-ai-comparison.html at main · xiaojiou176-open/multi-ai-sidepanel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser-side AI Comparison | Prompt Switchboard</title>
    <meta name="description" content="Understand why Prompt Switchboard keeps AI comparison inside the browser and outside a hosted relay." />
    <link rel="canonical" href="https://xiaojiou176-open.github.io/multi-ai-sidepanel/browser-ai-comparison.html" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="Browser-side AI Comparison | Prompt Switchboard" />
    <meta property="og:description" content="Prompt Switchboard compares supported AI tabs inside your browser and keeps the trust boundary in the browser." />
    <meta property="og:url" content="https://xiaojiou176-open.github.io/multi-ai-sidepanel/browser-ai-comparison.html" />
    <meta property="og:image" content="https://xiaojiou176-open.github.io/multi-ai-sidepanel/assets/prompt-switchboard-social-preview.png" />
    <meta property="og:image:alt" content="Prompt Switchboard social preview showing the compare-first browser extension." />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Browser-side AI Comparison | Prompt Switchboard" />
    <meta name="twitter:description" content="See why Prompt Switchboard keeps comparison inside the browser instead of routing prompts through a hosted relay." />
    <meta name="twitter:image" content="https://xiaojiou176-open.github.io/multi-ai-sidepanel/assets/prompt-switchboard-social-preview.png" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "TechArticle",
        "headline": "Browser-side AI Comparison",
        "description": "Understand why Prompt Switchboard keeps AI comparison inside the browser and outside a hosted relay.",
        "author": {
          "@type": "Organization",
          "name": "Prompt Switchboard"
        },
        "about": [
          "Browser-side AI comparison",
          "Browser trust boundary",
          "Hosted relay avoidance"
        ],
        "url": "https://xiaojiou176-open.github.io/multi-ai-sidepanel/browser-ai-comparison.html",
        "image": "https://xiaojiou176-open.github.io/multi-ai-sidepanel/assets/prompt-switchboard-social-preview.png",
        "keywords": [
          "browser-side AI comparison",
          "browser-side AI workflow",
          "Prompt Switchboard trust boundary",
          "no hosted relay"
        ]
      }
    </script>
    <style>body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(180deg,#fffaf6 0%,#ffffff 45%,#fff5e9 100%);color:#0f172a}.shell{width:min(960px,calc(100vw - 32px));margin:0 auto;padding:28px 0 64px}.nav,.actions{display:flex;flex-wrap:wrap;gap:12px}.nav{align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:12px;font-weight:700}.nav-link,.cta,.chip{display:inline-flex;align-items:center;border-radius:999px;padding:12px 18px;border:1px solid rgba(251,113,133,.16);background:rgba(255,255,255,.82);font-size:14px;font-weight:600}.chip{padding:10px 14px;background:#fff1f6;border-color:#fbcfe8;color:#be185d;letter-spacing:.1em;text-transform:uppercase}.cta{color:#fff;border:none;background:linear-gradient(135deg,#d946ef,#f43f5e,#f59e0b)}.card{margin-top:28px;padding:28px;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 24px 64px rgba(15,23,42,.08)}h1{margin:18px 0 0;font-size:clamp(38px,6vw,60px);line-height:1.02;letter-spacing:-.05em}h2{margin:0;font-size:28px;letter-spacing:-.03em}p,li{color:#475569;font-size:18px;line-height:1.7}ul{margin:16px 0 0;padding-left:24px}.grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}.subcard{padding:22px;border-radius:24px;background:rgba(255,255,255,.88);border:1px solid rgba(251,113,133,.16)}@media (max-width:820px){.grid{grid-template-columns:1fr}}</style>
  </head>
  <body>
    <div class="shell">
      <nav class="nav">
        <div class="wordmark"><img src="./assets/prompt-switchboard-nav-icon.svg" alt="Prompt Switchboard logo" width="32" height="32" /><span>Prompt Switchboard</span></div>
        <div class="actions">
          <a class="nav-link" href="./index.html">Landing page</a>
          <a class="nav-link" href="./install.html">Install guide</a>
          <a class="nav-link" href="./first-compare-guide.html">First compare guide</a>
          <a class="nav-link" href="./trust-boundary.html">Trust boundary</a>
          <a class="nav-link" href="./compare-chatgpt-vs-gemini-vs-perplexity.html">Compare use case</a>
          <a class="cta" href="https://github.com/xiaojiou176-open/multi-ai-sidepanel/releases/latest">Install latest build</a>
        </div>
      </nav>
      <main class="card">
        <span class="chip">Use case</span>
        <h1>Choose a browser-side AI compare workflow when you want the browser to stay in charge.</h1>
        <p>Prompt Switchboard is intentionally narrower than a hosted AI dashboard. It reuses the tabs and sessions you already trust, then gives you one compare workspace without putting a new relay in the middle.</p>
        <div class="grid">
          <section class="subcard">
            <h2>Why the browser boundary matters here</h2>
            <ul>
              <li>Your existing browser sessions stay the execution surface</li>
              <li>Prompt Switchboard does not need to proxy every prompt through a new account layer</li>
              <li>Compare exports can stay local artifacts instead of becoming hosted share links</li>
            </ul>
          </section>
          <section class="subcard">
            <h2>Where it still has sharp edges</h2>
            <ul>
              <li>Supported sites can change their DOM and trigger selector drift</li>
              <li>Readiness repair still depends on the correct tab being open and signed in</li>
              <li>The product is intentionally scoped to supported AI chat surfaces, not arbitrary websites</li>
            </ul>
          </section>
        </div>
      </main>

      <section class="card">
        <h2>What the browser-side shape looks like</h2>
        <p>This does not mean “offline AI.” It means the browser stays the execution surface, the tabs you already trust stay open, and Prompt Switchboard coordinates compare runs without becoming a hosted relay in the middle.</p>
        <img
          src="./assets/prompt-switchboard-flow.png"
          alt="Diagram showing Prompt Switchboard workflow: open supported tabs, ask once, compare answers, and stay inside the browser."
          style="width:100%;display:block;border-radius:24px;border:1px solid rgba(251,113,133,.16);margin-top:18px"
        />
        <p style="margin-top:14px">That narrower shape is the point: it keeps the product easier to reason about, even while the compare board, export lane, and governed coding-agent integrations grow stronger.</p>
      </section>

      <section class="card">
        <div class="grid">
          <section class="subcard">
            <h2>Before you choose this workflow</h2>
            <ul>
              <li>Use this when you already trust the supported AI tabs and want to keep the browser in charge.</li>
              <li>Do not expect a hosted account layer, a public HTTP API, or arbitrary website automation.</li>
              <li>Expect readiness checks and repair hints to depend on the correct tabs being open and signed in.</li>
            </ul>
          </section>
          <section class="subcard">
            <h2>Good questions for this page</h2>
            <ul>
              <li>Why keep the compare flow inside the browser?</li>
              <li>What trust hop do I avoid by skipping a hosted relay?</li>
              <li>Where do selector drift and signed-in tabs still matter?</li>
            </ul>
          </section>
        </div>
      </section>

      <section class="card">
        <h2>What to open next</h2>
        <div class="grid">
          <section class="subcard">
            <h2>Trust boundary</h2>
            <p>Read the canonical page that spells out the exact browser trust boundary in detail.</p>
            <p><a href="./trust-boundary.html">Open the trust boundary page</a></p>
          </section>
          <section class="subcard">
            <h2>Compare use case</h2>
            <p>See the default compare-first workflow that this browser boundary exists to protect.</p>
            <p><a href="./compare-chatgpt-vs-gemini-vs-perplexity.html">Open the compare use case</a></p>
          </section>
          <section class="subcard">
            <h2>FAQ</h2>
            <p>Use this when you want quick answers about exports, the analyst lane, or the governed coding-agent integrations.</p>
            <p><a href="./faq.html">Open the FAQ</a></p>
          </section>
          <section class="subcard">
            <h2>Install guide</h2>
            <p>Move from packaged release zip to the first local compare run without guessing the prerequisites.</p>
            <p><a href="./install.html">Open the install guide</a></p>
          </section>
        </div>
      </section>
    </div>
  </body>
</html>