create-mcp-use-app 2.0.0-beta.0 → 2.0.0-beta.10

package/dist/templates/mcp-apps/views/my-view/icons.tsx

@@ -0,0 +1,142 @@
+export function ExpandIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+    </svg>
+  );
+}
+
+export function PipIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <rect x="2" y="4" width="20" height="14" rx="2" />
+      <rect x="13" y="11" width="7" height="5" rx="1" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function CloseIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+export function SunIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+    </svg>
+  );
+}
+
+export function SmartphoneIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+      <path d="M12 18h.01" />
+    </svg>
+  );
+}
+
+export function MonitorIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect width="20" height="14" x="2" y="3" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    </svg>
+  );
+}
+
+export function ExternalLinkIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+  );
+}

package/dist/templates/mcp-apps/views/my-view/view.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
+
+.hero-title {
+  font-family: "Outfit", sans-serif;
+}

package/dist/templates/mcp-apps/views/my-view/view.tsx

@@ -0,0 +1,396 @@
+/** MCP App starter view — edit this file to build your UI. */
+import {
+  Image,
+  ModelContext,
+  ThemeProvider,
+  useCallTool,
+  useDisplayMode,
+  useHostContext,
+  useOpenExternal,
+  useSendFollowUp,
+  useToolContext,
+  useViewTheme,
+  useViewTool,
+} from "mcp-use/react";
+import { useState } from "react";
+import { z } from "zod";
+
+import {
+  CloseIcon,
+  ExpandIcon,
+  ExternalLinkIcon,
+  MonitorIcon,
+  MoonIcon,
+  PipIcon,
+  SmartphoneIcon,
+  SunIcon,
+} from "./icons.js";
+import { HeroMeshOrb } from "./MeshGradient.js";
+import { Tooltip } from "./Tooltip.js";
+import "./view.css";
+
+export default function McpApp() {
+  // useToolContext — tool lifecycle (pending / error / result)
+  const view = useToolContext<"show-app">();
+  // useHostContext — locale, timezone, platform, capabilities
+  const { hostCapabilities, platform, displayMode, locale, timeZone } =
+    useHostContext();
+  const theme = useViewTheme();
+  // useDisplayMode — request pip / fullscreen / inline
+  const { availableDisplayModes, requestDisplayMode } = useDisplayMode();
+  // useOpenExternal — open URLs via the host
+  const openExternal = useOpenExternal();
+  // useSendFollowUp — send a prompt back to the host
+  const sendFollowUp = useSendFollowUp();
+  // useCallTool — invoke server tools from the view
+  const sayHello = useCallTool("say-hello");
+
+  const [count, setCount] = useState(0);
+  const [highlighted, setHighlighted] = useState(false);
+
+  // useViewTool — register a tool callable from the host
+  useViewTool(
+    {
+      name: "set-counter",
+      description: "Set the counter displayed in the MCP App card",
+      inputSchema: z.object({
+        value: z.number().int().min(0).describe("Counter value to display"),
+      }),
+    },
+    async ({ value }) => {
+      setCount(value);
+      setHighlighted(true);
+      window.setTimeout(() => setHighlighted(false), 1200);
+      return { content: [{ type: "text", text: `Counter set to ${value}` }] };
+    }
+  );
+
+  const isMobile = platform === "mobile";
+  const isFullscreen = displayMode === "fullscreen";
+  const isPip = displayMode === "pip";
+  const pending = view.status === "pending";
+  const canOpenExternal = hostCapabilities?.openLinks !== undefined;
+  const canSendFollowUp = hostCapabilities?.message !== undefined;
+  const callResult = sayHello.data?.structuredContent?.greeting;
+
+  return (
+    <ThemeProvider>
+      <div
+        data-card-shell
+        className={
+          isFullscreen
+            ? "relative flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-white dark:bg-black"
+            : `relative overflow-hidden rounded-3xl border border-zinc-200 bg-white dark:border-white/10 dark:bg-black${
+                !pending && highlighted
+                  ? " ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-black"
+                  : ""
+              }`
+        }
+      >
+        {!isMobile && <HeroMeshOrb />}
+        {!isFullscreen && (
+          <div className="absolute inset-x-4 top-4 z-20 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Tooltip label={`MCP Host sending: Theme: ${theme}`} multiline>
+                <span
+                  className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium tracking-wide text-neutral-500 dark:text-neutral-400"
+                  aria-label={`Theme: ${theme}`}
+                >
+                  {theme === "dark" ? <MoonIcon /> : <SunIcon />}
+                </span>
+              </Tooltip>
+              <Tooltip
+                label={`MCP Host sending: Platform: ${isMobile ? "mobile" : "web"}`}
+                multiline
+              >
+                <span
+                  className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium tracking-wide text-neutral-500 dark:text-neutral-400"
+                  aria-label={`Platform: ${isMobile ? "mobile" : "web"}`}
+                >
+                  {isMobile ? <SmartphoneIcon /> : <MonitorIcon />}
+                </span>
+              </Tooltip>
+              <Tooltip label={`MCP Host sending: Locale: ${locale}`} multiline>
+                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium tracking-wide text-neutral-500 dark:text-neutral-400">
+                  {locale}
+                </span>
+              </Tooltip>
+              <Tooltip
+                label={`MCP Host sending: Timezone: ${timeZone}`}
+                multiline
+              >
+                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium tracking-wide text-neutral-500 dark:text-neutral-400">
+                  {timeZone.split("/").pop()?.replace(/_/g, " ") ?? timeZone}
+                </span>
+              </Tooltip>
+            </div>
+            <div className="flex items-center gap-2">
+              {!isFullscreen && !isPip && (
+                <>
+                  {availableDisplayModes.includes("pip") && (
+                    <Tooltip
+                      label="MCP Apps display mode: picture-in-picture"
+                      multiline
+                    >
+                      <button
+                        type="button"
+                        className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                        aria-label="Picture-in-picture"
+                        onClick={() => void requestDisplayMode({ mode: "pip" })}
+                      >
+                        <PipIcon />
+                      </button>
+                    </Tooltip>
+                  )}
+                  {availableDisplayModes.includes("fullscreen") && (
+                    <Tooltip
+                      label="MCP Apps display mode: fullscreen"
+                      multiline
+                    >
+                      <button
+                        type="button"
+                        className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                        aria-label="Fullscreen"
+                        onClick={() =>
+                          void requestDisplayMode({ mode: "fullscreen" })
+                        }
+                      >
+                        <ExpandIcon />
+                      </button>
+                    </Tooltip>
+                  )}
+                </>
+              )}
+              {(isFullscreen || isPip) && (
+                <Tooltip
+                  label="MCP Apps display mode: return to inline"
+                  multiline
+                >
+                  <button
+                    type="button"
+                    className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                    aria-label="Exit"
+                    onClick={() => void requestDisplayMode({ mode: "inline" })}
+                  >
+                    <CloseIcon />
+                  </button>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        )}
+        {!isMobile && (
+          <button
+            type="button"
+            className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={!canOpenExternal}
+            title="mcp-use on GitHub"
+            onClick={() =>
+              void openExternal({ url: "https://github.com/mcp-use/mcp-use" })
+            }
+          >
+            <span className="text-[10px] font-medium tracking-wide uppercase">
+              Built with
+            </span>
+            <Image
+              src="/logo-mcp-use.svg"
+              alt="mcp-use"
+              className="h-[1.4rem] w-auto max-w-[115px] object-contain"
+            />
+          </button>
+        )}
+        <div
+          className={`relative z-10 flex flex-col items-center text-center ${
+            isFullscreen
+              ? "min-h-0 flex-1 justify-center overflow-y-auto px-6 py-8"
+              : isMobile
+                ? "px-6 py-10"
+                : "min-h-[400px] px-8 py-8 pb-16 sm:min-h-[440px] sm:px-10 sm:py-10 sm:pb-16"
+          }`}
+        >
+          {view.status === "error" ? (
+            <>
+              <h1 className="m-0 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">
+                Failed to load MCP App
+              </h1>
+              <p className="mt-4 mb-0 text-sm text-neutral-600 dark:text-neutral-400">
+                {view.error.message}
+              </p>
+            </>
+          ) : (
+            <>
+              {/* ModelContext — push state the host model can read */}
+              {!pending && (
+                <ModelContext content={`MCP App counter: ${count}`} />
+              )}
+              <div
+                className={`relative z-10 mb-0 flex flex-col items-center gap-3 ${isMobile ? "mt-10" : "mt-3"}`}
+              >
+                {pending ? (
+                  <span
+                    aria-hidden
+                    className="inline-block h-7 w-[4.75rem] animate-pulse rounded-full bg-zinc-200 dark:bg-zinc-800"
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className="inline-flex cursor-pointer items-center gap-1 rounded-full border border-neutral-300 bg-transparent px-3 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                    disabled={!canOpenExternal}
+                    onClick={() =>
+                      void openExternal({
+                        url: "https://mcp-use.com/docs/typescript",
+                      })
+                    }
+                  >
+                    Docs
+                    <ExternalLinkIcon />
+                  </button>
+                )}
+                <h1
+                  className={`hero-title relative z-10 mx-auto mb-0 max-w-md text-center font-medium leading-tight text-neutral-900 dark:text-neutral-100 ${
+                    isMobile ? "text-2xl" : "text-4xl sm:text-5xl"
+                  }`}
+                >
+                  {pending ? (
+                    <span className="inline-block animate-pulse rounded-sm text-transparent select-none bg-zinc-200 dark:bg-zinc-800">
+                      {view.toolInput?.appName?.trim() || "MCP App"}
+                    </span>
+                  ) : (
+                    view.toolInput?.appName?.trim() || "MCP App"
+                  )}
+                </h1>
+              </div>
+              <p
+                className={`relative z-10 mx-auto mt-4 mb-6 max-w-md text-center leading-relaxed text-neutral-600 dark:text-neutral-400 ${isMobile ? "text-sm" : "text-base"}`}
+              >
+                {pending ? (
+                  <span className="inline-block animate-pulse rounded-sm text-transparent select-none bg-zinc-200 dark:bg-zinc-800">
+                    Get started by editing{" "}
+                    <code className="inline-flex align-middle rounded-md bg-zinc-100 px-1.5 py-0.5 font-mono text-[13px] leading-none text-transparent dark:bg-zinc-800">
+                      views/my-view/view.tsx
+                    </code>
+                  </span>
+                ) : (
+                  <>
+                    Get started by editing{" "}
+                    <code className="inline-flex align-middle rounded-md bg-zinc-100 px-1.5 py-0.5 font-mono text-[13px] leading-none text-neutral-700 dark:bg-zinc-800 dark:text-neutral-200">
+                      views/my-view/view.tsx
+                    </code>
+                  </>
+                )}
+              </p>
+              <div
+                className={`relative z-10 flex w-full flex-wrap items-center justify-center ${isMobile ? "gap-1.5" : "gap-2"}`}
+              >
+                <Tooltip
+                  label="Widget state: updates UI and Model Context for the host"
+                  multiline
+                >
+                  <button
+                    type="button"
+                    disabled={pending}
+                    aria-hidden={pending}
+                    tabIndex={pending ? -1 : 0}
+                    className={`inline-flex cursor-pointer items-center gap-1.5 rounded-full bg-black font-normal text-white transition-colors hover:bg-black/90 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-black dark:hover:bg-white/90 ${
+                      isMobile ? "px-3 py-1.5 text-xs" : "px-4 py-2 text-sm"
+                    } ${pending ? "animate-pulse opacity-70" : ""}`}
+                    onClick={() => setCount((c) => c + 1)}
+                  >
+                    <span className={pending ? "text-transparent" : undefined}>
+                      Update State
+                    </span>
+                    <span
+                      className={`rounded-full border tabular-nums ${
+                        isMobile
+                          ? "px-1 py-0.5 text-[10px]"
+                          : "px-1.5 py-0.5 text-xs"
+                      } border-white/35 dark:border-black/25 ${pending ? "text-transparent" : ""}`}
+                    >
+                      {count}
+                    </span>
+                  </button>
+                </Tooltip>
+                <Tooltip
+                  label="In-app tool calls: invoke MCP tools from the view"
+                  multiline
+                >
+                  <button
+                    type="button"
+                    disabled={pending || sayHello.isPending}
+                    aria-hidden={pending}
+                    tabIndex={pending ? -1 : 0}
+                    className={`inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-neutral-300 bg-transparent font-normal text-neutral-900 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800 ${
+                      isMobile ? "px-3 py-1.5 text-xs" : "px-4 py-2 text-sm"
+                    } ${pending ? "animate-pulse opacity-70" : ""}`}
+                    onClick={() => void sayHello.callTool({ name: "mcp-use" })}
+                  >
+                    <span className={pending ? "text-transparent" : undefined}>
+                      {sayHello.isPending ? "Saying…" : "Say Hello"}
+                    </span>
+                  </button>
+                </Tooltip>
+                <Tooltip
+                  label="Follow-up messages: send a prompt back to the MCP host"
+                  multiline
+                >
+                  <button
+                    type="button"
+                    disabled={pending || !canSendFollowUp}
+                    aria-hidden={pending}
+                    tabIndex={pending ? -1 : 0}
+                    className={`inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-neutral-300 bg-transparent font-normal text-neutral-900 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800 ${
+                      isMobile ? "px-3 py-1.5 text-xs" : "px-4 py-2 text-sm"
+                    } ${pending ? "animate-pulse opacity-70" : ""}`}
+                    onClick={() =>
+                      void sendFollowUp({
+                        prompt:
+                          "Tell me more about MCP Apps and views in mcp-use",
+                      }).catch(() => {})
+                    }
+                  >
+                    <span className={pending ? "text-transparent" : undefined}>
+                      Send Followup
+                    </span>
+                  </button>
+                </Tooltip>
+              </div>
+              {!pending && callResult !== undefined && (
+                <p className="mx-auto mt-4 mb-0 text-center text-sm text-neutral-600 dark:text-neutral-400">
+                  Tool Response: {callResult}
+                </p>
+              )}
+              {!pending && sayHello.error !== undefined && (
+                <p className="mt-4 mb-0 text-sm text-red-500" role="alert">
+                  {sayHello.error.message}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+        {isMobile && !isFullscreen && (
+          <div className="relative w-full">
+            <HeroMeshOrb flow />
+            <button
+              type="button"
+              className="absolute bottom-3 left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={!canOpenExternal}
+              title="mcp-use on GitHub"
+              onClick={() =>
+                void openExternal({ url: "https://github.com/mcp-use/mcp-use" })
+              }
+            >
+              <span className="text-[10px] font-medium tracking-wide uppercase">
+                Built with
+              </span>
+              <Image
+                src="/logo-mcp-use.svg"
+                alt="mcp-use"
+                className="h-[1.15rem] w-auto max-w-[98px] object-contain"
+              />
+            </button>
+          </div>
+        )}
+      </div>
+    </ThemeProvider>
+  );
+}

package/dist/templates/{starter → mcp-server}/README.md

@@ -11,9 +11,11 @@ npm install
 npm run dev
 ```
 
-Open [http://localhost:3000/inspector](http://localhost:3000/inspector) with your browser to test your server.
+Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector) with your browser to test your server.
 
-You can start building by editing the entry file. Add tools, resources, and prompts — the server auto-reloads as you edit.
+You can start building by editing the entry file. Add tools and prompts — the server auto-reloads as you edit.
+
+Run `npm run typecheck` to refresh MCP view types and check the project with its local TypeScript compiler.
 
 ## Learn More
 

package/dist/templates/{starter → mcp-server}/index.ts

@@ -8,7 +8,7 @@ const server = new MCPServer({
   description: "An MCP server built with mcp-use",
 });
 
-server.tool(
+export const fetchWeather = server.tool(
   {
     name: "fetch-weather",
     description: "Return demo weather for a city",
@@ -29,24 +29,6 @@ server.tool(
   }
 );
 
-server.resource(
-  {
-    name: "settings",
-    uri: "config://settings",
-    description: "Example application settings",
-    mimeType: "application/json",
-  },
-  async (uri) => ({
-    contents: [
-      {
-        uri: uri.href,
-        mimeType: "application/json",
-        text: JSON.stringify({ theme: "dark", language: "en" }),
-      },
-    ],
-  })
-);
-
 server.prompt(
   {
     name: "review-code",

package/dist/templates/mcp-server/mcp-env.d.ts

@@ -0,0 +1,10 @@
+// Generated by mcp-use. Do not edit.
+declare module "*.css";
+
+declare module "mcp-use/react" {
+  interface Register {
+    tools: typeof import("./index.js");
+  }
+}
+
+export {};

package/dist/templates/mcp-server/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "mcp-use server",
+  "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "version": "1.0.0",
+  "description": "an mcp-use server",
+  "author": "mcp-use",
+  "license": "MIT",
+  "homepage": "https://github.com/mcp-use/mcp-use",
+  "keywords": [
+    "mcp",
+    "mcp-server",
+    "chatgpt plugins",
+    "claude connector",
+    "mcp-app",
+    "mcp-use",
+    "manufact"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "mcp-use build",
+    "dev": "mcp-use dev",
+    "start": "mcp-use start",
+    "deploy": "mcp-use deploy",
+    "typecheck": "mcp-use typecheck"
+  },
+  "dependencies": {
+    "mcp-use": "workspace:*",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.0",
+    "typescript": "^7.0.2"
+  }
+}

package/dist/templates/mcp-server/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "jsx": "react-jsx",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "noUncheckedSideEffectImports": false
+  },
+  "include": [
+    "index.ts",
+    "mcp-env.d.ts",
+    "src/**/*",
+    "views/**/*",
+    "server.ts",
+    ".mcp-use/**/*.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}