Gate generated UI at MCP entry points

Author: RhysSullivan

apps/cli/src/main.ts

@@ -62,7 +62,9 @@ import { ExecutorApi } from "@executor-js/api";
 import {
   startServer,
   runMcpStdioServer,
-  getExecutor,
+  getExecutorBundle,
+  filterDynamicUiMcpPlugins,
+  isGeneratedUiMcpAppsEnabled,
   makeLocalEnvFeatureFlags,
 } from "@executor-js/local";
 import { makeQuickJsExecutor } from "@executor-js/runtime-quickjs";
@@ -763,7 +765,7 @@ const runStdioMcpSession = (input: { readonly elicitationMode: "browser" | "mode
         const restoreWebBaseUrl = installDefaultExecutorWebBaseUrl(baseUrl);
 
         try {
-          const executor = await getExecutor();
+          const executor = await getExecutorBundle();
           const server = await startServer({
             port,
             hostname: host,
@@ -779,11 +781,15 @@ const runStdioMcpSession = (input: { readonly elicitationMode: "browser" | "mode
     );
 
     try {
+      const featureFlags = makeLocalEnvFeatureFlags();
+      const generatedUiMcpAppsEnabled = yield* isGeneratedUiMcpAppsEnabled(featureFlags);
+      const mcpPlugins = filterDynamicUiMcpPlugins(web.executor.plugins, generatedUiMcpAppsEnabled);
+
       yield* Effect.promise(() =>
         runMcpStdioServer({
-          executor: web.executor,
+          executor: web.executor.executor,
           codeExecutor: makeQuickJsExecutor(),
-          featureFlags: makeLocalEnvFeatureFlags(),
+          plugins: mcpPlugins,
           renderUiFallbackUrl: (code) => {
             const url = new URL("/plugins/dynamic-ui/render", web.baseUrl);
             url.hash = `code=${encodeURIComponent(code)}`;

apps/cloud/src/mcp-session.ts

@@ -13,6 +13,7 @@ import { drizzle } from "drizzle-orm/postgres-js";
 import postgres, { type Sql } from "postgres";
 
 import { createExecutorMcpServer } from "@executor-js/host-mcp";
+import { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui";
 import {
   buildExecuteDescription,
   formatPausedExecution,
@@ -31,7 +32,7 @@ import { UserStoreService } from "./auth/context";
 import { resolveOrganization } from "./auth/resolve-organization";
 import { DbService, combinedSchema, resolveConnectionString } from "./services/db";
 import { makeExecutionStack } from "./services/execution-stack";
-import { PostHogFeatureFlags } from "./services/feature-flags";
+import { isGeneratedUiMcpAppsEnabled, PostHogFeatureFlags } from "./services/feature-flags";
 import { makeMcpWorkerTransport, type McpWorkerTransport } from "./services/mcp-worker-transport";
 import { DoTelemetryLive } from "./services/telemetry";
 import { captureCause } from "./observability";
@@ -355,11 +356,30 @@ export class McpSessionDO extends DurableObject {
   ) {
     const self = this;
     return Effect.gen(function* () {
+      const featureFlagContext = {
+        distinctId: sessionMeta.userId,
+        accountId: sessionMeta.userId,
+        organizationId: sessionMeta.organizationId,
+        groups: { organization: sessionMeta.organizationId },
+      };
+      const generatedUiMcpAppsEnabled = yield* isGeneratedUiMcpAppsEnabled(featureFlagContext).pipe(
+        Effect.catch((error: unknown) =>
+          Effect.sync(() => {
+            console.error("[executor:mcp] generated UI feature flag failed", error);
+            return false;
+          }),
+        ),
+      );
+      yield* Effect.annotateCurrentSpan({
+        "feature.generated_ui_mcp_apps.enabled": generatedUiMcpAppsEnabled,
+      });
+
       const { executor, engine, plugins } = yield* makeExecutionStack(
         sessionMeta.userId,
         sessionMeta.organizationId,
         sessionMeta.organizationName,
       );
+      const mcpPlugins = filterDynamicUiMcpPlugins(plugins, generatedUiMcpAppsEnabled);
       // Build the description here so the postgres query it runs
       // (`executor.sources.list`) lands as a child of
       // `McpSessionDO.createRuntime`. host-mcp would otherwise call
@@ -370,15 +390,9 @@ export class McpSessionDO extends DurableObject {
       const mcpServer = yield* createExecutorMcpServer({
         engine,
         description,
-        plugins,
+        plugins: mcpPlugins,
         parentSpan: () => self.currentRequestSpan ?? undefined,
         debug: env.EXECUTOR_MCP_DEBUG === "true",
-        featureFlagContext: {
-          distinctId: sessionMeta.userId,
-          accountId: sessionMeta.userId,
-          organizationId: sessionMeta.organizationId,
-          groups: { organization: sessionMeta.organizationId },
-        },
         renderUiFallbackUrl: (code) => {
           const origin = env.VITE_PUBLIC_SITE_URL ?? "https://executor.sh";
           const url = new URL("/plugins/dynamic-ui/render", origin);

apps/cloud/src/services/feature-flags.ts

@@ -1,10 +1,7 @@
 import { env } from "cloudflare:workers";
-import { Data, Effect, Layer, Option, Schema } from "effect";
-import {
-  FeatureFlags,
-  type FeatureFlagContext,
-  type FeatureFlagsShape,
-} from "@executor-js/host-mcp";
+import { Context, Data, Effect, Layer, Option, Schema } from "effect";
+
+import { DYNAMIC_UI_MCP_APPS_FEATURE_FLAG } from "@executor-js/plugin-dynamic-ui";
 
 class PostHogFeatureFlagError extends Data.TaggedError("PostHogFeatureFlagError")<{
   readonly cause: unknown;
@@ -15,7 +12,26 @@ const FeatureFlagsResponse = Schema.Struct({
 });
 const decodeFeatureFlagsResponse = Schema.decodeUnknownOption(FeatureFlagsResponse);
 
-const postHogHost = (): string => (env.POSTHOG_HOST ?? "https://us.i.posthog.com").replace(/\/$/, "");
+export type FeatureFlagContext = {
+  readonly distinctId?: string;
+  readonly accountId?: string;
+  readonly organizationId?: string;
+  readonly groups?: Record<string, string>;
+};
+
+export type FeatureFlagsShape = {
+  readonly isEnabled: (
+    flag: string,
+    context: FeatureFlagContext,
+  ) => Effect.Effect<boolean, PostHogFeatureFlagError>;
+};
+
+export class CloudFeatureFlags extends Context.Service<CloudFeatureFlags, FeatureFlagsShape>()(
+  "executor.cloud/FeatureFlags",
+) {}
+
+const postHogHost = (): string =>
+  (env.POSTHOG_HOST ?? "https://us.i.posthog.com").replace(/\/$/, "");
 
 const flagValueEnabled = (value: unknown): boolean =>
   value !== false && value !== null && value !== undefined;
@@ -63,4 +79,11 @@ export const makePostHogFeatureFlags = (): FeatureFlagsShape => ({
     }).pipe(Effect.withSpan("feature_flags.posthog.is_enabled", { attributes: { flag } })),
 });
 
-export const PostHogFeatureFlags = Layer.succeed(FeatureFlags, makePostHogFeatureFlags());
+export const isGeneratedUiMcpAppsEnabled = (context: FeatureFlagContext) =>
+  CloudFeatureFlags.asEffect().pipe(
+    Effect.flatMap((featureFlags) =>
+      featureFlags.isEnabled(DYNAMIC_UI_MCP_APPS_FEATURE_FLAG, context),
+    ),
+  );
+
+export const PostHogFeatureFlags = Layer.succeed(CloudFeatureFlags, makePostHogFeatureFlags());

apps/local/src/index.ts

@@ -8,10 +8,16 @@ export {
   createExecutorHandle,
   disposeExecutor,
   getExecutor,
+  getExecutorBundle,
   reloadExecutor,
   type ExecutorHandle,
   type LocalExecutor,
 } from "./server/executor";
 export { createMcpRequestHandler, runMcpStdioServer, type McpRequestHandler } from "./server/mcp";
-export { makeLocalEnvFeatureFlags, LocalEnvFeatureFlags } from "./server/feature-flags";
+export {
+  isGeneratedUiMcpAppsEnabled,
+  makeLocalEnvFeatureFlags,
+  LocalEnvFeatureFlags,
+} from "./server/feature-flags";
+export { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui";
 export { startServer, type StartServerOptions, type ServerInstance } from "./serve";

apps/local/src/server/feature-flags.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "@effect/vitest";
+import { Effect } from "effect";
+
+import { isGeneratedUiMcpAppsEnabled, makeLocalEnvFeatureFlags } from "./feature-flags";
+
+describe("local feature flags", () => {
+  it.effect("keeps generated UI MCP apps disabled by default", () =>
+    Effect.gen(function* () {
+      const enabled = yield* isGeneratedUiMcpAppsEnabled(makeLocalEnvFeatureFlags({}));
+
+      expect(enabled).toBe(false);
+    }),
+  );
+
+  it.effect("enables generated UI MCP apps from the canonical env flag", () =>
+    Effect.gen(function* () {
+      const enabled = yield* isGeneratedUiMcpAppsEnabled(
+        makeLocalEnvFeatureFlags({ EXECUTOR_FEATURE_GENERATED_UI_MCP_APPS: "true" }),
+      );
+
+      expect(enabled).toBe(true);
+    }),
+  );
+
+  it.effect("ignores unrelated env variables", () =>
+    Effect.gen(function* () {
+      const enabled = yield* isGeneratedUiMcpAppsEnabled(
+        makeLocalEnvFeatureFlags({ EXECUTOR_DYNAMIC_UI: "1" }),
+      );
+
+      expect(enabled).toBe(false);
+    }),
+  );
+});

apps/local/src/server/feature-flags.ts

@@ -1,25 +1,29 @@
-import { Effect, Layer } from "effect";
-import {
-  FEATURE_FLAG_GENERATED_UI_MCP_APPS,
-  FeatureFlags,
-  type FeatureFlagsShape,
-} from "@executor-js/host-mcp";
+import { Context, Effect, Layer } from "effect";
+
+import { DYNAMIC_UI_MCP_APPS_FEATURE_FLAG } from "@executor-js/plugin-dynamic-ui";
+
+export type FeatureFlagContext = Record<string, never>;
+
+export type FeatureFlagsShape = {
+  readonly isEnabled: (flag: string, context: FeatureFlagContext) => Effect.Effect<boolean, never>;
+};
+
+export class LocalFeatureFlags extends Context.Service<LocalFeatureFlags, FeatureFlagsShape>()(
+  "@executor-js/local/FeatureFlags",
+) {}
 
 const truthy = (value: string | undefined): boolean =>
   value === "1" || value === "true" || value === "TRUE" || value === "yes" || value === "on";
 
 const envNameForFlag = (flag: string): string =>
-  `EXECUTOR_FEATURE_${flag.replaceAll(/[^A-Za-z0-9]+/g, "_").replace(/^_+|_+$/g, "").toUpperCase()}`;
+  `EXECUTOR_FEATURE_${flag
+    .replaceAll(/[^A-Za-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .toUpperCase()}`;
 
 const readFlag = (flag: string, env: NodeJS.ProcessEnv): boolean => {
   const generic = env[envNameForFlag(flag)];
-  if (generic !== undefined) return truthy(generic);
-
-  if (flag === FEATURE_FLAG_GENERATED_UI_MCP_APPS) {
-    return truthy(env.EXECUTOR_GENERATED_UI) || truthy(env.EXECUTOR_DYNAMIC_UI);
-  }
-
-  return false;
+  return generic !== undefined ? truthy(generic) : false;
 };
 
 export const makeLocalEnvFeatureFlags = (
@@ -28,4 +32,7 @@ export const makeLocalEnvFeatureFlags = (
   isEnabled: (flag) => Effect.sync(() => readFlag(flag, env)),
 });
 
-export const LocalEnvFeatureFlags = Layer.succeed(FeatureFlags, makeLocalEnvFeatureFlags());
+export const isGeneratedUiMcpAppsEnabled = (featureFlags: FeatureFlagsShape) =>
+  featureFlags.isEnabled(DYNAMIC_UI_MCP_APPS_FEATURE_FLAG, {});
+
+export const LocalEnvFeatureFlags = Layer.succeed(LocalFeatureFlags, makeLocalEnvFeatureFlags());

apps/local/src/server/main.ts

@@ -12,10 +12,11 @@ import {
 } from "@executor-js/api/server";
 import { createExecutionEngine } from "@executor-js/execution";
 import { makeQuickJsExecutor } from "@executor-js/runtime-quickjs";
+import { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui";
 import { getExecutorBundle } from "./executor";
 import { createMcpRequestHandler, type McpRequestHandler } from "./mcp";
 import { ErrorCaptureLive } from "./observability";
-import { makeLocalEnvFeatureFlags } from "./feature-flags";
+import { isGeneratedUiMcpAppsEnabled, makeLocalEnvFeatureFlags } from "./feature-flags";
 
 // ---------------------------------------------------------------------------
 // Local server API.
@@ -99,7 +100,12 @@ export const createServerHandlers = async (): Promise<ServerHandlers> => {
     dispose: api.dispose,
   };
 
-  const mcp = createMcpRequestHandler({ engine, plugins, featureFlags: makeLocalEnvFeatureFlags() });
+  const featureFlags = makeLocalEnvFeatureFlags();
+  const generatedUiMcpAppsEnabled = await Effect.runPromise(
+    isGeneratedUiMcpAppsEnabled(featureFlags),
+  );
+  const mcpPlugins = filterDynamicUiMcpPlugins(plugins, generatedUiMcpAppsEnabled);
+  const mcp = createMcpRequestHandler({ engine, plugins: mcpPlugins });
 
   return { api: apiHandler, mcp };
 };

apps/local/src/server/mcp.ts

@@ -169,7 +169,8 @@ export const createMcpRequestHandler = (config: ExecutorMcpServerConfig): McpReq
           createExecutorMcpServer({
             ...config,
             renderUiFallbackUrl:
-              config.renderUiFallbackUrl ?? ((code) => renderUiFallbackUrlForRequest(request, code)),
+              config.renderUiFallbackUrl ??
+              ((code) => renderUiFallbackUrlForRequest(request, code)),
             browserApprovalStore: {
               takeResponse: (executionId) =>
                 Effect.sync(() => {

packages/core/execution/src/description.test.ts

@@ -67,6 +67,8 @@ describe("buildExecuteDescription", () => {
 
       // Stable anchor from the workflow preamble.
       expect(description).toContain("Execute TypeScript in a sandboxed runtime");
+      expect(description).not.toContain("## Generative UI");
+      expect(description).not.toContain("render-ui");
       // The namespaces section header.
       expect(description).toContain("## Available namespaces");
       // Each source renders with its ACTUAL id, without display labels or plugin ids.
@@ -93,6 +95,7 @@ describe("buildExecuteDescription", () => {
       const description = yield* buildExecuteDescription(executor);
 
       expect(description).toContain("Execute TypeScript in a sandboxed runtime");
+      expect(description).not.toContain("## Generative UI");
       expect(description).not.toContain("## Available namespaces");
     }),
   );

packages/core/execution/src/description.ts

@@ -58,32 +58,6 @@ const formatDescription = (sources: readonly Source[]): string => {
     "- Do not use `fetch` — all API calls go through `tools.*`.",
     "- If execution pauses for interaction, resume it with the returned `resumePayload`.",
     "- TypeScript type syntax (`: T`, `as T`, generics, interfaces, type aliases) is stripped before execution — feel free to write idiomatic TypeScript using the shapes from `tools.describe.tool()`. Decorators and `enum` are not supported.",
-    "",
-    "## Generative UI",
-    "",
-    "When it would be helpful to show an interactive UI, write a React component named `App` with JSX in the `code` parameter. It renders in an iframe alongside the conversation.",
-    "",
-    "**No imports** — everything is already in scope:",
-    "- React: `useState`, `useEffect`, `useRef`, `useCallback`, `useMemo`",
-    "- TanStack Query v5: `useQuery`, `useMutation`, `useQueryClient`, `queryOptions`, `mutationOptions`, `skipToken`; the component is already wrapped in `QueryClientProvider`.",
-    "- Do not redeclare or destructure provided globals. Do not write `const { useState } = React`; use `useState(...)` directly or `React.useState(...)`.",
-    "- Fetch live data with TanStack options from the tool proxy: `useQuery(tools.<namespace>.<tool>.queryOptions(args))`. Do not call tools before generating the UI and paste returned data into JSX.",
-    "- For user-triggered writes or actions, use `useMutation(tools.<namespace>.<tool>.mutationOptions({ onSuccess }))` and call `mutate(input)` from event handlers.",
-    "- Invalidate or refetch reads with `useQueryClient()` and stable keys from `tools.<namespace>.<tool>.queryKey(args)`.",
-    "- Use the discovered output shape exactly. Do not invent wrapper fields like `data.domain` or `data.items` unless the schema/sample shows them.",
-    "- For toggles and switches, mutate with the checked value from the event instead of inverting possibly stale query data.",
-    "- For optimistic writes, use TanStack `onMutate` / `onError` / `onSettled`: cancel the query, snapshot old data, `setQueryData`, roll back on error, then invalidate.",
-    "- Only hardcode small display constants like labels, colors, tab names, and chart configuration. Never embed tool response rows, API results, summaries, or dashboard data as literals in the component.",
-    "- Always render loading and error states from `useQuery` / `useMutation`; do not replace them with hardcoded fallback data.",
-    "- Tools: `tools.<namespace>.<tool>(args)` — call any configured API tool (never use raw `fetch`). Tool helpers: `.queryOptions(args, options)`, `.mutationOptions(options)`, `.queryKey(args)`, `.pathKey()`, and `.mutationKey()`.",
-    "- shadcn/ui components available by name: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button, Input, Textarea, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Checkbox, Switch, Slider, Toggle, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge, Avatar, AvatarFallback, Alert, AlertTitle, AlertDescription, Dialog, Sheet, Popover, Tooltip, Separator, ScrollArea, Skeleton, Progress, Accordion, AccordionItem, AccordionTrigger, AccordionContent, DropdownMenu + sub-components",
-    "- Charts (Recharts): BarChart, Bar, LineChart, Line, AreaChart, Area, PieChart, Pie, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Legend, ChartContainer, ChartTooltip, ChartTooltipContent",
-    "- Icons (Lucide): Plus, Minus, Check, X, Search, Loader2, AlertCircle, ExternalLink, Copy, Trash2, Edit, Settings, User, Globe, Star, TrendingUp, Activity, Database, Shield, Package, and more",
-    "- Utility: `cn()` for className merging, `run(code)` escape hatch for multi-step tool composition",
-    "- Use Tailwind classes for styling. The UI must look good in both light and dark mode — the user's system theme is applied automatically.",
-    "- Always use `dark:` variants when applying custom colors: e.g. `bg-white dark:bg-gray-900`, `text-gray-900 dark:text-gray-100`. Or prefer theme variables that adapt automatically: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-muted`, `text-muted-foreground`, `bg-primary`, `text-primary-foreground`, `bg-secondary`, `text-secondary-foreground`, `bg-accent`, `text-accent-foreground`, `bg-destructive`, `border-border`, `ring-ring`.",
-    "- Never use hardcoded colors without a `dark:` counterpart — e.g. `bg-gray-50` alone will look wrong in dark mode.",
-    "- The UI container defaults to `maxHeight: 800` (pixels). Override by declaring `const config = { maxHeight: 400 }` for small widgets or `const config = { maxHeight: 1000 }` for large lists/tables.",
   ];
 
   if (sources.length > 0) {