@mcp-web/tools 0.1.0

package/dist/screenshot/index.d.ts

@@ -0,0 +1,30 @@
+import type { Options as HtmlToImageOptions } from 'html-to-image/lib/types';
+import { z } from 'zod';
+import { BaseTool } from '../base.js';
+interface Options extends HtmlToImageOptions {
+    name?: string;
+    description?: string;
+    format?: 'png' | 'jpeg' | 'webp';
+    elementSelector?: string;
+}
+declare const TakeScreenshotInputSchema: z.ZodObject<{
+    elementSelector: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+type TakeScreenshotInput = z.infer<typeof TakeScreenshotInputSchema>;
+/**
+ * Returns the screenshot as a data URL string (e.g., "data:image/png;base64,...").
+ * The bridge detects data URL strings and converts them into native MCP ImageContent
+ * blocks, so Claude receives the image efficiently rather than as raw base64 text.
+ */
+declare const TakeScreenshotOutputSchema: z.ZodString;
+export declare class ScreenshotTool extends BaseTool<typeof TakeScreenshotInputSchema, typeof TakeScreenshotOutputSchema> {
+    #private;
+    constructor(options: Options);
+    get name(): string;
+    get description(): string;
+    get inputSchema(): typeof TakeScreenshotInputSchema;
+    get outputSchema(): typeof TakeScreenshotOutputSchema;
+    get handler(): (params?: TakeScreenshotInput) => Promise<string>;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/screenshot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screenshot/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,UAAU,OAAQ,SAAQ,kBAAkB;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,yBAAyB;;iBAE7B,CAAC;AACH,KAAK,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAErE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,aAEW,CAAC;AA2C5C,qBAAa,cAAe,SAAQ,QAAQ,CAC1C,OAAO,yBAAyB,EAChC,OAAO,0BAA0B,CAClC;;gBAOa,OAAO,EAAE,OAAO;IAQ5B,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,IAAI,OAAO,yBAAyB,CAElD;IAED,IAAI,YAAY,IAAI,OAAO,0BAA0B,CAEpD;IAED,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,OAAO,CAAC,MAAM,CAAC,CAE/D;CACF"}

package/dist/screenshot/index.js

@@ -0,0 +1,89 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ScreenshotTool_name, _ScreenshotTool_description, _ScreenshotTool_inputSchema, _ScreenshotTool_outputSchema, _ScreenshotTool_handler;
+import { toCanvas, toJpeg, toPng } from 'html-to-image';
+import { z } from 'zod';
+import { BaseTool } from '../base.js';
+const TakeScreenshotInputSchema = z.object({
+    elementSelector: z.string().optional().describe('CSS selector to query'),
+});
+/**
+ * Returns the screenshot as a data URL string (e.g., "data:image/png;base64,...").
+ * The bridge detects data URL strings and converts them into native MCP ImageContent
+ * blocks, so Claude receives the image efficiently rather than as raw base64 text.
+ */
+const TakeScreenshotOutputSchema = z
+    .string()
+    .describe('The screenshot as a data URL');
+const createScreenshot = (options) => {
+    return async (params) => {
+        return takeScreenshot(params || {}, options);
+    };
+};
+async function takeScreenshot(params, options) {
+    const parsedParams = TakeScreenshotInputSchema.safeParse(params);
+    if (!parsedParams.success) {
+        throw new Error('Invalid parameters');
+    }
+    const { elementSelector } = parsedParams.data;
+    const { format } = options;
+    const element = elementSelector
+        ? document.querySelector(elementSelector) || document.body
+        : document.body;
+    try {
+        if (format === 'png') {
+            return await toPng(element, options);
+        }
+        else if (format === 'jpeg') {
+            return await toJpeg(element, options);
+        }
+        else if (format === 'webp') {
+            // html-to-image doesn't have direct webp support, convert from canvas
+            const canvas = await toCanvas(element, options);
+            return canvas.toDataURL('image/webp', options.quality);
+        }
+        return await toPng(element, options);
+    }
+    catch (error) {
+        throw new Error(`Failed to take screenshot: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+export class ScreenshotTool extends BaseTool {
+    constructor(options) {
+        super();
+        _ScreenshotTool_name.set(this, void 0);
+        _ScreenshotTool_description.set(this, void 0);
+        _ScreenshotTool_inputSchema.set(this, TakeScreenshotInputSchema);
+        _ScreenshotTool_outputSchema.set(this, TakeScreenshotOutputSchema);
+        _ScreenshotTool_handler.set(this, void 0);
+        __classPrivateFieldSet(this, _ScreenshotTool_name, options.name || 'screenshot', "f");
+        __classPrivateFieldSet(this, _ScreenshotTool_description, options.description || 'Take a screenshot of the web page', "f");
+        __classPrivateFieldSet(this, _ScreenshotTool_handler, createScreenshot(options), "f");
+    }
+    get name() {
+        return __classPrivateFieldGet(this, _ScreenshotTool_name, "f");
+    }
+    get description() {
+        return __classPrivateFieldGet(this, _ScreenshotTool_description, "f");
+    }
+    get inputSchema() {
+        return __classPrivateFieldGet(this, _ScreenshotTool_inputSchema, "f");
+    }
+    get outputSchema() {
+        return __classPrivateFieldGet(this, _ScreenshotTool_outputSchema, "f");
+    }
+    get handler() {
+        return __classPrivateFieldGet(this, _ScreenshotTool_handler, "f");
+    }
+}
+_ScreenshotTool_name = new WeakMap(), _ScreenshotTool_description = new WeakMap(), _ScreenshotTool_inputSchema = new WeakMap(), _ScreenshotTool_outputSchema = new WeakMap(), _ScreenshotTool_handler = new WeakMap();
+//# sourceMappingURL=index.js.map

package/dist/screenshot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screenshot/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mcp-web/tools",
+  "version": "0.1.0",
+  "description": "MCP Web tools collection",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./python": {
+      "import": "./dist/python/index.js",
+      "types": "./dist/python/index.d.ts"
+    },
+    "./dom": {
+      "import": "./dist/dom/index.js",
+      "types": "./dist/dom/index.d.ts"
+    },
+    "./screenshot": {
+      "import": "./dist/screenshot/index.js",
+      "types": "./dist/screenshot/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13",
+    "uuid": "^11.0.7",
+    "zod": "~4.1.12",
+    "@mcp-web/types": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/uuid": "^10.0.0",
+    "typescript": "~5.9.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}

package/src/base.ts

@@ -0,0 +1,70 @@
+import type { ToolDefinition } from '@mcp-web/types';
+import type { z } from 'zod';
+
+/**
+ * Abstract base class for creating reusable MCP tools.
+ *
+ * Extend this class to create tools that can be shared across projects.
+ * Subclasses must implement all abstract properties: name, description,
+ * inputSchema, outputSchema, and handler.
+ *
+ * @typeParam TInput - Zod schema type for tool input validation
+ * @typeParam TOutput - Zod schema type for tool output validation
+ *
+ * @example Creating a custom tool
+ * ```typescript
+ * import { BaseTool } from '@mcp-web/tools';
+ * import { z } from 'zod';
+ *
+ * const InputSchema = z.object({
+ *   query: z.string().describe('Search query'),
+ * });
+ *
+ * const OutputSchema = z.object({
+ *   results: z.array(z.string()),
+ * });
+ *
+ * class SearchTool extends BaseTool<typeof InputSchema, typeof OutputSchema> {
+ *   get name() { return 'search'; }
+ *   get description() { return 'Search for items'; }
+ *   get inputSchema() { return InputSchema; }
+ *   get outputSchema() { return OutputSchema; }
+ *   get handler() {
+ *     return ({ query }) => ({ results: ['item1', 'item2'] });
+ *   }
+ * }
+ *
+ * // Use the tool
+ * const searchTool = new SearchTool();
+ * mcp.addTool(searchTool.definition);
+ * ```
+ */
+export abstract class BaseTool<
+  TInput extends z.ZodObject,
+  TOutput extends z.ZodType,
+> {
+  /** Unique name for the tool. */
+  abstract get name(): string;
+  /** Description of what the tool does (shown to AI). */
+  abstract get description(): string;
+  /** Zod schema for validating input parameters. */
+  abstract get inputSchema(): TInput | undefined;
+  /** Zod schema for validating output values. */
+  abstract get outputSchema(): TOutput;
+  /** Function that executes the tool logic. */
+  abstract get handler(): (params: z.infer<TInput>) => z.infer<TOutput> | Promise<z.infer<TOutput>>;
+
+  /**
+   * Returns the tool definition for registration with MCPWeb.
+   * @returns Tool definition object compatible with MCPWeb.addTool()
+   */
+  get definition(): ToolDefinition {
+    return {
+      name: this.name,
+      description: this.description,
+      handler: this.handler,
+      inputSchema: this.inputSchema,
+      outputSchema: this.outputSchema
+    };
+  }
+}

package/src/dom/index.ts

@@ -0,0 +1,69 @@
+import { z } from 'zod';
+import { BaseTool } from '../base.js';
+
+const DOMElementSchema = z.object({
+  tagName: z.string(),
+  id: z.string(),
+  className: z.string(),
+  textContent: z.string().nullable(),
+  attributes: z.record(z.string(), z.string())
+});
+
+type DOMElement = z.infer<typeof DOMElementSchema>;
+
+const GetDOMElementsInputSchema = z.object({
+  selector: z.string().default('body').describe('CSS selector to query')
+});
+type GetDOMElementsInput = z.infer<typeof GetDOMElementsInputSchema>;
+
+const GetDOMElementsOutputSchema = z.object({
+  elements: z.array(DOMElementSchema)
+});
+type GetDOMElementsOutput = z.infer<typeof GetDOMElementsOutputSchema>;
+
+function getDOMElements(params: GetDOMElementsInput): GetDOMElementsOutput {
+  const parsedParams = GetDOMElementsInputSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    throw new Error(`DOMQueryTool: Invalid input parameters: ${parsedParams.error.message}`);
+  }
+
+  const { selector } = parsedParams.data;
+
+  const elements = document.querySelectorAll(selector);
+
+  return {
+    elements: Array.from(elements).map((el) => ({
+      tagName: el.tagName,
+      id: el.id,
+      className: el.className,
+      textContent: el.textContent?.trim() || null,
+      attributes: Array.from(el.attributes).reduce((acc, attr) => {
+        acc[attr.name] = attr.value;
+        return acc;
+      }, {} as Record<string, string>)
+    } satisfies DOMElement))
+  }
+}
+
+export class DOMQueryTool extends BaseTool<typeof GetDOMElementsInputSchema, typeof GetDOMElementsOutputSchema> {
+  get name(): string {
+    return 'dom-query';
+  }
+
+  get description(): string {
+    return 'Query the DOM for elements';
+  }
+
+  get inputSchema(): typeof GetDOMElementsInputSchema {
+    return GetDOMElementsInputSchema;
+  }
+
+  get outputSchema(): typeof GetDOMElementsOutputSchema {
+    return GetDOMElementsOutputSchema;
+  }
+
+  get handler(): (params: GetDOMElementsInput) => GetDOMElementsOutput {
+    return getDOMElements;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './base.js';

package/src/python/index.ts

@@ -0,0 +1,231 @@
+import type { ToolDefinition } from '@mcp-web/types';
+import { v4 as uuidv4 } from 'uuid';
+import { z } from 'zod';
+import { BaseTool } from '../base.js';
+
+interface Options {
+  /** The name of the tool. */
+  name?: string;
+  /** The description of the tool. */
+  description?: string;
+  /** The default packages to load on init. Can be useful if you expect many calls to use the same packages. E.g., `['numpy', 'pandas']`. */
+  defaultPackages?: string[];
+}
+
+const RunPythonInputSchema = z.object({
+  script: z.string().describe('Python script to run')
+});
+type RunPythonInput = z.infer<typeof RunPythonInputSchema>;
+
+const RunPythonOutputSchema = z.object({ result: z.string().describe('The result of the Python script') });
+type RunPythonOutput = z.infer<typeof RunPythonOutputSchema>;
+
+const runPythonJsonSchema = z.toJSONSchema(RunPythonInputSchema, { target: "draft-7" });
+
+export interface WorkerMessagePackages {
+  packages: string[];
+}
+
+export interface WorkerMessageRunPython {
+  id: string;
+  script: string;
+  datasets: Record<string, unknown>;
+}
+
+export type WorkerMessage = WorkerMessagePackages | WorkerMessageRunPython;
+
+interface WorkerResponseSuccess {
+  id: string;
+  result: string;
+}
+
+interface WorkerResponseError {
+  id: string;
+  error: string;
+}
+
+type WorkerResponse = WorkerResponseSuccess | WorkerResponseError;
+
+const workerCode = /* js */`
+import { loadPyodide } from "https://cdn.jsdelivr.net/pyodide/v0.28.1/full/pyodide.mjs";
+
+const TIMEOUT = 30000;
+
+const state = {
+  pyodide: null,
+};
+
+async function initPyodide() {
+  const pyodide = await loadPyodide();
+  state.pyodide = pyodide;
+  self.postMessage({ init: true });
+}
+
+async function loadPackages(packages) {
+  if (!state.pyodide) {
+    self.postMessage({ error: 'Pyodide not initialized' });
+    return;
+  }
+
+  const pyodide = state.pyodide;
+
+  try {
+    await pyodide.loadPackage(packages);
+    self.postMessage({ packagesLoaded: true });
+  } catch (error) {
+    self.postMessage({ error });
+  }
+}
+
+async function runPython(id, script, datasets) {
+  if (!state.pyodide) {
+    self.postMessage({ id, error: 'Pyodide not initialized' });
+    return;
+  }
+
+  const pyodide = state.pyodide;
+
+  try {
+    await pyodide.loadPackagesFromImports(script);
+
+    for (const [key, value] of Object.entries(datasets)) {
+      pyodide.globals.set(key, value);
+    }
+
+    let result = '';
+
+    const pythonExecution = pyodide.runPythonAsync(script).then((r) => {
+      result = r?.toString() ?? '';
+    });
+
+    const timeout = new Promise((_, reject) => {
+      setTimeout(() => {
+        reject(new Error("Python execution timed out"));
+      }, TIMEOUT);
+    });
+
+    await Promise.race([pythonExecution, timeout]);
+    self.postMessage({ id, result });
+  } catch (error) {
+    self.postMessage({ id, error: error instanceof Error ? error.message : String(error) });
+  }
+}
+
+self.onmessage = async (event) => {
+  if ('packages' in event.data) {
+    await loadPackages(event.data.packages);
+    return;
+  }
+
+  const { id, script, datasets } = event.data;
+  await runPython(id, script, datasets);
+};
+
+initPyodide();
+`;
+
+const createWorker = (options: Options) => {
+  const blob = new Blob([workerCode], { type: 'application/javascript' });
+  const worker = new Worker(URL.createObjectURL(blob), { type: "module" });
+
+  if (options.defaultPackages?.length) {
+    worker.postMessage({ packages: options.defaultPackages } satisfies WorkerMessagePackages);
+  }
+
+  return worker;
+}
+
+const getPromiseAndResolveReject = <T>() => {
+  let resolve: (value: T | PromiseLike<T>) => void;
+  let reject: (error: Error) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  // @ts-expect-error: We know that the resolve and reject functions are defined
+  return { promise, resolve, reject };
+}
+
+const createRunPython = (
+  worker: Worker,
+  getDatasets: () => Record<string, unknown> | Promise<Record<string, unknown>>
+) => async (params: RunPythonInput): Promise<RunPythonOutput> => {
+  const parsedParams = RunPythonInputSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    throw new Error(`PythonTool: Invalid input parameters: ${parsedParams.error.message}`);
+  }
+
+  const { script } = parsedParams.data;
+
+  const { promise, resolve, reject } = getPromiseAndResolveReject<RunPythonOutput>();
+  const executionId = uuidv4();
+
+  worker.addEventListener("message", function listener(event: MessageEvent<WorkerResponse>) {
+    // Ignore messages from other executions
+    if (event.data.id !== executionId) {
+      return;
+    }
+
+    // This listener is done so remove it.
+    worker.removeEventListener("message", listener);
+
+    if ('error' in event.data) {
+      reject(new Error(event.data.error));
+      return;
+    }
+
+    resolve({ result: event.data.result });
+  });
+
+  worker.postMessage(
+    {
+      id: executionId,
+      script,
+      datasets: await getDatasets()
+    } satisfies WorkerMessageRunPython
+  );
+
+  return promise;
+}
+
+export class PythonTool extends BaseTool<typeof RunPythonInputSchema, typeof RunPythonOutputSchema> {
+  #name: string;
+  #description: string;
+  #inputSchema = RunPythonInputSchema;
+  #outputSchema = RunPythonOutputSchema;
+  #handler: (params: RunPythonInput) => Promise<RunPythonOutput>;
+  #worker: Worker;
+
+  constructor(getDatasets: () => Record<string, unknown>, options: Options) {
+    super();
+    this.#name = options.name || 'python';
+    this.#description = options.description || 'Run Python code';
+    this.#worker = createWorker(options);
+    this.#handler = createRunPython(this.#worker, getDatasets);
+  }
+
+  get name(): string {
+    return this.#name;
+  }
+
+  get description(): string {
+    return this.#description;
+  }
+
+  get inputSchema(): typeof RunPythonInputSchema {
+    return this.#inputSchema;
+  }
+
+  get outputSchema(): typeof RunPythonOutputSchema {
+    return this.#outputSchema;
+  }
+
+  get handler(): (params: RunPythonInput) => Promise<RunPythonOutput> {
+    return this.#handler;
+  }
+
+  destroy() {
+    this.#worker.terminate();
+  }
+}

package/src/screenshot/index.ts

@@ -0,0 +1,105 @@
+import { toCanvas, toJpeg, toPng } from 'html-to-image';
+import type { Options as HtmlToImageOptions } from 'html-to-image/lib/types';
+import { z } from 'zod';
+import { BaseTool } from '../base.js';
+
+interface Options extends HtmlToImageOptions {
+  name?: string;
+  description?: string;
+  format?: 'png' | 'jpeg' | 'webp';
+  elementSelector?: string;
+}
+
+const TakeScreenshotInputSchema = z.object({
+  elementSelector: z.string().optional().describe('CSS selector to query'),
+});
+type TakeScreenshotInput = z.infer<typeof TakeScreenshotInputSchema>;
+
+/**
+ * Returns the screenshot as a data URL string (e.g., "data:image/png;base64,...").
+ * The bridge detects data URL strings and converts them into native MCP ImageContent
+ * blocks, so Claude receives the image efficiently rather than as raw base64 text.
+ */
+const TakeScreenshotOutputSchema = z
+  .string()
+  .describe('The screenshot as a data URL');
+
+const createScreenshot = (options: Options) => {
+  return async (params?: TakeScreenshotInput): Promise<string> => {
+    return takeScreenshot(params || {}, options);
+  };
+};
+
+async function takeScreenshot(
+  params: TakeScreenshotInput,
+  options: Options,
+): Promise<string> {
+  const parsedParams = TakeScreenshotInputSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    throw new Error('Invalid parameters');
+  }
+
+  const { elementSelector } = parsedParams.data;
+  const { format } = options;
+
+  const element: HTMLElement = elementSelector
+    ? document.querySelector(elementSelector) || document.body
+    : document.body;
+
+  try {
+    if (format === 'png') {
+      return await toPng(element, options);
+    } else if (format === 'jpeg') {
+      return await toJpeg(element, options);
+    } else if (format === 'webp') {
+      // html-to-image doesn't have direct webp support, convert from canvas
+      const canvas = await toCanvas(element, options);
+      return canvas.toDataURL('image/webp', options.quality);
+    }
+    return await toPng(element, options);
+  } catch (error) {
+    throw new Error(
+      `Failed to take screenshot: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
+
+export class ScreenshotTool extends BaseTool<
+  typeof TakeScreenshotInputSchema,
+  typeof TakeScreenshotOutputSchema
+> {
+  #name: string;
+  #description: string;
+  #inputSchema = TakeScreenshotInputSchema;
+  #outputSchema = TakeScreenshotOutputSchema;
+  #handler: (params?: TakeScreenshotInput) => Promise<string>;
+
+  constructor(options: Options) {
+    super();
+    this.#name = options.name || 'screenshot';
+    this.#description =
+      options.description || 'Take a screenshot of the web page';
+    this.#handler = createScreenshot(options);
+  }
+
+  get name(): string {
+    return this.#name;
+  }
+
+  get description(): string {
+    return this.#description;
+  }
+
+  get inputSchema(): typeof TakeScreenshotInputSchema {
+    return this.#inputSchema;
+  }
+
+  get outputSchema(): typeof TakeScreenshotOutputSchema {
+    return this.#outputSchema;
+  }
+
+  get handler(): (params?: TakeScreenshotInput) => Promise<string> {
+    return this.#handler;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}