1---
2// "Make songs with your AI": how a visitor connects their own MCP client to
3// the hosted MCP. The guide is ConnectAi.jsx, which the jev panel's mcp tab
4// shows too, rendered here at build time.
5import { siteName, siteUrl, themeColor } from '../jev/site.mjs';
6import { ConnectAi } from '../jev/ConnectAi.jsx';
7
8const server = `${siteUrl}/jev/mcp`;
9---
10
11<html lang="en">
12  <head>
13    <meta charset="utf-8" />
14    <meta name="viewport" content="width=device-width, initial-scale=1" />
15    <title>Make songs with your AI · {siteName}</title>
16    <meta name="description" content={`Connect your own AI (Claude Code, Claude, any MCP client) to ${siteName}: it plays Strudel songs in your open tab and publishes them for Jev to screen.`} />
17    <style define:vars={{ accent: themeColor }}>
18      body {
19        margin: 0;
20        background: #161616;
21        color: #eee;
22        font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
23      }
24      main {
25        max-width: 46rem;
26        margin: 2.5rem auto;
27        padding: 0 1rem 4rem;
28      }
29      h1,
30      h2 {
31        color: var(--accent);
32      }
33      h1 {
34        font-size: 1.5rem;
35      }
36      h2 {
37        font-size: 1.1rem;
38        margin-top: 2rem;
39      }
40      a {
41        color: var(--accent);
42      }
43      pre,
44      code {
45        background: #222;
46        border-radius: 4px;
47      }
48      pre {
49        padding: 0.6rem 0.8rem;
50        overflow-x: auto;
51        border: 1px solid #333;
52      }
53      code {
54        padding: 0 0.2rem;
55      }
56      table {
57        border-collapse: collapse;
58        width: 100%;
59      }
60      td,
61      th {
62        border-top: 1px solid #333;
63        padding: 0.4rem 0.5rem 0.4rem 0;
64        vertical-align: top;
65        text-align: left;
66      }
67      .muted {
68        opacity: 0.75;
69      }
70    </style>
71  </head>
72  <body>
73    <main>
74      <p><a href="/">← {siteName}</a></p>
75      <h1>Make songs with your AI</h1>
76      <ConnectAi server={server} />
77    </main>
78    <script is:inline>
79      // in dev, and anywhere else the site runs, the server is this origin's
80      for (const el of document.querySelectorAll('.server')) el.textContent = `${location.origin}/jev/mcp`;
81    </script>
82  </body>
83</html>