Skip to main content
Glama
PromptsTable.tsx2.78 kB
import { Add, TrashCan } from "@carbon/icons-react"; import { Button, Column, Grid, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@carbon/react"; import { FunctionComponent } from "react"; import { PromptReference } from "../../models"; import { getNamespacePathById } from "../../hooks/api/use-namespaces"; interface PromptsListProps { fetchedData: PromptReference[]; onDelete: (promptName?: string) => void; onAdd: () => void; } const formatMessages = (messages?: any[]) => { if (!messages || messages.length === 0) return "No messages"; return `${messages.length} message(s)`; }; const formatArguments = (args?: any[]) => { if (!args || args.length === 0) return "No arguments"; return args.map(arg => `${arg.name}${arg.required ? '*' : ''}`).join(", "); }; export const PromptsTable: FunctionComponent<PromptsListProps> = ({ fetchedData, onDelete, onAdd, }) => { const headers = [ "Name", "Description", "Messages", "Arguments", "Tool References", "Namespace", "Actions", ]; return ( <Grid> <Column lg={12} md={8} sm={4}> <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", }} > <Button renderIcon={Add} onClick={onAdd}> Add Prompt </Button> </div> <Table aria-label="Prompts table"> <TableHead> <TableRow> {headers.map((header) => ( <TableHeader id={header} key={header}> {header} </TableHeader> ))} </TableRow> </TableHead> <TableBody> {fetchedData.map((row: PromptReference) => ( <TableRow key={row.name}> <TableCell>{row.name}</TableCell> <TableCell>{row.description}</TableCell> <TableCell>{formatMessages(row.messages)}</TableCell> <TableCell style={{ fontSize: "14px" }}> {formatArguments(row.arguments)} </TableCell> <TableCell> {row.toolReferences?.join(", ") || "None"} </TableCell> <TableCell>{getNamespacePathById(row.namespace) || "default"}</TableCell> <TableCell> <Button kind="ghost" renderIcon={TrashCan} iconDescription="Delete" hasIconOnly onClick={() => onDelete(row.name)} /> </TableCell> </TableRow> ))} </TableBody> </Table> </Column> </Grid> ); };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/wanaku-ai/wanaku'

If you have feedback or need assistance with the MCP directory API, please join our Discord server