feat: add mcp add command for mcp servers

pyadav · pyadav · commit dfe0256fac7f · 2025-08-29T10:45:29.000+05:30
diff --git a/src/commands/mcp.ts b/src/commands/mcp.ts
@@ -3,11 +3,86 @@ import { Command } from "commander";
 import { render } from "ink";
 import { MCPList } from "../components/mcp/mcp-list.js";
 import { MCPTest } from "../components/mcp/mcp-test.js";
+import { getConfigManager, getDefaultConfigPath } from "../config/manager.js";
+import type { MCPServerConfig, TransportType } from "../mcp/types.js";
+import { TRANSPORT_TYPES } from "../mcp/constants.js";
+import { parseKeyValue } from "../mcp/utils.js";
+import { loadMCPConfig } from "../mcp/config.js";
+import chalk from "chalk";
 
 export function createMCPCommand(): Command {
   const mcp = new Command("mcp");
   mcp.description("Manage MCP (Model Context Protocol) servers");
 
+  mcp
+    .command("add")
+    .description("Add a new MCP server")
+    .argument("<name>", "Server name")
+    .option(
+      "-t, --transport <type>",
+      "Transport type: stdio | sse | streamable-http",
+      "stdio",
+    )
+    .option(
+      "-C, --command <command>",
+      "Command to run the server (for stdio transport)",
+    )
+    .option(
+      "-a, --args [args...]",
+      "Arguments for the server command (for stdio transport)",
+      [],
+    )
+    .option("-u, --url <url>", "URL for SSE/HTTP transport")
+    .option("-e, --env [envs...]", "Environment variables (KEY=VALUE)")
+    .option("-H, --header [headers...]", "HTTP headers (KEY=VALUE)")
+    .option("--timeout <ms>", "Operation timeout in ms", (v) => parseInt(v, 10))
+    .option("--enabled", "Add server as enabled", true)
+    .action(async function (this: Command, name: string, opts: any) {
+      const { servers } = loadMCPConfig();
+      const configManager = getConfigManager();
+
+      let config: MCPServerConfig;
+      switch (opts.transport as TransportType) {
+        case TRANSPORT_TYPES.STDIO:
+          config = {
+            type: "stdio",
+            command: opts.command,
+            args: opts.args,
+            env: parseKeyValue(opts.env),
+            timeout: opts.timeout,
+            enabled: opts.enabled,
+          };
+          break;
+        case TRANSPORT_TYPES.SSE:
+          config = {
+            type: "sse",
+            url: opts.url,
+            headers: parseKeyValue(opts.header),
+            timeout: opts.timeout,
+            enabled: opts.enabled,
+          };
+          break;
+        case TRANSPORT_TYPES.STREAMABLE_HTTP:
+          config = {
+            type: "streamable-http",
+            url: opts.url,
+            headers: parseKeyValue(opts.header),
+            timeout: opts.timeout,
+            enabled: opts.enabled,
+          };
+          break;
+        default:
+          throw new Error(`Unknown transport type: ${opts.transport}`);
+      }
+
+      const existing = (servers as Record<string, any>) || {};
+      const updated = { ...existing, [name]: config };
+      configManager.saveProjectSettings({ mcpServers: updated });
+
+      const path = getDefaultConfigPath();
+      console.log(chalk.green(`✓ Added MCP server: ${name} to ${path}`));
+    });
+
   mcp
     .command("list")
     .description("List configured MCP servers (checks health)")
diff --git a/src/components/ink-table.tsx b/src/components/ink-table.tsx
@@ -1,5 +1,5 @@
 // via https://github.com/maticzav/ink-table
-// inlined here because of https://github.com/maticzav/ink-table/issues/258
+// patched: max column width 20 + auto-wrap long values
 
 import React from "react";
 import { Box, Text } from "ink";
@@ -40,6 +40,7 @@ export type TableProps<T extends ScalarDict> = {
    * Component used to render the skeleton of the table.
    */
   skeleton: (props: React.PropsWithChildren<unknown>) => React.JSX.Element;
+  maxCellWidth: number;
 };
 
 /* Table */
@@ -60,6 +61,7 @@ export default class Table<T extends ScalarDict> extends React.Component<
       header: this.props.header || Header,
       cell: this.props.cell || Cell,
       skeleton: this.props.skeleton || Skeleton,
+      maxCellWidth: this.props.maxCellWidth || 40,
     };
   }
 
@@ -86,19 +88,21 @@ export default class Table<T extends ScalarDict> extends React.Component<
    * Returns a list of column names and their widths.
    */
   getColumns(): Column<T>[] {
-    const { columns, padding } = this.getConfig();
+    const { columns, padding, maxCellWidth } = this.getConfig();
 
     const widths: Column<T>[] = columns.map((key) => {
       const header = String(key).length;
       /* Get the width of each cell in the column */
       const data = this.props.data.map((data) => {
         const value = data[key];
-
         if (value == undefined || value == null) return 0;
         return String(value).length;
       });
 
-      const width = Math.max(...data, header) + padding * 2;
+      let width = Math.max(...data, header) + padding * 2;
+
+      // enforce max width
+      width = Math.min(width, maxCellWidth);
 
       /* Construct a cell */
       return {
@@ -272,65 +276,81 @@ type Column<T> = {
   width: number;
 };
 
+/**
+ * Word-wrap utility: splits text into chunks of max length
+ */
+function wrapText(str: string, max: number): string[] {
+  const result: string[] = [];
+  let i = 0;
+  while (i < str.length) {
+    result.push(str.slice(i, i + max));
+    i += max;
+  }
+  return result.length ? result : [""];
+}
+
 /**
  * Constructs a Row element from the configuration.
  */
 function row<T extends ScalarDict>(
   config: RowConfig,
 ): (props: RowProps<T>) => React.JSX.Element {
   /* This is a component builder. We return a function. */
-
   const skeleton = config.skeleton;
 
   /* Row */
-  return (props) => (
-    <Box flexDirection="row">
-      {/* Left */}
-      <skeleton.component>{skeleton.left}</skeleton.component>
-      {/* Data */}
-      {...intersperse(
-        (i) => {
-          const key = `${props.key}-hseparator-${i}`;
-
-          // The horizontal separator.
-          return (
-            <skeleton.component key={key}>{skeleton.cross}</skeleton.component>
-          );
-        },
-
-        // Values.
-        props.columns.map((column, colI) => {
-          // content
-          const value = props.data[column.column];
-
-          if (value == undefined || value == null) {
-            const key = `${props.key}-empty-${column.key}`;
-
-            return (
-              <config.cell key={key} column={colI}>
-                {skeleton.line.repeat(column.width)}
-              </config.cell>
-            );
-          } else {
-            const key = `${props.key}-cell-${column.key}`;
-
-            // margins
-            const ml = config.padding;
-            const mr = column.width - String(value).length - config.padding;
-
-            return (
-              /* prettier-ignore */
-              <config.cell key={key} column={colI}>
-                {`${skeleton.line.repeat(ml)}${String(value)}${skeleton.line.repeat(mr)}`}
-              </config.cell>
-            );
-          }
-        }),
-      )}
-      {/* Right */}
-      <skeleton.component>{skeleton.right}</skeleton.component>
-    </Box>
-  );
+  return (props) => {
+    // compute wrapped values for each column
+    const wrappedColumns = props.columns.map((column) => {
+      const rawValue = props.data[column.column];
+      const contentMax = column.width - config.padding * 2;
+      const displayValue = rawValue == null ? "" : String(rawValue);
+      return wrapText(displayValue, Math.max(contentMax, 1));
+    });
+
+    // figure out max number of lines for this row
+    const maxLines = Math.max(...wrappedColumns.map((c) => c.length), 1);
+
+    return (
+      <Box flexDirection="column">
+        {Array.from({ length: maxLines }).map((_, lineIndex) => (
+          <Box key={`${props.key}-line-${lineIndex}`} flexDirection="row">
+            {/* Left */}
+            <skeleton.component>{skeleton.left}</skeleton.component>
+            {/* Data */}
+            {intersperse(
+              (i) => (
+                <skeleton.component
+                  key={`${props.key}-hseparator-${i}-line-${lineIndex}`}
+                >
+                  {skeleton.cross}
+                </skeleton.component>
+              ),
+              props.columns.map((column, colI) => {
+                const lines = wrappedColumns[colI] || [];
+                const content = lines[lineIndex] ?? ""; // empty if no line
+                const ml = config.padding;
+                const mr = column.width - content.length - config.padding;
+
+                return (
+                  <config.cell
+                    key={`${props.key}-cell-${column.key}-${lineIndex}`}
+                    column={colI}
+                  >
+                    {`${skeleton.line.repeat(ml)}${content}${skeleton.line.repeat(
+                      Math.max(mr, 0),
+                    )}`}
+                  </config.cell>
+                );
+              }),
+            )}
+            {/* Right */}
+            <skeleton.component>{skeleton.right}</skeleton.component>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
 }
 
 /**
@@ -352,7 +372,7 @@ export function Cell(props: CellProps) {
 }
 
 /**
- * Redners the scaffold of the table.
+ * Renders the scaffold of the table.
  */
 export function Skeleton(props: React.PropsWithChildren<unknown>) {
   return <Text bold>{props.children}</Text>;
diff --git a/src/components/mcp/mcp-list.tsx b/src/components/mcp/mcp-list.tsx
@@ -24,7 +24,7 @@ export function MCPList({ verbose = false }: { verbose?: boolean }) {
 
   return (
     <Box flexDirection="column">
-      <Table data={rows} />
+      <Table data={rows} maxCellWidth={45} />
       <MCPSummary summary={summary} verbose={verbose} />
     </Box>
   );
diff --git a/src/mcp/utils.ts b/src/mcp/utils.ts
@@ -53,3 +53,24 @@ export function mergeEnvironment(
     ...configEnvironment,
   };
 }
+
+export function parseKeyValue(entries?: string[]): Record<string, string> {
+  if (!entries || entries.length === 0) return {};
+
+  return entries.reduce<Record<string, string>>((acc, entry) => {
+    const idx = entry.indexOf("=");
+    if (idx === -1) {
+      throw new Error(`Invalid option '${entry}', must be in KEY=VALUE format`);
+    }
+
+    const key = entry.slice(0, idx).trim();
+    const value = entry.slice(idx + 1).trim();
+
+    if (!key) {
+      throw new Error(`Invalid option '${entry}', missing KEY before '='`);
+    }
+
+    acc[key] = value;
+    return acc;
+  }, {});
+}
