feat: fix mcp example usage
|
@ -0,0 +1,3 @@
|
|||
<svg width="149" height="149" viewBox="0 0 149 149" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z" fill="#D97757"/>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 2.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 902 B |
Po Szerokość: | Wysokość: | Rozmiar: 666 B |
Po Szerokość: | Wysokość: | Rozmiar: 854 B |
|
@ -0,0 +1 @@
|
|||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-0)"></path><path d="M22.35 18V6L11.925 0v12l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-1)"></path><path d="M11.925 0L1.5 6v12l10.425-6V0z" fill="url(#lobe-icons-cursorundefined-fill-2)"></path><path d="M22.35 6L11.925 24V12L22.35 6z" fill="#555"></path><path d="M22.35 6l-10.425 6L1.5 6h20.85z" fill="#000"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-0" x1="11.925" x2="11.925" y1="12" y2="24"><stop offset=".16" stop-color="#000" stop-opacity=".39"></stop><stop offset=".658" stop-color="#000" stop-opacity=".8"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-1" x1="22.35" x2="11.925" y1="6.037" y2="12.15"><stop offset=".182" stop-color="#000" stop-opacity=".31"></stop><stop offset=".715" stop-color="#000" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-2" x1="11.925" x2="1.5" y1="0" y2="18"><stop stop-color="#000" stop-opacity=".6"></stop><stop offset=".667" stop-color="#000" stop-opacity=".22"></stop></linearGradient></defs></svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 1.3 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5 96.85V112.5L0 75L7.82999 67.17L37.5 96.85ZM53.15 112.5H37.5L75 150L82.83 142.17L53.15 112.5ZM142.15 82.83L149.98 75L74.98 0L67.17 7.85L96.84 37.52H78.91L58.2 16.85L50.37 24.68L63.25 37.56H54.25V95.77H112.46V86.77L125.34 99.65L133.17 91.82L112.46 71.11V53.18L142.15 82.83ZM41.41 33.62L33.56 41.45L41.96 49.85L49.79 42.02L41.41 33.62ZM108.01 100.22L100.18 108.05L108.58 116.45L116.41 108.62L108.01 100.22ZM24.61 50.41L16.78 58.24L37.49 78.95V63.29L24.61 50.41ZM86.73 112.53H71.08L91.79 133.24L99.62 125.41L86.73 112.53Z" fill="#FF6363"/>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 698 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="150" height="151" viewBox="0 0 150 151" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 75L142.18 82.82L112.51 53.15V37.5L150 75ZM75 0L67.18 7.82L96.85 37.49H112.5L75 0ZM58.21 16.82L50.38 24.65L63.26 37.53H78.91L58.21 16.82ZM112.5 71.11V86.76L125.38 99.64L133.21 91.81L112.5 71.11ZM108.02 100.21L112.5 95.73H54.3V37.5L49.82 41.98L41.42 33.58L33.57 41.42L41.97 49.82L37.49 54.3V63.3L24.61 50.42L16.78 58.25L37.49 78.96V96.82L7.83 67.18L0 75.01L75 150.01L82.83 142.18L53.16 112.51H71.09L91.8 133.22L99.63 125.39L86.75 112.51H95.75L100.23 108.03L108.63 116.43L116.46 108.6L108.02 100.21Z" fill="#FF6363"/>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 676 B |
Po Szerokość: | Wysokość: | Rozmiar: 61 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M27.4343 0H0.565657C0.253253 0 0 0.253253 0 0.565657V27.4343C0 27.7467 0.253253 28 0.565657 28H27.4343C27.7467 28 28 27.7467 28 27.4343V0.565657C28 0.253253 27.7467 0 27.4343 0Z" fill="#FF4A36"></path><path d="M22.9121 19.8093H13.8616V22.9091H22.9121V19.8093Z" fill="white"></path></svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 392 B |
|
@ -0,0 +1,41 @@
|
|||
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z" fill="#0065A9"/>
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z" fill="#007ACC"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<path d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z" fill="#1F9CF0"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.25">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="-8.39411" y="15.8291" width="116.727" height="92.2456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.16667"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="60.4167" y="-8.07558" width="47.9167" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.16667"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="49.9392" y1="0.257812" x2="49.9392" y2="99.7423" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 4.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.6 KiB |
|
@ -0,0 +1,10 @@
|
|||
<svg width="134" height="79" viewBox="0 0 134 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2808_173)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.028 -0.479202H130.758C124.075 -0.489602 118.652 4.9233 118.652 11.6062V38.634C118.652 44.032 114.191 48.403 108.883 48.403C105.729 48.403 102.58 46.816 100.711 44.151L73.105 4.7255C70.815 1.4518 67.089 -0.5 63.055 -0.5C56.763 -0.5 51.1 4.8504 51.1 11.4552V38.639C51.1 44.037 46.676 48.409 41.331 48.409C38.166 48.409 35.023 46.821 33.154 44.156L2.264 0.041298C1.5666 -0.952802 0 -0.463597 0 0.7543V24.326C0 25.518 0.364304 26.674 1.0462 27.652L31.442 71.065C33.237 73.631 35.887 75.536 38.942 76.228C46.587 77.966 53.624 72.08 53.624 64.58V37.411C53.624 32.014 57.996 27.642 63.393 27.642H63.409C66.662 27.642 69.712 29.229 71.58 31.894L99.186 71.315C101.481 74.594 105.016 76.54 109.231 76.54C115.664 76.54 121.176 71.185 121.176 64.585V37.406C121.176 32.009 125.548 27.637 130.945 27.637H132.023C132.699 27.637 133.246 27.09 133.246 26.414V0.7387C133.246 0.062101 132.699 -0.484398 132.023 -0.484398L132.028 -0.479202Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2808_173">
|
||||
<rect width="134" height="79" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 1.2 KiB |
|
@ -0,0 +1,10 @@
|
|||
<svg width="134" height="79" viewBox="0 0 134 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2808_175)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.028 -0.479202H130.758C124.075 -0.489602 118.652 4.9233 118.652 11.6062V38.634C118.652 44.032 114.191 48.403 108.883 48.403C105.729 48.403 102.58 46.816 100.711 44.151L73.105 4.7255C70.815 1.4518 67.089 -0.5 63.055 -0.5C56.763 -0.5 51.1 4.8504 51.1 11.4552V38.639C51.1 44.037 46.676 48.409 41.331 48.409C38.166 48.409 35.023 46.821 33.154 44.156L2.264 0.041298C1.5666 -0.952802 0 -0.463597 0 0.7543V24.326C0 25.518 0.364304 26.674 1.0462 27.652L31.442 71.065C33.237 73.631 35.887 75.536 38.942 76.228C46.587 77.966 53.624 72.08 53.624 64.58V37.411C53.624 32.014 57.996 27.642 63.393 27.642H63.409C66.662 27.642 69.712 29.229 71.58 31.894L99.186 71.315C101.481 74.594 105.016 76.54 109.231 76.54C115.664 76.54 121.176 71.185 121.176 64.585V37.406C121.176 32.009 125.548 27.637 130.945 27.637H132.023C132.699 27.637 133.246 27.09 133.246 26.414V0.7387C133.246 0.062101 132.699 -0.484398 132.023 -0.484398L132.028 -0.479202Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2808_175">
|
||||
<rect width="134" height="79" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
Po Szerokość: | Wysokość: | Rozmiar: 1.2 KiB |
|
@ -1,6 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import type { Project } from '@agentic/platform-types'
|
||||
import Link from 'next/link'
|
||||
import { type JSX, useEffect, useMemo, useState } from 'react'
|
||||
import { useLocalStorage } from 'react-use'
|
||||
|
||||
|
@ -8,6 +9,7 @@ import { useAgentic } from '@/components/agentic-provider'
|
|||
import { CodeBlock } from '@/components/code-block'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
type CodeSnippet,
|
||||
defaultConfig,
|
||||
type DeveloperConfig,
|
||||
getCodeForDeveloperConfig,
|
||||
|
@ -30,6 +32,7 @@ import {
|
|||
import { useQuery } from '@/lib/query-client'
|
||||
|
||||
import { LoadingIndicator } from './loading-indicator'
|
||||
import { Button } from './ui/button'
|
||||
|
||||
export function ExampleUsage({
|
||||
projectIdentifier,
|
||||
|
@ -218,12 +221,11 @@ function ExampleUsageContent({
|
|||
<TabsContent
|
||||
key={mcpClientTarget}
|
||||
value={mcpClientTarget}
|
||||
className='w-full'
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<CodeBlock
|
||||
code={codeSnippet.code}
|
||||
lang={codeSnippet.lang}
|
||||
initial={initialCodeBlock}
|
||||
<CodeSnippetBlock
|
||||
codeSnippet={codeSnippet}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
</TabsContent>
|
||||
))}
|
||||
|
@ -255,11 +257,14 @@ function ExampleUsageContent({
|
|||
</TabsList>
|
||||
|
||||
{tsFrameworkTargets.map((framework) => (
|
||||
<TabsContent key={framework} value={framework} className='w-full'>
|
||||
<CodeBlock
|
||||
code={codeSnippet.code}
|
||||
lang={codeSnippet.lang}
|
||||
initial={initialCodeBlock}
|
||||
<TabsContent
|
||||
key={framework}
|
||||
value={framework}
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<CodeSnippetBlock
|
||||
codeSnippet={codeSnippet}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
</TabsContent>
|
||||
))}
|
||||
|
@ -291,11 +296,14 @@ function ExampleUsageContent({
|
|||
</TabsList>
|
||||
|
||||
{pyFrameworkTargets.map((framework) => (
|
||||
<TabsContent key={framework} value={framework} className='w-full'>
|
||||
<CodeBlock
|
||||
code={codeSnippet.code}
|
||||
lang={codeSnippet.lang}
|
||||
initial={initialCodeBlock}
|
||||
<TabsContent
|
||||
key={framework}
|
||||
value={framework}
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<CodeSnippetBlock
|
||||
codeSnippet={codeSnippet}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
</TabsContent>
|
||||
))}
|
||||
|
@ -327,11 +335,14 @@ function ExampleUsageContent({
|
|||
</TabsList>
|
||||
|
||||
{httpTargets.map((httpTarget) => (
|
||||
<TabsContent key={httpTarget} value={httpTarget} className='w-full'>
|
||||
<CodeBlock
|
||||
code={codeSnippet.code}
|
||||
lang={codeSnippet.lang}
|
||||
initial={initialCodeBlock}
|
||||
<TabsContent
|
||||
key={httpTarget}
|
||||
value={httpTarget}
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<CodeSnippetBlock
|
||||
codeSnippet={codeSnippet}
|
||||
initialCodeBlock={initialCodeBlock}
|
||||
/>
|
||||
</TabsContent>
|
||||
))}
|
||||
|
@ -340,3 +351,60 @@ function ExampleUsageContent({
|
|||
</Tabs>
|
||||
)
|
||||
}
|
||||
|
||||
function CodeSnippetBlock({
|
||||
codeSnippet,
|
||||
initialCodeBlock
|
||||
}: {
|
||||
codeSnippet: CodeSnippet
|
||||
initialCodeBlock?: JSX.Element
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<CodeBlock
|
||||
code={codeSnippet.code}
|
||||
lang={codeSnippet.lang}
|
||||
initial={initialCodeBlock}
|
||||
/>
|
||||
|
||||
{codeSnippet.action && (
|
||||
<Button
|
||||
asChild
|
||||
className='group flex flex-row gap-1.5 items-center'
|
||||
variant='outline'
|
||||
>
|
||||
<Link
|
||||
href={codeSnippet.action.href}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{codeSnippet.action.logoImageUrl ? (
|
||||
<>
|
||||
<img
|
||||
src={codeSnippet.action.logoImageUrl}
|
||||
alt={codeSnippet.action.label}
|
||||
className=''
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src={codeSnippet.action.logoImageUrlDark}
|
||||
alt={codeSnippet.action.label}
|
||||
className='w-4 h-4 hidden group-dark:block'
|
||||
/>
|
||||
<img
|
||||
src={codeSnippet.action.logoImageUrlLight}
|
||||
alt={codeSnippet.action.label}
|
||||
className='w-4 h-4 block group-dark:hidden'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<span>{codeSnippet.action.label}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import type { Deployment, Project } from '@agentic/platform-types'
|
||||
import type { BundledLanguage } from 'shiki/bundle/web'
|
||||
import type { Simplify } from 'type-fest'
|
||||
import { assert } from '@agentic/platform-core'
|
||||
import { assert, pruneUndefined } from '@agentic/platform-core'
|
||||
|
||||
import { gatewayBaseUrl } from './config'
|
||||
|
||||
|
@ -27,13 +27,17 @@ export type HTTPTarget = (typeof httpTargets)[number]
|
|||
|
||||
export const mcpClientTargetLabels = {
|
||||
url: 'MCP Server URL',
|
||||
'claude-desktop': 'Claude Desktop',
|
||||
chatgpt: 'ChatGPT',
|
||||
raycast: 'Raycast',
|
||||
'mcp-json': 'mcp.json',
|
||||
cursor: 'Cursor',
|
||||
'claude-code': 'Claude Code',
|
||||
'claude-desktop': 'Claude Desktop',
|
||||
// chatgpt: 'ChatGPT', // TODO
|
||||
raycast: 'Raycast',
|
||||
trae: 'Trae',
|
||||
windsurf: 'Windsurf',
|
||||
vscode: 'VSCode',
|
||||
cline: 'Cline',
|
||||
goose: 'Goose'
|
||||
warp: 'Warp'
|
||||
} as const
|
||||
export const mcpClientTargets = Object.keys(
|
||||
mcpClientTargetLabels
|
||||
|
@ -88,7 +92,13 @@ export const defaultConfig: DeveloperConfig = {
|
|||
export type CodeSnippet = {
|
||||
code: string
|
||||
lang: BundledLanguage
|
||||
// install?: string // TODO
|
||||
action?: {
|
||||
href: string
|
||||
label: string
|
||||
logoImageUrl?: string
|
||||
logoImageUrlDark?: string
|
||||
logoImageUrlLight?: string
|
||||
}
|
||||
}
|
||||
|
||||
export type GetCodeForDeveloperConfigOpts = {
|
||||
|
@ -157,12 +167,123 @@ export function getCodeForDeveloperConfig(
|
|||
}
|
||||
|
||||
export function getCodeForMCPClientConfig({
|
||||
identifier
|
||||
config,
|
||||
identifier,
|
||||
project,
|
||||
apiKey
|
||||
}: GetCodeForDeveloperConfigInnerOpts): CodeSnippet {
|
||||
const mcpUrl = `${gatewayBaseUrl}/${identifier}/mcp`
|
||||
return {
|
||||
code: mcpUrl,
|
||||
lang: 'bash'
|
||||
const mcpUrl = `${gatewayBaseUrl}/${identifier}/mcp${
|
||||
apiKey ? `?apiKey=${apiKey}` : ''
|
||||
}`
|
||||
|
||||
const mcpConfig = {
|
||||
mcpServers: {
|
||||
[identifier]: {
|
||||
url: mcpUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
const mcpConfigCode = JSON.stringify(mcpConfig, null, 2)
|
||||
|
||||
const mcpRemoteConfig = {
|
||||
mcpServers: {
|
||||
[identifier]: {
|
||||
command: 'npx',
|
||||
args: ['mcp-remote', '-y', mcpUrl]
|
||||
}
|
||||
}
|
||||
}
|
||||
const mcpRemoteConfigCode = JSON.stringify(mcpRemoteConfig, null, 2)
|
||||
|
||||
switch (config.mcpClientTarget) {
|
||||
case 'url':
|
||||
return {
|
||||
code: mcpUrl,
|
||||
lang: 'bash'
|
||||
}
|
||||
|
||||
case 'mcp-json':
|
||||
return {
|
||||
code: mcpConfigCode,
|
||||
lang: 'json'
|
||||
}
|
||||
|
||||
case 'claude-code':
|
||||
return {
|
||||
code: `claude mcp add --transport http "${identifier}" "${mcpUrl}"`,
|
||||
lang: 'bash'
|
||||
}
|
||||
|
||||
case 'cursor': {
|
||||
const config = Buffer.from(JSON.stringify(mcpConfig)).toString('base64')
|
||||
const href = `cursor://anysphere.cursor-deeplink/mcp/install?name=${identifier}&config=${config}`
|
||||
|
||||
return {
|
||||
code: mcpConfigCode,
|
||||
lang: 'json',
|
||||
action: {
|
||||
href,
|
||||
label: `Add the ${identifier} MCP server to Cursor`,
|
||||
logoImageUrlLight: '/assets/mcp-clients/cursor-icon-light.svg',
|
||||
logoImageUrlDark: '/assets/mcp-clients/cursor-icon-dark.webp'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
case 'windsurf':
|
||||
return {
|
||||
code: mcpRemoteConfigCode,
|
||||
lang: 'json'
|
||||
}
|
||||
|
||||
case 'claude-desktop':
|
||||
return {
|
||||
code: mcpRemoteConfigCode,
|
||||
lang: 'json'
|
||||
}
|
||||
|
||||
case 'raycast': {
|
||||
// https://manual.raycast.com/model-context-protocol
|
||||
const customMcpConfig = pruneUndefined({
|
||||
name: identifier,
|
||||
type: 'http',
|
||||
url: mcpUrl,
|
||||
description: project.lastPublishedDeployment?.description
|
||||
})
|
||||
const customMcpConfigCode = JSON.stringify(customMcpConfig)
|
||||
const href = `raycast://mcp/install?${encodeURIComponent(customMcpConfigCode)}`
|
||||
|
||||
return {
|
||||
code: mcpConfigCode,
|
||||
lang: 'json',
|
||||
action: {
|
||||
href,
|
||||
label: `Add the ${identifier} MCP server to Raycast`,
|
||||
logoImageUrlLight: '/assets/mcp-clients/raycast-icon-light.svg',
|
||||
logoImageUrlDark: '/assets/mcp-clients/raycast-icon-dark.svg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
case 'vscode':
|
||||
return {
|
||||
code: `
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"${identifier}": {
|
||||
"type": "http",
|
||||
"url": "${mcpUrl}"
|
||||
}
|
||||
}
|
||||
}`.trim(),
|
||||
lang: 'json'
|
||||
}
|
||||
|
||||
default:
|
||||
return {
|
||||
code: mcpConfigCode,
|
||||
lang: 'json'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|