import { McpServer } from "skybridge/server";
import { z } from "zod";
const server = new McpServer(
{ name: "spreadsheet-mcp-app", version: "1.0.0" },
{ capabilities: {} },
).registerWidget(
"spreadsheet",
{
title: "Spreadsheet",
description: "Interactive spreadsheet with streaming",
},
{
description: `Display data as an interactive spreadsheet. Use this whenever the user asks for tables, comparisons, budgets, reports, or any structured data that benefits from a grid layout. Streams in real-time as you type.
FORMAT: CSV with columns cell,value,style (one row per cell, sparse addressing).
- cell: Excel address (A1, B2, C10)
- value: Text or number
- style: Optional inline CSS
EXAMPLE:
A1,Revenue,font-weight: bold
B1,Q1,font-weight: bold
A2,Sales,
B2,$50000,
STYLE RULES:
- Use font-weight: bold for headers. That's usually enough.
- Do NOT use background colors or colored text unless the user specifically asks.
- Keep it clean and professional like a real spreadsheet.
- Quote values with commas: A1,"$1,000",
- Compute values yourself — do NOT use formulas like =SUM or =IF.`,
inputSchema: {
cells: z.string().describe("CSV: cell,value,style - one row per cell"),
},
},
async () => {
return {
structuredContent: { ok: true },
content: [{ type: "text" as const, text: "Spreadsheet displayed." }],
isError: false,
};
},
);
export default server;
export type AppType = typeof server;
