@iflow-mcp/kamranbiglari-mcp-server-chart 1.0.0

package/src/charts/radar.ts

@@ -0,0 +1,65 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the radar chart
+// {
+//   type: 'radar',
+//   data: {
+//     labels: ['January', 'February', 'March', 'April', 'May'],
+//     datasets: [
+//       { label: 'Dogs', data: [50, 60, 70, 180, 190] },
+//       { label: 'Cats', data: [100, 200, 300, 400, 500] },
+//     ],
+//   },
+// }
+
+const schema = {
+  type: z.literal("radar").default("radar"),
+  data: z.object({
+    labels: z.array(z.string()).describe("Labels for the radar chart axes"),
+    datasets: z.array(
+      z.object({
+        label: z.string().describe("Label for the dataset"),
+        data: z.array(z.number()).describe("Data points for each axis"),
+        backgroundColor: z.string().optional().describe("Fill color of the radar area"),
+        borderColor: z.string().optional().describe("Color of the radar border line"),
+        borderWidth: z.number().optional().describe("Width of the border line"),
+        pointBackgroundColor: z.string().optional().describe("Background color of the data points"),
+        pointBorderColor: z.string().optional().describe("Border color of the data points"),
+        pointRadius: z.number().optional().describe("Radius of the data points"),
+        fill: z.boolean().optional().describe("Whether to fill the area"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "radar",
+  description: `Generates a radar chart with the provided data.
+  example input:
+\`\`\`json
+{
+  "type": "radar",
+  "data": {
+    "labels": ["January", "February", "March", "April", "May"],
+    "datasets": [
+      {
+        "label": "Dogs",
+        "data": [50, 60, 70, 180, 190]
+      },
+      {
+        "label": "Cats",
+        "data": [100, 200, 300, 400, 500]
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const radar = {
+  schema,
+  tool,
+};

package/src/charts/radialGauge.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the radial gauge chart
+// {
+//   type: 'radialGauge',
+//   data: { datasets: [{ data: [70], backgroundColor: 'green' }] },
+// }
+
+const schema = {
+  type: z.literal("radialGauge").default("radialGauge"),
+  data: z.object({
+    datasets: z.array(
+      z.object({
+        data: z.array(z.number()).describe("Single value array representing the gauge value"),
+        backgroundColor: z.string().optional().describe("Background color of the gauge"),
+        borderColor: z.string().optional().describe("Border color of the gauge"),
+        borderWidth: z.number().optional().describe("Width of the gauge border"),
+        label: z.string().optional().describe("Label for the dataset"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "radialGauge",
+  description: `Generates a radial gauge chart with the provided value.
+  example input:
+\`\`\`json
+{
+  "type": "radialGauge",
+  "data": {
+    "datasets": [
+      {
+        "data": [70],
+        "backgroundColor": "green"
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const radialGauge = {
+  schema,
+  tool,
+};

package/src/charts/sankey.ts

@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the sankey chart
+// {
+//   type: 'sankey',
+//   data: {
+//     datasets: [
+//       {
+//         data: [
+//           { from: 'Step A', to: 'Step B', flow: 10 },
+//           { from: 'Step A', to: 'Step C', flow: 5 },
+//           { from: 'Step B', to: 'Step C', flow: 10 },
+//           { from: 'Step D', to: 'Step C', flow: 7 },
+//         ]
+//       },
+//     ],
+//   },
+// }
+
+const sankeyDataPointSchema = z.object({
+  from: z.string().describe("Source node"),
+  to: z.string().describe("Target node"),
+  flow: z.number().describe("Flow value between nodes"),
+});
+
+const schema = {
+  type: z.literal("sankey").default("sankey"),
+  data: z.object({
+    datasets: z.array(
+      z.object({
+        data: z.array(sankeyDataPointSchema).describe("Array of flow connections between nodes"),
+        label: z.string().optional().describe("Label for the dataset"),
+        colorFrom: z.string().optional().describe("Color scheme for source nodes"),
+        colorTo: z.string().optional().describe("Color scheme for target nodes"),
+        colorMode: z.string().optional().describe("Color mode for the flows"),
+        borderWidth: z.number().optional().describe("Width of the flow borders"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "sankey",
+  description: `Generates a sankey diagram with the provided flow data.
+  example input:
+\`\`\`json
+{
+  "type": "sankey",
+  "data": {
+    "datasets": [
+      {
+        "data": [
+          {"from": "Step A", "to": "Step B", "flow": 10},
+          {"from": "Step A", "to": "Step C", "flow": 5},
+          {"from": "Step B", "to": "Step C", "flow": 10},
+          {"from": "Step D", "to": "Step C", "flow": 7}
+        ]
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const sankey = {
+  schema,
+  tool,
+};

package/src/charts/scatter.ts

@@ -0,0 +1,77 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the scatter chart
+// {
+//   type: 'scatter',
+//   data: {
+//     datasets: [
+//       {
+//         label: 'Data 1',
+//         data: [
+//           { x: 2, y: 4 },
+//           { x: 3, y: 3 },
+//           { x: -10, y: 0 },
+//           { x: 0, y: 10 },
+//           { x: 10, y: 5 },
+//         ],
+//       },
+//     ],
+//   },
+// }
+
+const scatterDataPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+});
+
+const schema = {
+  type: z.literal("scatter").default("scatter"),
+  data: z.object({
+    datasets: z.array(
+      z.object({
+        label: z.string().describe("Label for the dataset"),
+        data: z.array(scatterDataPointSchema).describe("Array of {x, y} coordinate points"),
+        backgroundColor: z.string().optional().describe("Background color of the points"),
+        borderColor: z.string().optional().describe("Border color of the points"),
+        borderWidth: z.number().optional().describe("Width of the point borders"),
+        pointRadius: z.number().optional().describe("Radius of the data points"),
+        pointBackgroundColor: z.string().optional().describe("Background color of the data points"),
+        pointBorderColor: z.string().optional().describe("Border color of the data points"),
+        showLine: z.boolean().optional().describe("Whether to show lines connecting the points"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "scatter",
+  description: `Generates a scatter chart with the provided data points.
+  example input:
+\`\`\`json
+{
+  "type": "scatter",
+  "data": {
+    "datasets": [
+      {
+        "label": "Data 1",
+        "data": [
+          {"x": 2, "y": 4},
+          {"x": 3, "y": 3},
+          {"x": -10, "y": 0},
+          {"x": 0, "y": 10},
+          {"x": 10, "y": 5}
+        ]
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const scatter = {
+  schema,
+  tool,
+};

package/src/charts/sparkline.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the sparkline chart
+// {
+//   type: 'sparkline',
+//   data: { datasets: [{ data: [140, 60, 274, 370, 199] }] },
+// }
+
+const schema = {
+  type: z.literal("sparkline").default("sparkline"),
+  data: z.object({
+    datasets: z.array(
+      z.object({
+        data: z.array(z.number()).describe("Data values for the sparkline"),
+        backgroundColor: z.string().optional().describe("Background color of the sparkline"),
+        borderColor: z.string().optional().describe("Border color of the sparkline"),
+        borderWidth: z.number().optional().describe("Width of the sparkline border"),
+        fill: z.boolean().optional().describe("Whether to fill the area under the line"),
+        label: z.string().optional().describe("Label for the dataset"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "sparkline",
+  description: `Generates a sparkline chart with the provided data.
+  example input:
+\`\`\`json
+{
+  "type": "sparkline",
+  "data": {
+    "datasets": [
+      {
+        "data": [140, 60, 274, 370, 199]
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const sparkline = {
+  schema,
+  tool,
+};

package/src/charts/violin.ts

@@ -0,0 +1,73 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+
+// Define the schema for the violin chart
+// {
+//   type: 'violin',
+//   data: {
+//     labels: [2012, 2013, 2014, 2015],
+//     datasets: [
+//       {
+//         label: 'Data',
+//         data: [
+//           [12, 6, 3, 4],
+//           [1, 8, 8, 15],
+//           [1, 1, 1, 2, 3, 5, 9, 8],
+//           [19, -3, 18, 8, 5, 9, 9],
+//         ],
+//         backgroundColor: 'rgba(56,123,45,0.2)',
+//         borderColor: 'rgba(56,123,45,1.9)',
+//       },
+//     ],
+//   },
+// }
+
+const schema = {
+  type: z.literal("violin").default("violin"),
+  data: z.object({
+    labels: z.array(z.union([z.string(), z.number()])).describe("Labels for each violin"),
+    datasets: z.array(
+      z.object({
+        label: z.string().describe("Label for the dataset"),
+        data: z.array(z.array(z.number())).describe("Array of data arrays for each violin"),
+        backgroundColor: z.string().optional().describe("Background color of the violins"),
+        borderColor: z.string().optional().describe("Border color of the violins"),
+        borderWidth: z.number().optional().describe("Width of the violin borders"),
+      })
+    ),
+  }),
+};
+
+const tool = {
+  name: "violin",
+  description: `Generates a violin chart with the provided distribution data.
+  example input:
+\`\`\`json
+{
+  "type": "violin",
+  "data": {
+    "labels": [2012, 2013, 2014, 2015],
+    "datasets": [
+      {
+        "label": "Data",
+        "data": [
+          [12, 6, 3, 4],
+          [1, 8, 8, 15],
+          [1, 1, 1, 2, 3, 5, 9, 8],
+          [19, -3, 18, 8, 5, 9, 9]
+        ],
+        "backgroundColor": "rgba(56,123,45,0.2)",
+        "borderColor": "rgba(56,123,45,1.9)"
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const violin = {
+  schema,
+  tool,
+};

package/src/index.ts

@@ -0,0 +1,279 @@
+import { McpAgent } from "agents/mcp";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+import * as Charts from './charts';
+
+// Define our MCP agent with tools
+export class MyMCP extends McpAgent {
+    server = new McpServer({
+        name: "mcp-server-chart",
+        version: "1.0.0",
+        description: "MCP Server for generating charts using QuickChart",
+        baseUrl: "https://chart.mcp.cloudcertainty.com",
+        author: "Kamran Biglari",
+        authorUrl: "https://github.com/KamranBiglari"
+    });
+
+    async init() {
+
+        // Register all chart tools
+        for (const chart of Object.values(Charts)) {
+                // @ts-ignore
+            this.server.tool(chart.tool.name, chart.tool.description, chart.schema, async (input) => {
+
+                console.log(`Received input for ${chart.tool.name}:`, input);
+                return fetch(`http://quickchart.io/chart?v=3&c=${encodeURIComponent(JSON.stringify(input))}`)
+                    .then(response => response.arrayBuffer())
+                    .then(data => {
+                        const base64Image = Buffer.from(data).toString('base64');
+                        return {
+                            content: [              
+                                {
+                                    type: "image",
+                                    data: base64Image,
+                                    mimeType: "image/png",
+                                },
+                            ],
+                        };
+                    })
+                    .catch(error => {
+                        console.error(`Error generating ${chart.tool.name} chart:`, error);
+                        return {
+                            content: [
+                                {
+                                    type: "text",
+                                    text: `Error generating ${chart.tool.name} chart: ${error.message}`,
+                                },
+                            ],
+                        };
+                    });
+
+            });
+        }
+        
+    }
+}
+
+// Helper function to get the base URL from the request
+function getBaseUrl(request: Request): string {
+    const url = new URL(request.url);
+    return `${url.protocol}//${url.host}`;
+}
+
+// OAuth Authorization Server Discovery Response
+function createOAuthAuthorizationServerResponse(baseUrl: string) {
+    return {
+        "issuer": baseUrl,
+        "authorization_endpoint": `${baseUrl}/oauth/authorize`,
+        "token_endpoint": `${baseUrl}/oauth/token`,
+        "token_endpoint_auth_methods_supported": ["none", "client_secret_basic", "client_secret_post"],
+        "response_types_supported": ["code", "token"],
+        "grant_types_supported": ["authorization_code", "client_credentials", "implicit"],
+        "code_challenge_methods_supported": ["plain", "S256"],
+        "scopes_supported": ["read", "write", "openid"],
+        "subject_types_supported": ["public"],
+        "id_token_signing_alg_values_supported": ["RS256"],
+        // Dynamic Client Registration support
+        "registration_endpoint": `${baseUrl}/oauth/register`,
+        "registration_endpoint_auth_methods_supported": ["none"],
+        // Indicate this is an authless server
+        "authless": true,
+        "require_authentication": false
+    };
+}
+
+// OAuth Protected Resource Discovery Response
+function createOAuthProtectedResourceResponse(baseUrl: string) {
+    return {
+        "resource": baseUrl,
+        "authorization_servers": [baseUrl],
+        "scopes_supported": ["read", "write"],
+        "bearer_methods_supported": ["header", "query"],
+        // Indicate no authentication required
+        "authless": true,
+        "require_authentication": false,
+        "token_validation": "none"
+    };
+}
+
+// Mock OAuth Token Response
+function createMockTokenResponse() {
+    return {
+        "access_token": "authless-token",
+        "token_type": "Bearer",
+        "expires_in": 3600,
+        "scope": "read write"
+    };
+}
+
+// Mock Client Registration Response
+function createClientRegistrationResponse() {
+    return {
+        "client_id": "authless-client",
+        "client_secret": "authless-secret",
+        "client_id_issued_at": Math.floor(Date.now() / 1000),
+        "client_secret_expires_at": 0, // Never expires
+        "redirect_uris": [],
+        "token_endpoint_auth_method": "none",
+        "grant_types": ["authorization_code", "client_credentials"],
+        "response_types": ["code"],
+        "scope": "read write"
+    };
+}
+
+export default {
+    fetch(request: Request, env: Env, ctx: ExecutionContext) {
+        const url = new URL(request.url);
+        const baseUrl = getBaseUrl(request);
+
+        // OAuth Authorization Server Discovery Endpoint
+        if (url.pathname === "/.well-known/oauth-authorization-server") {
+            return new Response(
+                JSON.stringify(createOAuthAuthorizationServerResponse(baseUrl), null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                    },
+                }
+            );
+        }
+
+        // OAuth Protected Resource Discovery Endpoint
+        if (url.pathname === "/.well-known/oauth-protected-resource") {
+            return new Response(
+                JSON.stringify(createOAuthProtectedResourceResponse(baseUrl), null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                    },
+                }
+            );
+        }
+
+        // Mock OAuth Authorization Endpoint
+        if (url.pathname === "/oauth/authorize") {
+
+            // redirect to the redirect_uri if provided
+            const redirectUri = url.searchParams.get("redirect_uri");
+            if (redirectUri) {
+                return Response.redirect(redirectUri);
+            }
+            return new Response(
+                JSON.stringify(createMockTokenResponse(), null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                    },
+                }
+            );
+        }
+
+        // Mock OAuth Token Endpoint
+        if (url.pathname === "/oauth/token") {
+            return new Response(
+                JSON.stringify(createMockTokenResponse(), null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                    },
+                }
+            );
+        }
+
+        // Mock OAuth Client Registration Endpoint
+        if (url.pathname === "/oauth/register") {
+            // Handle both GET and POST for client registration
+            if (request.method === "POST" || request.method === "GET") {
+                return new Response(
+                    JSON.stringify(createClientRegistrationResponse(), null, 2),
+                    {
+                        headers: {
+                            "Content-Type": "application/json",
+                            "Access-Control-Allow-Origin": "*",
+                            "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                            "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                        },
+                    }
+                );
+            }
+        }
+
+        // Health check endpoint
+        if (url.pathname === "/health") {
+            return new Response(
+                JSON.stringify({
+                    status: "ok",
+                    authless: true,
+                    timestamp: new Date().toISOString(),
+                    server: "mcp-server-chart"
+                }, null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                    },
+                }
+            );
+        }
+
+        // Root endpoint with server info
+        if (url.pathname === "/") {
+            return new Response(
+                JSON.stringify({
+                    name: "mcp-server-chart",
+                    version: "1.0.0",
+                    authless: true,
+                    endpoints: {
+                        mcp: "/mcp",
+                        sse: "/sse",
+                        health: "/health",
+                        oauth_authorization_server: "/.well-known/oauth-authorization-server",
+                        oauth_protected_resource: "/.well-known/oauth-protected-resource",
+                        oauth_authorize: "/oauth/authorize",
+                        oauth_token: "/oauth/token"
+                    }
+                }, null, 2),
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                    },
+                }
+            );
+        }
+
+        // Handle CORS preflight requests
+        if (request.method === "OPTIONS") {
+            return new Response(null, {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+                    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+                },
+            });
+        }
+
+        // Existing MCP endpoints
+        if (url.pathname === "/sse" || url.pathname === "/sse/message") {
+            return MyMCP.serveSSE("/sse").fetch(request, env, ctx);
+        }
+
+        if (url.pathname === "/mcp") {
+            return MyMCP.serve("/mcp").fetch(request, env, ctx);
+        }
+
+        return new Response("Not found", { status: 404 });
+    },
+};