@dainprotocol/cli 1.1.21 → 1.1.27

package/dist/commands/dev.js

@@ -59,18 +59,35 @@ var path_1 = __importDefault(require("path"));
 var miniflare_1 = require("miniflare");
 var build_1 = __importDefault(require("./build"));
 var fs_extra_1 = __importDefault(require("fs-extra"));
+var net_1 = require("net");
 var childProcess = null;
 var watcher = null;
 var mf = null;
-function startProcess(command, env) {
+var tunnelUrl = null;
+function isPortAvailable(port) {
+    return new Promise(function (resolve) {
+        var server = (0, net_1.createServer)()
+            .listen(port, function () {
+            server.close();
+            resolve(true);
+        })
+            .on('error', function () {
+            resolve(false);
+        });
+    });
+}
+function startProcess(command, options) {
     var _a, _b;
     if (childProcess) {
         childProcess.kill();
     }
     var spinner = (0, ora_1.default)('Starting development server...').start();
-    childProcess = (0, child_process_1.exec)(command, { env: __assign(__assign({}, process.env), env) });
+    childProcess = (0, child_process_1.exec)(command, options);
     (_a = childProcess.stdout) === null || _a === void 0 ? void 0 : _a.on('data', function (data) {
         spinner.succeed('Development server started.');
+        if (tunnelUrl) {
+            (0, utils_1.displayTunnelUrl)(tunnelUrl);
+        }
         console.log(data);
     });
     (_b = childProcess.stderr) === null || _b === void 0 ? void 0 : _b.on('data', function (data) {
@@ -101,11 +118,33 @@ function cleanup() {
 }
 function dev(options) {
     return __awaiter(this, void 0, void 0, function () {
-        var config, runtime, tsNodePath, command, envVars, proxyServer, watchPaths, dainDir, outFile, MFconfig_1, debounceTimer_1, watchDirs, error_1;
+        var config, portSource, port, portNumber, runtime, tsNodePath, command, envVars, proxyServer, portNumber_1, proxySetup, watchPaths, dainDir, outFile, MFconfig_1, debounceTimer_1, watchDirs, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     config = (0, utils_1.getDainConfig)(options.config);
+                    if (process.env.PORT) {
+                        port = process.env.PORT;
+                        portSource = '.env file';
+                    }
+                    else if (options.port) {
+                        port = options.port;
+                        portSource = 'command line argument';
+                    }
+                    else {
+                        port = '2022';
+                        portSource = 'default value';
+                    }
+                    portNumber = parseInt(port);
+                    if (isNaN(portNumber) || portNumber < 0 || portNumber > 65535) {
+                        (0, utils_1.logError)('Invalid port number. Using default port 2022');
+                        options.port = '2022';
+                        portSource = 'default value (after invalid port)';
+                    }
+                    else {
+                        options.port = port;
+                    }
+                    (0, utils_1.logInfo)("Using port ".concat(options.port, " (from ").concat(portSource, ")"));
                     console.log('Config: ' + JSON.stringify(config));
                     runtime = options.runtime || config.runtime || 'node';
                     console.log('Runtime: ' + runtime);
@@ -121,19 +160,29 @@ function dev(options) {
                     proxyServer = null;
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 8, , 9]);
-                    if (!!options.noproxy) return [3 /*break*/, 3];
+                    _a.trys.push([1, 9, , 10]);
+                    portNumber_1 = parseInt(options.port);
+                    return [4 /*yield*/, isPortAvailable(portNumber_1)];
+                case 2:
+                    if (!(_a.sent())) {
+                        (0, utils_1.logError)("Port ".concat(portNumber_1, " is already in use. Please use a different port with --port option."));
+                        process.exit(1);
+                    }
+                    process.env.PORT = portNumber_1.toString();
+                    if (!!options.noproxy) return [3 /*break*/, 4];
                     if (!config['api-key']) {
                         throw new Error("'api-key' is required when using development proxy");
                     }
                     return [4 /*yield*/, (0, utils_1.setupProxy)(options.port, config['api-key'], config)];
-                case 2:
-                    proxyServer = _a.sent();
-                    _a.label = 3;
                 case 3:
-                    if (!(runtime === 'node')) return [3 /*break*/, 4];
+                    proxySetup = _a.sent();
+                    proxyServer = proxySetup.client;
+                    tunnelUrl = proxySetup.tunnelUrl;
+                    _a.label = 4;
+                case 4:
+                    if (!(runtime === 'node')) return [3 /*break*/, 5];
                     // Existing Node.js development process
-                    startProcess(command, envVars);
+                    startProcess(command, { env: __assign(__assign({}, process.env), envVars) });
                     watchPaths = [
                         path_1.default.dirname(config['main-file']),
                         config['static-dir']
@@ -146,7 +195,7 @@ function dev(options) {
                     });
                     watcher.on('change', function (path) {
                         (0, utils_1.logInfo)("File ".concat(path, " has been changed. Restarting..."));
-                        startProcess(command, envVars);
+                        startProcess(command, { env: __assign(__assign({}, process.env), envVars) });
                     });
                     (0, utils_1.logInfo)('Watching for file changes...');
                     // Add signal handlers for graceful shutdown
@@ -201,14 +250,14 @@ function dev(options) {
                             process.exit(1);
                         }, 500);
                     });
-                    return [3 /*break*/, 7];
-                case 4:
-                    if (!(runtime === 'workers')) return [3 /*break*/, 6];
+                    return [3 /*break*/, 8];
+                case 5:
+                    if (!(runtime === 'workers')) return [3 /*break*/, 7];
                     dainDir = path_1.default.join(process.cwd(), '.dain');
                     outFile = path_1.default.join(dainDir, path_1.default.basename(config['main-file'], '.ts') + '.mjs');
                     // Start the build process in watch mode
                     return [4 /*yield*/, (0, build_1.default)({ config: options.config, runtime: 'workers', watch: true })];
-                case 5:
+                case 6:
                     // Start the build process in watch mode
                     _a.sent();
                     MFconfig_1 = {
@@ -234,10 +283,10 @@ function dev(options) {
                         });
                     });
                     (0, utils_1.logInfo)('Watching for file changes in source and build directories...');
-                    return [3 /*break*/, 7];
-                case 6: throw new Error("Unsupported runtime: ".concat(runtime));
-                case 7: return [3 /*break*/, 9];
-                case 8:
+                    return [3 /*break*/, 8];
+                case 7: throw new Error("Unsupported runtime: ".concat(runtime));
+                case 8: return [3 /*break*/, 10];
+                case 9:
                     error_1 = _a.sent();
                     (0, utils_1.logError)("Error in dev process for ".concat(runtime, " runtime:"), error_1);
                     cleanup();
@@ -246,8 +295,8 @@ function dev(options) {
                     setTimeout(function () {
                         process.exit(1);
                     }, 500);
-                    return [3 /*break*/, 9];
-                case 9: return [2 /*return*/];
+                    return [3 /*break*/, 10];
+                case 10: return [2 /*return*/];
             }
         });
     });

package/dist/index.js

@@ -33,7 +33,7 @@ program
 program
     .command('dev')
     .description('Run the project in development mode')
-    .option('--port <port>', 'Set the port number', '2022')
+    .option('--port <port>', 'Set the port number')
     .option('--noproxy', 'Disable localtunnel proxy')
     .option('-c, --config <path>', 'Path to custom configuration file')
     .option('--runtime <runtime>', 'Specify the runtime (node or workers)')

package/dist/templates/default/package.json

@@ -10,8 +10,8 @@
     "deploy": "dain deploy"
   },
   "dependencies": {
-    "@dainprotocol/service-sdk": "^1.0.93",
-    "@dainprotocol/utils": "^0.0.48",
+    "@dainprotocol/service-sdk": "^1.0.95",
+    "@dainprotocol/utils": "^0.0.49",
     "zod": "^3.23.8",
     "hono": "^4.6.3",
     "ts-node": "^10.4.0",
@@ -19,6 +19,6 @@
     "@types/express": "^4.17.13",
     "@types/node": "^22.5.4",
     "axios": "^1.7.5",
-    "@dainprotocol/cli": "^1.0.31"
+    "@dainprotocol/cli": "^1.1.26"
   }
 }

package/dist/templates/default/src/index.ts

@@ -3,20 +3,22 @@
 import { z } from "zod";
 import axios from "axios";
 
-import {
-  defineDAINService,
-  ToolConfig,
-} from "@dainprotocol/service-sdk";
+import { defineDAINService, ToolConfig } from "@dainprotocol/service-sdk";
 
-import { CardUIBuilder, TableUIBuilder, MapUIBuilder } from "@dainprotocol/utils";
+import {
+  CardUIBuilder,
+  TableUIBuilder,
+  MapUIBuilder,
+  LayoutUIBuilder,
+} from "@dainprotocol/utils";
 
 const getWeatherEmoji = (temperature: number): string => {
-  if (temperature <= 0) return '🥶';
-  if (temperature <= 10) return '❄️';
-  if (temperature <= 20) return '⛅';
-  if (temperature <= 25) return '☀️';
-  if (temperature <= 30) return '🌞';
-  return '🔥';
+  if (temperature <= 0) return "🥶";
+  if (temperature <= 10) return "❄️";
+  if (temperature <= 20) return "⛅";
+  if (temperature <= 25) return "☀️";
+  if (temperature <= 30) return "🌞";
+  return "🔥";
 };
 
 const getWeatherConfig: ToolConfig = {
@@ -37,12 +39,15 @@ const getWeatherConfig: ToolConfig = {
     })
     .describe("Current weather information"),
   pricing: { pricePerUse: 0, currency: "USD" },
-  handler: async ({ locationName, latitude, longitude }, agentInfo, context) => {
+  handler: async (
+    { locationName, latitude, longitude },
+    agentInfo,
+    context
+  ) => {
     console.log(
       `User / Agent ${agentInfo.id} requested weather at ${locationName} (${latitude},${longitude})`
     );
 
-
     const response = await axios.get(
       `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,wind_speed_10m`
     );
@@ -59,20 +64,24 @@ const getWeatherConfig: ToolConfig = {
       ui: new CardUIBuilder()
         .setRenderMode("page")
         .title(`Current Weather in ${locationName} ${weatherEmoji}`)
-        .addChild(new MapUIBuilder()
-          .setInitialView(latitude, longitude, 10)
-          .setMapStyle('mapbox://styles/mapbox/streets-v12')
-          .addMarkers([
-            {
-              latitude,
-              longitude,
-              title: locationName,
-              description: `Temperature: ${temperature_2m}°C\nWind: ${wind_speed_10m} km/h`,
-              text: `${locationName} ${weatherEmoji}`,
-            }
-          ])
-          .build())
-        .content(`Temperature: ${temperature_2m}°C\nWind Speed: ${wind_speed_10m} km/h`)
+        .addChild(
+          new MapUIBuilder()
+            .setInitialView(latitude, longitude, 10)
+            .setMapStyle("mapbox://styles/mapbox/streets-v12")
+            .addMarkers([
+              {
+                latitude,
+                longitude,
+                title: locationName,
+                description: `Temperature: ${temperature_2m}°C\nWind: ${wind_speed_10m} km/h`,
+                text: `${locationName} ${weatherEmoji}`,
+              },
+            ])
+            .build()
+        )
+        .content(
+          `Temperature: ${temperature_2m}°C\nWind Speed: ${wind_speed_10m} km/h`
+        )
         .build(),
     };
   },
@@ -102,12 +111,15 @@ const getWeatherForecastConfig: ToolConfig = {
     })
     .describe("Hourly weather forecast"),
   pricing: { pricePerUse: 0, currency: "USD" },
-  handler: async ({ locationName, latitude, longitude }, agentInfo, context) => {
+  handler: async (
+    { locationName, latitude, longitude },
+    agentInfo,
+    context
+  ) => {
     console.log(
       `User / Agent ${agentInfo.id} requested forecast at ${locationName} (${latitude},${longitude})`
     );
 
-
     const response = await axios.get(
       `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m`
     );
@@ -131,36 +143,46 @@ const getWeatherForecastConfig: ToolConfig = {
         windSpeeds: limitedWind,
         humidity: limitedHumidity,
       },
-      ui: new CardUIBuilder()
+      ui: new LayoutUIBuilder()
         .setRenderMode("page")
-        .title(`Weather Forecast for ${locationName} ${weatherEmoji}`)
-        .addChild(new MapUIBuilder()
-          .setInitialView(latitude, longitude, 10)
-          .setMapStyle('mapbox://styles/mapbox/streets-v12')
-          .addMarkers([
-            {
-              latitude,
-              longitude,
-              title: locationName,
-              description: `Temperature: ${limitedTemp[0]}°C\nWind: ${limitedWind[0]} km/h`,
-              text: `${locationName} ${weatherEmoji}`,
-            }
-          ])
-          .build())
-        .addChild(new TableUIBuilder()
-          .addColumns([
-            { key: 'time', header: 'Time', type: 'string' },
-            { key: 'temperature', header: 'Temperature (°C)', type: 'number' },
-            { key: 'windSpeed', header: 'Wind Speed (km/h)', type: 'number' },
-            { key: 'humidity', header: 'Humidity (%)', type: 'number' },
-          ])
-          .rows(limitedTime.map((t: string, i: number) => ({
-            time: new Date(t).toLocaleString(),
-            temperature: limitedTemp[i],
-            windSpeed: limitedWind[i],
-            humidity: limitedHumidity[i],
-          })))
-          .build())
+        .setLayoutType("column")
+        .addChild(
+          new MapUIBuilder()
+            .setInitialView(latitude, longitude, 10)
+            .setMapStyle("mapbox://styles/mapbox/streets-v12")
+            .addMarkers([
+              {
+                latitude,
+                longitude,
+                title: locationName,
+                description: `Temperature: ${limitedTemp[0]}°C\nWind: ${limitedWind[0]} km/h`,
+                text: `${locationName} ${weatherEmoji}`,
+              },
+            ])
+            .build()
+        )
+        .addChild(
+          new TableUIBuilder()
+            .addColumns([
+              { key: "time", header: "Time", type: "string" },
+              {
+                key: "temperature",
+                header: "Temperature (°C)",
+                type: "number",
+              },
+              { key: "windSpeed", header: "Wind Speed (km/h)", type: "number" },
+              { key: "humidity", header: "Humidity (%)", type: "number" },
+            ])
+            .rows(
+              limitedTime.map((t: string, i: number) => ({
+                time: new Date(t).toLocaleString(),
+                temperature: limitedTemp[i],
+                windSpeed: limitedWind[i],
+                humidity: limitedHumidity[i],
+              }))
+            )
+            .build()
+        )
         .build(),
     };
   },
@@ -177,14 +199,14 @@ const dainService = defineDAINService({
     logo: "https://cdn-icons-png.flaticon.com/512/252/252035.png",
   },
   exampleQueries: [
-   {
-    category: "Weather",
-    queries: [
-      "What is the weather in Tokyo?",
-      "What is the weather in San Francisco?",
-      "What is the weather in London?",
-    ],
-   }
+    {
+      category: "Weather",
+      queries: [
+        "What is the weather in Tokyo?",
+        "What is the weather in San Francisco?",
+        "What is the weather in London?",
+      ],
+    },
   ],
   identity: {
     apiKey: process.env.DAIN_API_KEY,
@@ -192,6 +214,6 @@ const dainService = defineDAINService({
   tools: [getWeatherConfig, getWeatherForecastConfig],
 });
 
-dainService.startNode({ port: 2022 }).then(() => {
-  console.log("Weather DAIN Service is running on port 2022");
+dainService.startNode().then(({ address }) => {
+  console.log("Weather DAIN Service is running at :" + address().port);
 });

package/dist/utils.js

@@ -40,6 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDainConfig = getDainConfig;
+exports.displayTunnelUrl = displayTunnelUrl;
 exports.setupProxy = setupProxy;
 exports.logError = logError;
 exports.logSuccess = logSuccess;
@@ -62,7 +63,7 @@ function loadEnvFiles() {
     });
 }
 function getDainConfig(configFile) {
-    loadEnvFiles(); // Load environment variables from files
+    loadEnvFiles(); // Loads all env files first
     var defaultConfigPath = path_1.default.join(process.cwd(), 'dain.json');
     var configPath = configFile
         ? path_1.default.join(process.cwd(), configFile)
@@ -101,6 +102,15 @@ function getDainConfig(configFile) {
         throw new Error("Error reading or parsing configuration file: ".concat(error));
     }
 }
+function displayTunnelUrl(tunnelUrl) {
+    var divider = chalk_1.default.green('------------------------------------------------------------');
+    var header = chalk_1.default.green('Your service is available publicly at:');
+    var url = chalk_1.default.cyan.underline(tunnelUrl);
+    var info = chalk_1.default.yellow('This service URL can be connected to by a DAIN client or assistant');
+    var subInfo = chalk_1.default.yellow('(such as butterfly in development mode)');
+    var warning = chalk_1.default.red('You should not visit this URL directly');
+    console.log("\n".concat(divider, "\n").concat(header, "\n").concat(url, "\n\n").concat(info, "\n").concat(subInfo, "\n\n").concat(warning, "\n").concat(divider, "\n"));
+}
 function setupProxy(port, apiKey, config) {
     return __awaiter(this, void 0, void 0, function () {
         var spinner, client, tunnelUrl, error_1;
@@ -115,15 +125,14 @@ function setupProxy(port, apiKey, config) {
                     return [4 /*yield*/, client.start(parseInt(port))];
                 case 2:
                     tunnelUrl = _a.sent();
-                    spinner.succeed(chalk_1.default.green("\n------------------------------------------------------------\nYour service is available publicly at: ") +
-                        chalk_1.default.cyan.underline("".concat(tunnelUrl)) +
-                        chalk_1.default.green("\n------------------------------------------------------------\n"));
-                    return [2 /*return*/, client];
+                    spinner.succeed('Proxy setup complete');
+                    displayTunnelUrl(tunnelUrl);
+                    return [2 /*return*/, { client: client, tunnelUrl: tunnelUrl }];
                 case 3:
                     error_1 = _a.sent();
-                    spinner.fail(chalk_1.default.red('\nError setting up proxy'));
+                    spinner.fail(chalk_1.default.red('Error setting up proxy'));
                     console.error(chalk_1.default.red(error_1));
-                    return [3 /*break*/, 4];
+                    throw error_1;
                 case 4: return [2 /*return*/];
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dainprotocol/cli",
-  "version": "1.1.21",
+  "version": "1.1.27",
   "private": false,
   "publishConfig": {
     "access": "public"

package/templates/default/package.json

@@ -10,8 +10,8 @@
     "deploy": "dain deploy"
   },
   "dependencies": {
-    "@dainprotocol/service-sdk": "^1.0.93",
-    "@dainprotocol/utils": "^0.0.48",
+    "@dainprotocol/service-sdk": "^1.0.95",
+    "@dainprotocol/utils": "^0.0.49",
     "zod": "^3.23.8",
     "hono": "^4.6.3",
     "ts-node": "^10.4.0",
@@ -19,6 +19,6 @@
     "@types/express": "^4.17.13",
     "@types/node": "^22.5.4",
     "axios": "^1.7.5",
-    "@dainprotocol/cli": "^1.0.31"
+    "@dainprotocol/cli": "^1.1.26"
   }
 }

package/templates/default/src/index.ts

@@ -3,20 +3,22 @@
 import { z } from "zod";
 import axios from "axios";
 
-import {
-  defineDAINService,
-  ToolConfig,
-} from "@dainprotocol/service-sdk";
+import { defineDAINService, ToolConfig } from "@dainprotocol/service-sdk";
 
-import { CardUIBuilder, TableUIBuilder, MapUIBuilder } from "@dainprotocol/utils";
+import {
+  CardUIBuilder,
+  TableUIBuilder,
+  MapUIBuilder,
+  LayoutUIBuilder,
+} from "@dainprotocol/utils";
 
 const getWeatherEmoji = (temperature: number): string => {
-  if (temperature <= 0) return '🥶';
-  if (temperature <= 10) return '❄️';
-  if (temperature <= 20) return '⛅';
-  if (temperature <= 25) return '☀️';
-  if (temperature <= 30) return '🌞';
-  return '🔥';
+  if (temperature <= 0) return "🥶";
+  if (temperature <= 10) return "❄️";
+  if (temperature <= 20) return "⛅";
+  if (temperature <= 25) return "☀️";
+  if (temperature <= 30) return "🌞";
+  return "🔥";
 };
 
 const getWeatherConfig: ToolConfig = {
@@ -37,12 +39,15 @@ const getWeatherConfig: ToolConfig = {
     })
     .describe("Current weather information"),
   pricing: { pricePerUse: 0, currency: "USD" },
-  handler: async ({ locationName, latitude, longitude }, agentInfo, context) => {
+  handler: async (
+    { locationName, latitude, longitude },
+    agentInfo,
+    context
+  ) => {
     console.log(
       `User / Agent ${agentInfo.id} requested weather at ${locationName} (${latitude},${longitude})`
     );
 
-
     const response = await axios.get(
       `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,wind_speed_10m`
     );
@@ -59,20 +64,24 @@ const getWeatherConfig: ToolConfig = {
       ui: new CardUIBuilder()
         .setRenderMode("page")
         .title(`Current Weather in ${locationName} ${weatherEmoji}`)
-        .addChild(new MapUIBuilder()
-          .setInitialView(latitude, longitude, 10)
-          .setMapStyle('mapbox://styles/mapbox/streets-v12')
-          .addMarkers([
-            {
-              latitude,
-              longitude,
-              title: locationName,
-              description: `Temperature: ${temperature_2m}°C\nWind: ${wind_speed_10m} km/h`,
-              text: `${locationName} ${weatherEmoji}`,
-            }
-          ])
-          .build())
-        .content(`Temperature: ${temperature_2m}°C\nWind Speed: ${wind_speed_10m} km/h`)
+        .addChild(
+          new MapUIBuilder()
+            .setInitialView(latitude, longitude, 10)
+            .setMapStyle("mapbox://styles/mapbox/streets-v12")
+            .addMarkers([
+              {
+                latitude,
+                longitude,
+                title: locationName,
+                description: `Temperature: ${temperature_2m}°C\nWind: ${wind_speed_10m} km/h`,
+                text: `${locationName} ${weatherEmoji}`,
+              },
+            ])
+            .build()
+        )
+        .content(
+          `Temperature: ${temperature_2m}°C\nWind Speed: ${wind_speed_10m} km/h`
+        )
         .build(),
     };
   },
@@ -102,12 +111,15 @@ const getWeatherForecastConfig: ToolConfig = {
     })
     .describe("Hourly weather forecast"),
   pricing: { pricePerUse: 0, currency: "USD" },
-  handler: async ({ locationName, latitude, longitude }, agentInfo, context) => {
+  handler: async (
+    { locationName, latitude, longitude },
+    agentInfo,
+    context
+  ) => {
     console.log(
       `User / Agent ${agentInfo.id} requested forecast at ${locationName} (${latitude},${longitude})`
     );
 
-
     const response = await axios.get(
       `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m`
     );
@@ -131,36 +143,46 @@ const getWeatherForecastConfig: ToolConfig = {
         windSpeeds: limitedWind,
         humidity: limitedHumidity,
       },
-      ui: new CardUIBuilder()
+      ui: new LayoutUIBuilder()
         .setRenderMode("page")
-        .title(`Weather Forecast for ${locationName} ${weatherEmoji}`)
-        .addChild(new MapUIBuilder()
-          .setInitialView(latitude, longitude, 10)
-          .setMapStyle('mapbox://styles/mapbox/streets-v12')
-          .addMarkers([
-            {
-              latitude,
-              longitude,
-              title: locationName,
-              description: `Temperature: ${limitedTemp[0]}°C\nWind: ${limitedWind[0]} km/h`,
-              text: `${locationName} ${weatherEmoji}`,
-            }
-          ])
-          .build())
-        .addChild(new TableUIBuilder()
-          .addColumns([
-            { key: 'time', header: 'Time', type: 'string' },
-            { key: 'temperature', header: 'Temperature (°C)', type: 'number' },
-            { key: 'windSpeed', header: 'Wind Speed (km/h)', type: 'number' },
-            { key: 'humidity', header: 'Humidity (%)', type: 'number' },
-          ])
-          .rows(limitedTime.map((t: string, i: number) => ({
-            time: new Date(t).toLocaleString(),
-            temperature: limitedTemp[i],
-            windSpeed: limitedWind[i],
-            humidity: limitedHumidity[i],
-          })))
-          .build())
+        .setLayoutType("column")
+        .addChild(
+          new MapUIBuilder()
+            .setInitialView(latitude, longitude, 10)
+            .setMapStyle("mapbox://styles/mapbox/streets-v12")
+            .addMarkers([
+              {
+                latitude,
+                longitude,
+                title: locationName,
+                description: `Temperature: ${limitedTemp[0]}°C\nWind: ${limitedWind[0]} km/h`,
+                text: `${locationName} ${weatherEmoji}`,
+              },
+            ])
+            .build()
+        )
+        .addChild(
+          new TableUIBuilder()
+            .addColumns([
+              { key: "time", header: "Time", type: "string" },
+              {
+                key: "temperature",
+                header: "Temperature (°C)",
+                type: "number",
+              },
+              { key: "windSpeed", header: "Wind Speed (km/h)", type: "number" },
+              { key: "humidity", header: "Humidity (%)", type: "number" },
+            ])
+            .rows(
+              limitedTime.map((t: string, i: number) => ({
+                time: new Date(t).toLocaleString(),
+                temperature: limitedTemp[i],
+                windSpeed: limitedWind[i],
+                humidity: limitedHumidity[i],
+              }))
+            )
+            .build()
+        )
         .build(),
     };
   },
@@ -177,14 +199,14 @@ const dainService = defineDAINService({
     logo: "https://cdn-icons-png.flaticon.com/512/252/252035.png",
   },
   exampleQueries: [
-   {
-    category: "Weather",
-    queries: [
-      "What is the weather in Tokyo?",
-      "What is the weather in San Francisco?",
-      "What is the weather in London?",
-    ],
-   }
+    {
+      category: "Weather",
+      queries: [
+        "What is the weather in Tokyo?",
+        "What is the weather in San Francisco?",
+        "What is the weather in London?",
+      ],
+    },
   ],
   identity: {
     apiKey: process.env.DAIN_API_KEY,
@@ -192,6 +214,6 @@ const dainService = defineDAINService({
   tools: [getWeatherConfig, getWeatherForecastConfig],
 });
 
-dainService.startNode({ port: 2022 }).then(() => {
-  console.log("Weather DAIN Service is running on port 2022");
+dainService.startNode().then(({ address }) => {
+  console.log("Weather DAIN Service is running at :" + address().port);
 });