Add Pieces for Developers MCP server to the extensions library (#2074)

Co-authored-by: Jim Bennett <jim@pieces.app>
This commit is contained in:
Jim Bennett
2025-04-26 07:49:01 -07:00
committed by GitHub
parent b4f5d606ca
commit f708e4d613
11 changed files with 495 additions and 117 deletions

View File

@@ -50,65 +50,104 @@ export function ServerCard({ server }: { server: MCPServer }) {
</div>
<div className="py-4">
{server.is_builtin ? (
{server.is_builtin && (
<div className="flex items-center gap-2">
<Info
style={{ width: "12px", height: "12px" }}
className="text-textSubtle shrink-0"
/>
<span
style={{ fontSize: "12px" }}
className="text-textSubtle leading-normal"
>
Can be enabled in the goose settings page
</span>
<Info
style={{ width: "12px", height: "12px" }}
className="text-textSubtle shrink-0"
/>
<span
style={{ fontSize: "12px" }}
className="text-textSubtle leading-normal"
>
Can be enabled in the goose settings page
</span>
</div>
) : (
)}
{(!server.is_builtin && server.command !== undefined && server.url === undefined) && (
<>
<button
onClick={() => setIsCommandVisible(!isCommandVisible)}
className="command-toggle"
<button
onClick={() => setIsCommandVisible(!isCommandVisible)}
className="command-toggle"
>
<Terminal className="h-4 w-4" />
<h4 className="mx-2">Command</h4>
<ChevronRight
className={`ml-auto transition-transform ${
isCommandVisible ? "rotate-90" : ""
}`}
/>
</button>
<AnimatePresence>
{isCommandVisible && (
<motion.div
className="command-content"
initial={{ opacity: 0, translateY: -20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{
opacity: 0,
translateY: -20,
transition: { duration: 0.1 },
}}
>
<Terminal className="h-4 w-4" />
<h4 className="mx-2">Command</h4>
<ChevronRight
className={`ml-auto transition-transform ${
isCommandVisible ? "rotate-90" : ""
}`}
/>
</button>
<AnimatePresence>
{isCommandVisible && (
<motion.div
className="command-content"
initial={{ opacity: 0, translateY: -20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{
opacity: 0,
translateY: -20,
transition: { duration: 0.1 },
}}
>
<code>
{`goose session --with-extension "${server.command}"`}
</code>
</motion.div>
)}
</AnimatePresence>
<code>
{`goose session --with-extension "${server.command}"`}
</code>
</motion.div>
)}
</AnimatePresence>
</>
)}
{(!server.is_builtin && server.command === undefined && server.url !== undefined) && (
<>
<button
onClick={() => setIsCommandVisible(!isCommandVisible)}
className="command-toggle"
>
<Terminal className="h-4 w-4" />
<h4 className="mx-2">Command</h4>
<ChevronRight
className={`ml-auto transition-transform ${
isCommandVisible ? "rotate-90" : ""
}`}
/>
</button>
<AnimatePresence>
{isCommandVisible && (
<motion.div
className="command-content"
initial={{ opacity: 0, translateY: -20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{
opacity: 0,
translateY: -20,
transition: { duration: 0.1 },
}}
>
<code>
{`goose session --with-remote-extension "${server.url}"`}
</code>
</motion.div>
)}
</AnimatePresence>
</>
)}
</div>
</div>
<div className="card-footer">
<Link
to={server.link}
className="card-stats"
onClick={(e) => e.stopPropagation()}
>
<Star className="h-4 w-4" />
<span>{server.githubStars} on Github</span>
</Link>
{server.githubStars !== undefined && (
<Link
to={server.link}
className="card-stats"
onClick={(e) => e.stopPropagation()}
>
<Star className="h-4 w-4" />
<span>{server.githubStars} on Github</span>
</Link>
)}
<div className="card-action">
{server.is_builtin ? (
<div