https://www.vynix.in/assets/McpPage-rvew9xJx.js

1import{h as d,j as e,ae as Y,a5 as k}from"./index-C3hYg7Vm.js";import{r as o,L as $}from"./react-DaZfdddc.js";import{C as p,F as B,T as F,B as v,A as T}from"./ui-Bc_efa8_.js";import{u as R}from"./useAsync-D_8S-tHt.js";import{a as g}from"./format-BYTcCa6w.js";const K=[{name:"list_projects",description:"List the Vynix projects you own."},{name:"list_annotations",description:"List annotations for a project, filtered by status, type, or priority."},{name:"get_annotation",description:"Fetch one annotation with its full captured page, element, and DOM context."},{name:"generate_prompt",description:"Generate a ready-to-paste coding prompt for an annotation."},{name:"update_annotation_status",description:"Move an annotation to in_progress, completed, or another status."},{name:"add_comment",description:"Add a comment to an annotation’s discussion thread."},{name:"create_github_issue",description:"Open a GitHub issue from an annotation using the project’s repo and assignee."},{name:"get_metrics",description:"Overview of your projects: KPI counts, status breakdown, and recent activity."},{name:"list_members",description:"List a project’s team members, roles, and status."},{name:"get_activity",description:"Recent activity feed: status changes, comments, issues."}],D=[{title:"Generate a token",body:"Create a personal token below. It authenticates the MCP server as you. Keep it secret."},{title:"Add the server",body:"Paste the config into Cursor or VS Code. It runs the Vynix MCP server with npx, no install."},{title:"Restart your editor",body:"Your AI client discovers the Vynix tools and connects using your token."},{title:"Ask your agent",body:"“List my open Vynix annotations and fix the first one.” The agent reads context and acts."}];function _({value:n,label:i="Copy"}){const[c,l]=o.useState(!1);async function m(){try{await navigator.clipboard.writeText(n),l(!0),window.setTimeout(()=>l(!1),1800)}catch{l(!1)}}return e.jsx(v,{variant:"secondary",onClick:m,className:"shrink-0",children:c?"Copied":i})}function H({code:n}){return e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"overflow-x-auto rounded-lg border border-slate-800 bg-slate-900 p-4 pr-14 text-xs leading-relaxed text-slate-100",children:e.jsx("code",{children:n})}),e.jsx("div",{className:"absolute right-2 top-2",children:e.jsx(_,{value:n})})]})}function X({index:n,title:i,body:c}){const l=Y(),m={"--reveal-delay":`${n*90}ms`};return e.jsx("div",{ref:l,"data-reveal":"",style:m,className:"relative",children:e.jsxs(p,{className:"h-full p-5",children:[e.jsx("span",{className:"flex h-9 w-9 items-center justify-center rounded-full bg-brand-100 text-sm font-bold text-brand-700",children:n+1}),e.jsx("h3",{className:"mt-3 font-display text-base font-semibold text-slate-900",children:i}),e.jsx("p",{className:"mt-1 text-sm text-slate-500",children:c})]})})}function u({title:n,description:i,children:c}){return e.jsxs("section",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-display text-lg font-semibold text-slate-900",children:n}),i?e.jsx("p",{className:"text-sm text-slate-500",children:i}):null]}),c]})}function Z(){const[n,i]=o.useState(""),[c,l]=o.useState(!1),[m,x]=o.useState(null),[a,j]=o.useState(null),[r,P]=o.useState("cursor"),[E,f]=o.useState(null),{data:A}=R(()=>d.getSubscription(),[]),S=A?A.plan.features.mcp===!0:!0,h=R(()=>d.listApiTokens(),[]),b=h.data??[],V=o.useMemo(()=>d.getApiBaseUrl()||(typeof window<"u"?window.location.origin:""),[]),M=(a==null?void 0:a.token)??"PASTE_YOUR_TOKEN_HERE",I=o.useMemo(()=>{const t={command:"npx",args:["-y","@usevynix/mcp-server"],env:{VYNIX_API_URL:V,VYNIX_API_TOKEN:M}},s={mcpServers:{vynix:t}},y={servers:{vynix:t}};return{cursor:JSON.stringify(s,null,2),vscode:JSON.stringify(y,null,2)}},[V,M]),N=r==="cursor"?"~/.cursor/mcp.json":".vscode/mcp.json",w=r==="cursor"?I.cursor:I.vscode,O=o.useMemo(()=>{const t=r==="cursor"?"Cursor":"VS Code",s=r==="cursor"?'Enable it in Cursor: open Settings then MCP, confirm "vynix" appears, toggle it on, and reload the window if it does not connect.':'Enable it in VS Code: run "MCP: List Servers" from the Command Palette, start "vynix", then turn on its tools in the Chat tool picker. Reload the window if it does not connect. Tip: to make Vynix available in every workspace, put this config in the user-level file instead via "MCP: Open User Configuration" rather than a per-project .vscode/mcp.json.';return[`Set up the Vynix MCP server in my editor (${t}).`,"",`1. Create or update \`${N}\`. Merge the "vynix" server into any existing config; do not remove other servers. Use this exactly:`,"",w,"","2. Do not change VYNIX_API_URL or VYNIX_API_TOKEN; the token is already filled in and is a secret.","3. Requirement: Node.js 18+ must be installed. The config runs `npx -y @usevynix/mcp-server` (no global install).",`4. ${s}`,"5. Verify by calling the `list_projects` tool; it should return my Vynix projects.","",'Once connected, I will ask you to "list my open Vynix annotations and fix the first one".'].join(`
2`)},[r,N,w]);async function L(){l(!0),x(null);try{const t=await d.createApiToken(n.trim()||void 0);j(t),h.reload(!0)}catch(t){x(t instanceof k?t.message:"Could not generate a token. Try again.")}finally{l(!1)}}async function G(t){if(window.confirm("Revoke this token? Any editor still using it will stop working immediately.")){f(t),x(null);try{await d.revokeApiToken(t),(a==null?void 0:a.id)===t&&j(null),h.reload(!0)}catch(s){x(s instanceof k?s.message:"Could not revoke the token. Try again.")}finally{f(null)}}}async function U(t){if(window.confirm("Regenerate this token? A new token is created and this one is revoked. You must update your editor with the new value.")){f(t.i

2d),x(null);try{const s=await d.createApiToken(t.name||void 0);j(s),await d.revokeApiToken(t.id),h.reload(!0)}catch(s){x(s instanceof k?s.message:"Could not regenerate the token. Try again.")}finally{f(null)}}}return e.jsxs("div",{className:"mx-auto max-w-3xl space-y-10",children:[e.jsxs("header",{className:"space-y-2",children:[e.jsx("span",{className:"inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-700",children:"Model Context Protocol"}),e.jsx("h1",{className:"font-display text-2xl font-bold text-slate-900",children:"Connect your AI editor"}),e.jsx("p",{className:"text-sm text-slate-500",children:"The Vynix MCP server lets agents in Cursor or VS Code read your annotations, generate prompts, update statuses, and open GitHub issues, using your account, securely."})]}),e.jsx(u,{title:"How it works",children:e.jsx("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:D.map((t,s)=>e.jsx(X,{index:s,title:t.title,body:t.body},t.title))})}),e.jsx(u,{title:"1. Generate a personal token",description:"One token authenticates one editor as you. It’s shown once. Copy it before leaving this page.",children:e.jsxs(p,{className:"p-5",children:[e.jsxs("div",{className:"flex flex-col gap-4 sm:flex-row sm:items-end",children:[e.jsx("div",{className:"flex-1",children:e.jsx(B,{label:"Token name (optional)",hint:"A label to help you remember where it’s used.",children:e.jsx(F,{value:n,onChange:t=>i(t.target.value),placeholder:"e.g. Cursor on my laptop",maxLength:80})})}),e.jsx(v,{onClick:L,busy:c,disabled:!S,children:a?"Generate another":"Generate token"})]}),S?null:e.jsx("div",{className:"mt-4",children:e.jsxs(T,{tone:"info",children:["MCP server access is available on paid plans."," ",e.jsx($,{to:"/billing",className:"font-medium underline",children:"Upgrade your plan"})," ","to connect your AI editor."]})}),m?e.jsx("div",{className:"mt-4",children:e.jsx(T,{tone:"error",children:m})}):null,a?e.jsxs("div",{className:"mt-4 space-y-3",children:[e.jsxs(T,{tone:"success",children:["Token created. Copy it now. For your security it won’t be shown again. Expires"," ",g(a.expires_at),"."]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"flex-1 overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-xs text-slate-800",children:a.token}),e.jsx(_,{value:a.token,label:"Copy token"})]})]}):null]})}),e.jsx(u,{title:"Your tokens",description:"Tokens you’ve created for MCP clients. Personal tokens can be regenerated. OAuth session tokens can be disconnected.",children:e.jsx(p,{className:"p-0",children:h.loading&&b.length===0?e.jsx("p",{className:"p-5 text-sm text-slate-500",children:"Loading your tokens…"}):b.length===0?e.jsx("p",{className:"p-5 text-sm text-slate-500",children:"You haven’t created any tokens yet. Generate one above to connect your editor."}):e.jsx("ul",{className:"divide-y divide-slate-100",children:b.map(t=>{const s=t.status==="active"?"bg-emerald-50 text-emerald-700":t.status==="revoked"?"bg-rose-50 text-rose-700":"bg-slate-100 text-slate-600",y=E===t.id,C=t.token_type==="personal";return e.jsxs("li",{className:"flex flex-wrap items-center gap-x-4 gap-y-2 p-4",children:[e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"truncate font-medium text-slate-900",children:t.name}),e.jsx("span",{className:"rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold capitalize text-slate-600",children:C?"Personal":"OAuth"}),e.jsx("span",{className:`rounded-full px-2 py-0.5 text-xs font-semibold capitalize ${s}`,children:t.status})]}),e.jsxs("p",{className:"mt-0.5 text-xs text-slate-500",children:["Created ",g(t.created_at)," · Expires"," ",g(t.expires_at)," · Last used"," ",t.last_used_at?g(t.last_used_at):"never"]})]}),t.status==="active"?e.jsxs("div",{className:"flex shrink-0 items-center gap-2",children:[C?e.jsx(v,{variant:"secondary",onClick:()=>void U(t),busy:y,disabled:y,children:"Regenerate"}):null,e.jsx(v,{variant:"ghost",onClick:()=>void G(t.id),disabled:y,className:"text-rose-600 hover:text-rose-700",children:C?"Revoke":"Disconnect"})]}):null]},t.id)})})})}),e.jsx(u,{title:"2. Add the server to your editor",description:"Create the file below and paste this config. The token is filled in automatically once generated.",children:e.jsxs(p,{className:"p-5",children:[e.jsxs("div",{className:"mb-4 inline-flex rounded-lg border border-slate-200 bg-slate-50 p-1 text-sm",children:[e.jsx("button",{type:"button",onClick:()=>P("cursor"),className:`rounded-md px-3 py-1.5 font-medium transition ${r==="cursor"?"bg-white text-brand-700 shadow-sm":"text-slate-500 hover:text-slate-700"}`,children:"Cursor"}),e.jsx("button",{type:"button",onClick:()=>P("vscode"),className:`rounded-md px-3 py-1.5 font-medium transition ${r==="vscode"?"bg-white text-brand-700 shadow-sm":"text-slate-500 hover:text-slate-700"}`,children:"VS Code"})]}),e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e.jsxs("p",{className:"text-xs text-slate-500",children:["File: ",e.jsx("code",{className:"rounded bg-slate-100 px-1.5 py-0.5 font-mono text-slate-700",children:N})]}),e.jsx(_,{value:O,label:"Copy for AI"})]}),e.jsx(H,{code:w}),e.jsxs("p",{className:"mt-2 text-xs text-slate-400",children:["Don’t want to edit files yourself? Click ",e.jsx("span",{className:"font-medium text-slate-500",children:"Copy for AI"})," and paste it to your coding agent. It will create the config and walk you through enabling the server."]}),a?null:e.jsxs("p",{className:"mt-3 text-xs text-slate-400",children:["Generate a token above and it will replace"," ",e.jsx("code",{className:"font-mono",children:"PASTE_YOUR_TOKEN_HERE"})," in this snippet."]}),e.jsxs("p",{className:"mt-4 text-xs text-slate-500",children:["Requires"," ",e.jsx("a",{href:"https://nodejs.org",target:"_blank",rel:"noreferrer",className:"font-medium text-brand-700 hover:underline",children:"Node.js"})," ","18+. The ",e.jsx("code",{className:"font-mono",children:"npx"})," command fetches and runs"," ",e.jsx("code",{className:"font-mono",children:"@usevynix/mcp-server"})," automatically, no global install."]}),e.jsxs("div",{className:"mt-4 rounded-lg border border-slate-200 bg-slate-50 p-4",children:[e.jsxs("h4",{className:"text-sm font-semibold text-slate-900",children:["Enable it in ",r==="cursor"?"Cursor":"VS Code"]}),r==="cursor"?e.jsxs("ol",{className:"mt-2 list-decimal space-y-1 pl-5 text-xs text-slate-600",children:[e.jsx("li",{children:"Open Settings then MCP (or run “MCP: List Servers” from the Command Palette)."}),e.jsxs("li",{children:["Confirm ",e.jsx("code",{className:"font-mono",children:"vynix"})," appears, then toggle it on."]}),e.jsx("li",{children:"Reload the window if it does not connect on the first try."})]}):e.jsxs(e.Fragment,{children:[e.jsxs("ol",{className:"mt-2 list-decimal space-y-1 pl-5 text-xs text-slate-600",children:[e.jsxs("li",{children:["Run “MCP: List Servers” from the Command Palette and start ",e.jsx("code",{className:"font-mono",children:"vynix"}),"."]}),e.jsx("li",{children:"Turn on the Vynix tools in the Chat tool picker."}),e.jsx("li",{children:"Reload the window if it does not connect on the first try."})]}),e.jsxs("p",{className:"mt-2 text-xs text-slate-500",children:["Tip: a per-project ",e.jsx("code",{className:"font-mono",children:".vscode/mcp.json"})," only loads when that folder is the workspace root. To use Vynix in every workspace, run “MCP: Open User Configuration” and add the same",e.jsx("code",{className:"font-mono",children:" vynix"})," server there instead."]})]})]})]})}),e.jsx(u,{title:"3. Restart and start prompting",description:"After saving the file, restart your editor so it picks up the new server.",children:e.jsxs(p,{className:"p-5",children:[e.jsx("p",{className:"text-sm text-slate-600",children:"Try asking your agent something like:"}),e.jsx("ul",{className:"mt-3 space-y-2 text-sm",children:["List my open Vynix annotations for the marketing site.","Generate a Cursor prompt for annotation #3 and apply the fix.","Mark the checkout button bug as completed and add a comment."].map(t=>e.jsxs("li",{className:"rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-xs text-slate-700",children:["“",t,"”"]},t))})]})}),e.jsx(u,{title:"Available tools",description:"Everything the agent can do through the Vynix MCP server.",children:e.jsx("div",{className:"grid gap-3 sm:grid-cols-2",children:K.map(t=>e.jsxs(p,{className:"p-4",children:[e.jsx("code",{className:"font-mono text-sm font-semibold text-brand-700",children:t.name}),e.jsx("p",{className:"mt-1 text-xs text-slate-500",children:t.description})]},t.name))})})]})}export{Z as McpPage};