Add vscode config to disable proxying (#1197)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Add `enablePlaygroundProxy` setting to BAML VSCode extension to
optionally disable proxying, with updates to configuration, RPC, and
logic handling.
> 
>   - **Behavior**:
> - Adds `enablePlaygroundProxy` setting to `bamlConfigSchema` in
`bamlConfig.ts` and `package.json`.
> - Updates `WebPanelView.ts` to handle `GET_VSCODE_SETTINGS` command,
returning `enablePlaygroundProxy` status.
> - Modifies `EventListener.tsx` to filter out `BOUNDARY_PROXY_URL` from
environment variables if proxying is disabled.
>   - **RPC and API**:
> - Adds `GetVSCodeSettingsRequest` and `GetVSCodeSettingsResponse` to
`rpc.ts`.
> - Implements `getIsProxyEnabled()` in `vscode.ts` to fetch proxy
setting.
>   - **Testing and Hooks**:
> - Updates `useRunHooks` in `testHooks.ts` to check
`enablePlaygroundProxy` status.
>   - **Misc**:
>     - Minor logging changes in `vscode.ts` and `testHooks.ts`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 440a5da. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

typescript/playground-common/src/baml_wasm_web/EventListener.tsx

@@ -32,6 +32,22 @@ const wasmAtomAsync = atom(async () => {
   return wasm
 })
 
+const vscodeSettingsAtom = unwrap(
+  atom(async () => {
+    try {
+      const res = await vscode.getIsProxyEnabled()
+      return {
+        enablePlaygroundProxy: res,
+      }
+    } catch (e) {
+      console.error(`Error occurred while getting vscode settings:\n${e}`)
+      return {
+        enablePlaygroundProxy: false,
+      }
+    }
+  }),
+)
+
 export const wasmAtom = unwrap(wasmAtomAsync)
 
 const defaultEnvKeyValues: [string, string][] = (() => {
@@ -119,6 +135,13 @@ type Selection = {
 }
 
 export const envVarsAtom = atom((get) => {
+  const vscodeSettings = get(vscodeSettingsAtom)
+  if (vscodeSettings?.enablePlaygroundProxy !== undefined && !vscodeSettings?.enablePlaygroundProxy) {
+    // filter it out
+    const envKeyValues = get(envKeyValuesAtom)
+    return Object.fromEntries(envKeyValues.map(([k, v]) => [k, v]).filter(([k]) => k !== 'BOUNDARY_PROXY_URL'))
+  }
+
   const envKeyValues = get(envKeyValuesAtom)
   return Object.fromEntries(envKeyValues.map(([k, v]) => [k, v]))
 })

typescript/playground-common/src/baml_wasm_web/rpc.ts

@@ -94,11 +94,20 @@ export interface GetWebviewUriResponse {
   readError?: string
 }
 
+export interface GetVSCodeSettingsRequest {
+  vscodeCommand: 'GET_VSCODE_SETTINGS'
+}
+
+export interface GetVSCodeSettingsResponse {
+  enablePlaygroundProxy: boolean
+}
+
 type ApiPairs = [
   // Echo is included here as an example of what a request/response pair looks like
   [EchoRequest, EchoResponse],
   [GetBamlSrcRequest, GetBamlSrcResponse],
   [GetWebviewUriRequest, GetWebviewUriResponse],
+  [GetVSCodeSettingsRequest, GetVSCodeSettingsResponse],
 ]
 
 // Serialization for binary data (like images)

typescript/playground-common/src/baml_wasm_web/test_uis/testHooks.ts

@@ -1,6 +1,6 @@
 import { atom, useAtomValue } from 'jotai'
 import { atomFamily, useAtomCallback } from 'jotai/utils'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { selectedFunctionAtom, selectedRuntimeAtom } from '../EventListener'
 import type { WasmFunctionResponse, WasmTestResponse } from '@gloo-ai/baml-schema-wasm-web/baml_schema_build'
 import { vscode } from '../../utils/vscode'
@@ -86,6 +86,15 @@ function updateTestSuiteState(old_result: TestSuiteSummary, new_result: TestSuit
 export const useRunHooks = () => {
   const isRunning = useAtomValue(isRunningAtom)
 
+  const [enableProxy, setEnableProxy] = useState<undefined | boolean>()
+  useEffect(() => {
+    ;(async () => {
+      const res = await vscode.getIsProxyEnabled()
+      console.log('enableproxy call')
+      setEnableProxy(res)
+    })()
+  }, [])
+
   const runTest = useAtomCallback(
     useCallback(
       async (get, set, testNames: string[]) => {
@@ -241,7 +250,7 @@ export const useRunHooks = () => {
 
         set(isRunningAtom, false)
       },
-      [isRunningAtom, selectedRuntimeAtom, selectedFunctionAtom],
+      [isRunningAtom, selectedRuntimeAtom, selectedFunctionAtom, enableProxy],
     ),
   )
 

typescript/playground-common/src/utils/vscode.ts

@@ -1,4 +1,10 @@
-import { decodeBuffer, GetWebviewUriRequest, GetWebviewUriResponse } from '../baml_wasm_web/rpc'
+import {
+  decodeBuffer,
+  GetVSCodeSettingsRequest,
+  GetVSCodeSettingsResponse,
+  GetWebviewUriRequest,
+  GetWebviewUriResponse,
+} from '../baml_wasm_web/rpc'
 import type { WebviewApi } from 'vscode-webview'
 
 const RPC_TIMEOUT_MS = 5000
@@ -83,6 +89,14 @@ class VSCodeAPIWrapper {
     return resp.uri
   }
 
+  public async getIsProxyEnabled() {
+    const resp = await this.rpc<GetVSCodeSettingsRequest, GetVSCodeSettingsResponse>({
+      vscodeCommand: 'GET_VSCODE_SETTINGS',
+    })
+    console.log('vscode settings', resp)
+    return resp.enablePlaygroundProxy ?? true
+  }
+
   public rpc<TRequest, TResponse>(data: TRequest): Promise<TResponse> {
     return new Promise((resolve, reject) => {
       const rpcId = this.rpcId++

typescript/vscode-ext/packages/language-server/src/bamlConfig.ts

@@ -4,6 +4,7 @@ export const bamlConfigSchema = z
     cliPath: z.optional(z.string().nullable()).default(null),
     generateCodeOnSave: z.enum(['never', 'always']).default('always'),
     restartTSServerOnSave: z.boolean().default(false),
+    enablePlaygroundProxy: z.boolean().default(true),
     envCommand: z.string().default('env'),
     fileWatcher: z.boolean().default(false),
     trace: z.object({

typescript/vscode-ext/packages/package.json

@@ -52,6 +52,11 @@
           "default": false,
           "description": "Restart the TypeScript server when generating baml_client code, in case it's not reading the new generated types."
         },
+        "baml.enablePlaygroundProxy": {
+          "type": "boolean",
+          "default": true,
+          "description": "BAML Extension starts a localhost proxy for the playground to send requests to fix any CORS issues with some LLM providers. Disable this if you're having issues communicating with any APIs via the playground"
+        },
         "baml.fileWatcher": {
           "scope": "window",
           "type": "boolean",

typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts

@@ -3,7 +3,14 @@ import { type Disposable, Uri, ViewColumn, type Webview, type WebviewPanel, wind
 import * as vscode from 'vscode'
 import { getNonce } from '../utils/getNonce'
 import { getUri } from '../utils/getUri'
-import { EchoResponse, GetBamlSrcResponse, GetWebviewUriResponse, WebviewToVscodeRpc, encodeBuffer } from '../rpc'
+import {
+  EchoResponse,
+  GetBamlSrcResponse,
+  GetVSCodeSettingsResponse,
+  GetWebviewUriResponse,
+  WebviewToVscodeRpc,
+  encodeBuffer,
+} from '../rpc'
 
 import { type Config, adjectives, animals, colors, uniqueNamesGenerator } from 'unique-names-generator'
 import { URI } from 'vscode-uri'
@@ -309,6 +316,11 @@ export class WebPanelView {
             }
             this._panel.webview.postMessage({ rpcId: message.rpcId, rpcMethod: vscodeCommand, data: webviewUriResp })
             return
+          case 'GET_VSCODE_SETTINGS':
+            const responseData: GetVSCodeSettingsResponse = {
+              enablePlaygroundProxy: bamlConfig.config?.enablePlaygroundProxy ?? true,
+            }
+            this._panel.webview.postMessage({ rpcId: message.rpcId, rpcMethod: vscodeCommand, data: responseData })
         }
       },
       undefined,

typescript/vscode-ext/packages/vscode/src/plugins/language-server/index.ts

@@ -21,6 +21,7 @@ const packageJson = require('../../../../package.json') // eslint-disable-line
 const BamlConfig = z.optional(
   z.object({
     path: z.string().optional(),
+    enablePlaygroundProxy: z.boolean().default(true),
     trace: z.optional(
       z.object({
         server: z.string(),
@@ -29,7 +30,6 @@ const BamlConfig = z.optional(
   }),
 )
 type BamlConfig = z.infer<typeof BamlConfig>
-let config: BamlConfig | null = null
 let client: LanguageClient
 let serverModule: string
 let telemetry: TelemetryReporter
@@ -130,9 +130,9 @@ const sleep = (time: number) => {
 const getConfig = async () => {
   try {
     console.log('getting config')
-    const configResponse = await workspace.getConfiguration('baml')
+    const configResponse = workspace.getConfiguration('baml')
     console.log('configResponse ' + JSON.stringify(configResponse, null, 2))
-    config = BamlConfig.parse(configResponse)
+    bamlConfig.config = BamlConfig.parse(configResponse)
   } catch (e: any) {
     if (e instanceof Error) {
       console.log('Error getting config' + e.message + ' ' + e.stack)