diff --git a/connect-react-demo/app/actions/backendClient.ts b/connect-react-demo/app/actions/backendClient.ts
index 794169a..f107ec9 100644
--- a/connect-react-demo/app/actions/backendClient.ts
+++ b/connect-react-demo/app/actions/backendClient.ts
@@ -7,6 +7,14 @@ export type FetchTokenOpts = {
   externalUserId: string
 }
 
+export type ProxyRequestOpts = {
+  externalUserId: string
+  accountId: string
+  url: string
+  method: string
+  data?: any
+}
+
 const allowedOrigins = ([
   process.env.VERCEL_URL,
   process.env.VERCEL_BRANCH_URL,
@@ -32,3 +40,38 @@ const _fetchToken = async (opts: FetchTokenOpts) => {
 
 // export const fetchToken = unstable_cache(_fetchToken, [], { revalidate: 3600 })
 export const fetchToken = _fetchToken
+
+const _proxyRequest = async (opts: ProxyRequestOpts) => {
+  const serverClient = backendClient()
+
+  try {
+    const proxyOptions = {
+      searchParams: {
+        external_user_id: opts.externalUserId,
+        account_id: opts.accountId
+      }
+    }
+
+    const targetRequest = {
+      url: opts.url,
+      options: {
+        method: opts.method as "GET" | "POST" | "PUT" | "DELETE" | "PATCH",
+        ...(opts.data && { body: JSON.stringify(opts.data) }),
+        ...(opts.data && { headers: { "Content-Type": "application/json" } })
+      }
+    }
+
+    const resp = await serverClient.makeProxyRequest(proxyOptions, targetRequest);
+    return resp
+  } catch (error: any) {
+    // Re-throw with structured error info
+    throw {
+      message: error.message || 'Proxy request failed',
+      status: error.response?.status,
+      data: error.response?.data,
+      headers: error.response?.headers
+    }
+  }
+}
+
+export const proxyRequest = _proxyRequest
diff --git a/connect-react-demo/app/components/ComponentTypeSelector.tsx b/connect-react-demo/app/components/ComponentTypeSelector.tsx
index 4930592..2af4929 100644
--- a/connect-react-demo/app/components/ComponentTypeSelector.tsx
+++ b/connect-react-demo/app/components/ComponentTypeSelector.tsx
@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
-import { IoCubeSharp, IoFlashOutline } from "react-icons/io5"
+import { IoCubeSharp, IoFlashOutline, IoGlobe } from "react-icons/io5"
 import { TOGGLE_STYLES } from "@/lib/constants/ui"
 
 interface ComponentTypeSelectorProps {
-  selectedType: "action" | "trigger"
-  onTypeChange: (type: "action" | "trigger") => void
+  selectedType: "action" | "trigger" | "proxy"
+  onTypeChange: (type: "action" | "trigger" | "proxy") => void
 }
 
 const COMPONENT_TYPES = [
@@ -20,6 +20,12 @@ const COMPONENT_TYPES = [
     icon: IoFlashOutline,
     description: "React to events and webhooks"
   },
+  { 
+    value: "proxy", 
+    label: "Proxy", 
+    icon: IoGlobe,
+    description: "Make direct API requests through authenticated accounts"
+  },
 ] as const
 
 export function ComponentTypeSelector({ selectedType, onTypeChange }: ComponentTypeSelectorProps) {
@@ -42,7 +48,7 @@ export function ComponentTypeSelector({ selectedType, onTypeChange }: ComponentT
               <type.icon className="h-3 w-3" />
               {type.label}
             </button>
-            {index === 0 && <div className={TOGGLE_STYLES.separator} />}
+            {index < COMPONENT_TYPES.length - 1 && <div className={TOGGLE_STYLES.separator} />}
           </div>
         ))}
       </div>
diff --git a/connect-react-demo/app/components/ConfigPanel.tsx b/connect-react-demo/app/components/ConfigPanel.tsx
index fc12b43..4d73f00 100644
--- a/connect-react-demo/app/components/ConfigPanel.tsx
+++ b/connect-react-demo/app/components/ConfigPanel.tsx
@@ -182,6 +182,10 @@ export const ConfigPanel = () => {
     propNames,
     webhookUrlValidationAttempted,
     setWebhookUrlValidationAttempted,
+    editableExternalUserId,
+    setEditableExternalUserId,
+    accountId,
+    setAccountId,
   } = useAppState()
   const id1 = useId();
   const id2 = useId();
@@ -305,7 +309,7 @@ export const ConfigPanel = () => {
                 <div className="pb-1.5 mb-1.5 border-b border-neutral-200 font-medium">
                   <span className="text-[#d73a49]">type</span>{" "}
                   <span className="text-[#6f42c1]">componentType</span> ={" "}
-                  <span className="text-[#d73a49]">'action' | 'trigger'</span>
+                  <span className="text-[#d73a49]">'action' | 'trigger' | 'proxy'</span>
                 </div>
 
                 <div className="font-sans text-neutral-600 py-1 text-[13px] leading-normal font-normal">
@@ -334,48 +338,52 @@ export const ConfigPanel = () => {
           />
         </div>
       </div>
-      <PropertyItem
-        name="app"
-        type="string"
-        description="App to connect to"
-        required={true}
-      >
-        <CustomizeProvider customization={dropdownCustomization}>
-          <SelectApp
-            value={selectedApp}
-            onChange={(app) => {
-              app
-                ? setSelectedAppSlug(app.name_slug)
-                : removeSelectedAppSlug()
-            }}
-          />
-        </CustomizeProvider>
-      </PropertyItem>
-      <PropertyItem
-        name={selectedComponentType === "action" ? "actionId" : "triggerId"}
-        type="string"
-        description={`${selectedComponentType === "action" ? "Action" : "Trigger"} to use`}
-        required={true}
-      >
-        <CustomizeProvider customization={dropdownCustomization}>
-          {selectedApp ? (
-            <SelectComponent
-              app={selectedApp}
-              componentType={selectedComponentType}
-              value={selectedComponent}
-              onChange={(comp) => {
-                comp
-                  ? setSelectedComponentKey(comp.key)
-                  : removeSelectedComponentKey()
+      {(selectedComponentType === "action" || selectedComponentType === "trigger") && (
+        <PropertyItem
+          name="app"
+          type="string"
+          description="App to connect to"
+          required={true}
+        >
+          <CustomizeProvider customization={dropdownCustomization}>
+            <SelectApp
+              value={selectedApp}
+              onChange={(app) => {
+                app
+                  ? setSelectedAppSlug(app.name_slug)
+                  : removeSelectedAppSlug()
               }}
             />
-          ) : (
-            <div className="w-full px-3 py-1.5 text-sm text-gray-500 border rounded bg-gray-50">
-              Loading components...
-            </div>
-          )}
-        </CustomizeProvider>
-      </PropertyItem>
+          </CustomizeProvider>
+        </PropertyItem>
+      )}
+      {selectedComponentType !== "proxy" && (
+        <PropertyItem
+          name={selectedComponentType === "action" ? "actionId" : "triggerId"}
+          type="string"
+          description={`${selectedComponentType === "action" ? "Action" : "Trigger"} to use`}
+          required={true}
+        >
+          <CustomizeProvider customization={dropdownCustomization}>
+            {selectedApp ? (
+              <SelectComponent
+                app={selectedApp}
+                componentType={selectedComponentType}
+                value={selectedComponent}
+                onChange={(comp) => {
+                  comp
+                    ? setSelectedComponentKey(comp.key)
+                    : removeSelectedComponentKey()
+                }}
+              />
+            ) : (
+              <div className="w-full px-3 py-1.5 text-sm text-gray-500 border rounded bg-gray-50">
+                Loading components...
+              </div>
+            )}
+          </CustomizeProvider>
+        </PropertyItem>
+      )}
       {selectedComponentType === "trigger" && (
         <PropertyItem
           name="webhookUrl"
@@ -424,12 +432,36 @@ export const ConfigPanel = () => {
         description="Authenticated user identifier"
         required={true}
       >
-        <input
-          value={externalUserId || ""}
-          className="w-full px-3 py-1.5 text-sm font-mono border rounded bg-zinc-50/50"
-          readOnly
-        />
+        {selectedComponentType === "proxy" ? (
+          <input
+            value={editableExternalUserId || ""}
+            onChange={(e) => setEditableExternalUserId(e.target.value)}
+            placeholder="Enter external user ID"
+            className="w-full px-3 py-1.5 text-sm font-mono border rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
+          />
+        ) : (
+          <input
+            value={externalUserId || ""}
+            className="w-full px-3 py-1.5 text-sm font-mono border rounded bg-zinc-50/50"
+            readOnly
+          />
+        )}
       </PropertyItem>
+      {selectedComponentType === "proxy" && (
+        <PropertyItem
+          name="accountId"
+          type="string"
+          description="Account ID for authenticated requests"
+          required={true}
+        >
+          <input
+            value={accountId || ""}
+            onChange={(e) => setAccountId(e.target.value)}
+            placeholder="Enter account ID"
+            className="w-full px-3 py-1.5 text-sm font-mono border rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
+          />
+        </PropertyItem>
+      )}
     </div>
   )
 
@@ -566,29 +598,33 @@ export const ConfigPanel = () => {
           {basicFormControls}
           
           {/* Desktop: Show with section header */}
-          <div className="hidden md:block mt-6">
-            <div className="border-t border-gray-200 pt-6">
-              <h3 className="text-sm font-medium text-gray-700 mb-4">Additional Config Options</h3>
-              {advancedFormControls}
+          {selectedComponentType !== "proxy" && (
+            <div className="hidden md:block mt-6">
+              <div className="border-t border-gray-200 pt-6">
+                <h3 className="text-sm font-medium text-gray-700 mb-4">Additional Config Options</h3>
+                {advancedFormControls}
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Mobile: Collapsible */}
-          <div className="md:hidden mt-4">
-            <Collapsible open={showAdvanced} onOpenChange={setShowAdvanced}>
-              <CollapsibleTrigger className="flex items-center justify-between w-full py-2 px-3 text-sm font-medium text-neutral-500 hover:text-neutral-600 hover:bg-neutral-25 rounded border border-neutral-150">
-                <div className="flex items-center gap-2">
-                  <IoSettingsOutline className="h-4 w-4" />
-                  More options
-                </div>
-                <IoChevronDown className={cn("h-4 w-4 transition-transform", showAdvanced && "rotate-180")} />
-              </CollapsibleTrigger>
-              
-              <CollapsibleContent>
-                {advancedFormControls}
-              </CollapsibleContent>
-            </Collapsible>
-          </div>
+          {selectedComponentType !== "proxy" && (
+            <div className="md:hidden mt-4">
+              <Collapsible open={showAdvanced} onOpenChange={setShowAdvanced}>
+                <CollapsibleTrigger className="flex items-center justify-between w-full py-2 px-3 text-sm font-medium text-neutral-500 hover:text-neutral-600 hover:bg-neutral-25 rounded border border-neutral-150">
+                  <div className="flex items-center gap-2">
+                    <IoSettingsOutline className="h-4 w-4" />
+                    More options
+                  </div>
+                  <IoChevronDown className={cn("h-4 w-4 transition-transform", showAdvanced && "rotate-180")} />
+                </CollapsibleTrigger>
+                
+                <CollapsibleContent>
+                  {advancedFormControls}
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+          )}
           
           {triggerInfo}
         </div>
diff --git a/connect-react-demo/app/components/DemoPanel.tsx b/connect-react-demo/app/components/DemoPanel.tsx
index 85d78d5..263edc0 100644
--- a/connect-react-demo/app/components/DemoPanel.tsx
+++ b/connect-react-demo/app/components/DemoPanel.tsx
@@ -4,6 +4,7 @@ import type { ConfigurableProps } from "@pipedream/sdk"
 import { useAppState } from "@/lib/app-state"
 import { PageSkeleton } from "./PageSkeleton"
 import { TerminalCollapsible } from "./TerminalCollapsible"
+import { ProxyRequestBuilder } from "./ProxyRequestBuilder"
 
 export const DemoPanel = () => {
   const frontendClient = useFrontendClient()
@@ -176,23 +177,27 @@ export const DemoPanel = () => {
           >
             <PageSkeleton customizationOption={customizationOption}>
               <div className="p-4 sm:p-6 space-y-4">
-                <CustomizeProvider {...customizationOption.customization}>
-                  {selectedComponentKey && (
-                    <ComponentFormContainer
-                      externalUserId={externalUserId}
-                      componentKey={selectedComponentKey}
-                      configuredProps={configuredProps}
-                      onUpdateConfiguredProps={setConfiguredProps}
-                      hideOptionalProps={hideOptionalProps}
-                      propNames={debouncedPropNames}
-                      enableDebugging={enableDebugging}
-                      onSubmit={handleSubmit}
-                      onUpdateDynamicProps={handleDynamicProps}
-                      sdkResponse={sdkErrors}
-                      // oauthAppConfig={oauthAppConfig}
-                    />
-                  )}
-                </CustomizeProvider>
+                {selectedComponentType === "proxy" ? (
+                  <ProxyRequestBuilder />
+                ) : (
+                  <CustomizeProvider {...customizationOption.customization}>
+                    {selectedComponentKey && (
+                      <ComponentFormContainer
+                        externalUserId={externalUserId}
+                        componentKey={selectedComponentKey}
+                        configuredProps={configuredProps}
+                        onUpdateConfiguredProps={setConfiguredProps}
+                        hideOptionalProps={hideOptionalProps}
+                        propNames={debouncedPropNames}
+                        enableDebugging={enableDebugging}
+                        onSubmit={handleSubmit}
+                        onUpdateDynamicProps={handleDynamicProps}
+                        sdkResponse={sdkErrors}
+                        // oauthAppConfig={oauthAppConfig}
+                      />
+                    )}
+                  </CustomizeProvider>
+                )}
               </div>
             </PageSkeleton>
           </div>
diff --git a/connect-react-demo/app/components/ProxyRequestBuilder.tsx b/connect-react-demo/app/components/ProxyRequestBuilder.tsx
new file mode 100644
index 0000000..38ce305
--- /dev/null
+++ b/connect-react-demo/app/components/ProxyRequestBuilder.tsx
@@ -0,0 +1,251 @@
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { useAppState } from "@/lib/app-state"
+import { proxyRequest } from "@/app/actions/backendClient"
+
+const HTTP_METHODS = [
+  "GET",
+  "POST", 
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD",
+  "OPTIONS"
+] as const
+
+export function ProxyRequestBuilder() {
+  const {
+    proxyUrl,
+    setProxyUrl,
+    proxyMethod,
+    setProxyMethod,
+    proxyBody,
+    setProxyBody,
+    editableExternalUserId,
+    accountId,
+    selectedApp
+  } = useAppState()
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [response, setResponse] = useState<any>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!proxyUrl.trim()) {
+      setError("URL is required")
+      return
+    }
+
+    if (!editableExternalUserId?.trim()) {
+      setError("External User ID is required")
+      return
+    }
+
+    if (!accountId?.trim()) {
+      setError("Account ID is required")
+      return
+    }
+
+
+    setIsLoading(true)
+    setError(null)
+    setResponse(null)
+
+    try {
+      // Parse body if it's provided for POST/PUT/PATCH requests
+      let parsedBody: any = undefined
+      if (proxyBody.trim() && ["POST", "PUT", "PATCH"].includes(proxyMethod)) {
+        try {
+          parsedBody = JSON.parse(proxyBody)
+        } catch (parseError) {
+          setError("Invalid JSON in request body")
+          setIsLoading(false)
+          return
+        }
+      }
+
+      // Make the actual proxy request using server action
+      const proxyResponse = await proxyRequest({
+        externalUserId: editableExternalUserId,
+        accountId: accountId,
+        url: proxyUrl,
+        method: proxyMethod,
+        ...(parsedBody && { data: parsedBody })
+      })
+      
+      setResponse({
+        status: 200, // Pipedream proxy returns 200 on success
+        data: proxyResponse, // The entire response is the data
+        headers: {}, // Headers might not be included in the response
+        request: {
+          url: proxyUrl,
+          method: proxyMethod,
+          body: parsedBody,
+          externalUserId: editableExternalUserId,
+          accountId
+        }
+      })
+    } catch (err: any) {
+      setError(err?.message || "Request failed")
+      
+      // If there's response data in the error, show it
+      if (err?.status || err?.data) {
+        setResponse({
+          status: err.status || 500,
+          error: true,
+          data: err.data,
+          headers: err.headers,
+          request: {
+            url: proxyUrl,
+            method: proxyMethod,
+            body: parsedBody,
+            externalUserId: editableExternalUserId,
+            accountId
+          }
+        })
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const showBodyField = ["POST", "PUT", "PATCH"].includes(proxyMethod)
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">API Request Builder</h3>
+          <p className="text-sm text-gray-600 mb-4">
+            Make direct API requests through your authenticated account.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="proxy-url" className="text-sm font-medium">
+              Request URL or Path
+            </Label>
+            <Input
+              id="proxy-url"
+              type="text"
+              value={proxyUrl}
+              onChange={(e) => setProxyUrl(e.target.value)}
+              placeholder="https://api.example.com/endpoint%20or%20/api/v1/users"
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-gray-500">
+              Enter a full URL or a path (e.g., /api/v1/users)
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="proxy-method" className="text-sm font-medium">
+              HTTP Method
+            </Label>
+            <Select value={proxyMethod} onValueChange={setProxyMethod}>
+              <SelectTrigger id="proxy-method">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {HTTP_METHODS.map((method) => (
+                  <SelectItem key={method} value={method}>
+                    {method}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {showBodyField && (
+            <div className="space-y-2">
+              <Label htmlFor="proxy-body" className="text-sm font-medium">
+                Request Body
+              </Label>
+              <textarea
+                id="proxy-body"
+                value={proxyBody}
+                onChange={(e) => setProxyBody(e.target.value)}
+                placeholder='{"key": "value"}'
+                className="w-full h-32 px-3 py-2 text-sm font-mono border border-gray-300 rounded-md resize-y focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              <p className="text-xs text-gray-500">
+                Enter JSON data for the request body
+              </p>
+            </div>
+          )}
+
+          <Button 
+            type="submit" 
+            disabled={isLoading || !proxyUrl.trim() || !editableExternalUserId?.trim() || !accountId?.trim()}
+            className="w-full"
+          >
+            {isLoading ? "Sending Request..." : `Send ${proxyMethod} Request`}
+          </Button>
+        </form>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-sm text-red-700 font-medium">Error</p>
+          <p className="text-sm text-red-600">{error}</p>
+        </div>
+      )}
+
+      {response && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-gray-900">Response</h4>
+            <div className={`px-2 py-1 rounded text-xs font-medium ${
+              response.error 
+                ? 'bg-red-100 text-red-700' 
+                : response.status >= 200 && response.status < 300
+                ? 'bg-green-100 text-green-700'
+                : response.status >= 400
+                ? 'bg-red-100 text-red-700'
+                : 'bg-gray-100 text-gray-700'
+            }`}>
+              Status: {response.status}
+            </div>
+          </div>
+          
+          {response.headers && (
+            <div>
+              <h5 className="text-xs font-medium text-gray-700 mb-2">Headers</h5>
+              <div className="p-3 bg-gray-50 border border-gray-200 rounded text-xs font-mono max-h-32 overflow-y-auto">
+                <pre className="text-gray-600 whitespace-pre-wrap">
+                  {JSON.stringify(response.headers, null, 2)}
+                </pre>
+              </div>
+            </div>
+          )}
+          
+          <div>
+            <h5 className="text-xs font-medium text-gray-700 mb-2">Response Data</h5>
+            <div className="p-3 bg-gray-50 border border-gray-200 rounded text-xs font-mono max-h-64 overflow-y-auto">
+              <pre className="text-gray-700 whitespace-pre-wrap">
+                {JSON.stringify(response.data, null, 2)}
+              </pre>
+            </div>
+          </div>
+          
+          <details className="text-xs">
+            <summary className="cursor-pointer text-gray-500 hover:text-gray-700 font-medium">
+              Request Details
+            </summary>
+            <div className="mt-2 p-3 bg-gray-50 border border-gray-200 rounded font-mono">
+              <pre className="text-gray-600 whitespace-pre-wrap">
+                {JSON.stringify(response.request, null, 2)}
+              </pre>
+            </div>
+          </details>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/connect-react-demo/app/components/config/AuthSection.tsx b/connect-react-demo/app/components/config/AuthSection.tsx
index 81f4868..9be02c7 100644
--- a/connect-react-demo/app/components/config/AuthSection.tsx
+++ b/connect-react-demo/app/components/config/AuthSection.tsx
@@ -4,27 +4,63 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import { Input } from "@/components/ui/input"
 
 interface AuthSectionProps {
   externalUserId: string
+  selectedComponentType: string
+  editableExternalUserId?: string
+  setEditableExternalUserId?: (value: string) => void
+  accountId?: string
+  setAccountId?: (value: string) => void
 }
 
-export const AuthSection = ({ externalUserId }: AuthSectionProps) => (
+export const AuthSection = ({ 
+  externalUserId, 
+  selectedComponentType,
+  editableExternalUserId,
+  setEditableExternalUserId,
+  accountId,
+  setAccountId
+}: AuthSectionProps) => (
   <div className="px-4 py-3">
-    <div className="grid grid-cols-[140px,1fr] items-center gap-3">
-      <div className="text-[13px] font-medium text-zinc-700">User ID</div>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="px-2 py-1.5 bg-zinc-50 rounded text-[13px] font-mono text-zinc-600 border border-zinc-200 select-all truncate">
-              {externalUserId}
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="top" className="font-mono">
-            {externalUserId}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+    <div className="space-y-3">
+      <div className="grid grid-cols-[140px,1fr] items-center gap-3">
+        <div className="text-[13px] font-medium text-zinc-700">User ID</div>
+        {selectedComponentType === "proxy" ? (
+          <Input
+            value={editableExternalUserId || ""}
+            onChange={(e) => setEditableExternalUserId?.(e.target.value)}
+            placeholder="Enter external user ID"
+            className="text-[13px] font-mono h-8"
+          />
+        ) : (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="px-2 py-1.5 bg-zinc-50 rounded text-[13px] font-mono text-zinc-600 border border-zinc-200 select-all truncate">
+                  {externalUserId}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="font-mono">
+                {externalUserId}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+      
+      {selectedComponentType === "proxy" && (
+        <div className="grid grid-cols-[140px,1fr] items-center gap-3">
+          <div className="text-[13px] font-medium text-zinc-700">Account ID</div>
+          <Input
+            value={accountId || ""}
+            onChange={(e) => setAccountId?.(e.target.value)}
+            placeholder="Enter account ID"
+            className="text-[13px] font-mono h-8"
+          />
+        </div>
+      )}
     </div>
   </div>
 )
diff --git a/connect-react-demo/lib/app-state.tsx b/connect-react-demo/lib/app-state.tsx
index ba99b97..d4c1f2b 100644
--- a/connect-react-demo/lib/app-state.tsx
+++ b/connect-react-demo/lib/app-state.tsx
@@ -82,6 +82,14 @@ const useAppStateProviderValue = () => {
   const [webhookUrl, setWebhookUrl] = useState<string>("")
   const [webhookUrlValidationAttempted, setWebhookUrlValidationAttempted] = useState<boolean>(false)
 
+  // Proxy-specific state
+  const [editableExternalUserId, setEditableExternalUserId] = useState<string>(externalUserId)
+  const [accountId, setAccountId] = useState<string>("")
+  const [proxyUrl, setProxyUrl] = useState<string>("")
+  const [proxyPath, setProxyPath] = useState<string>("")
+  const [proxyMethod, setProxyMethod] = useState<string>("GET")
+  const [proxyBody, setProxyBody] = useState<string>("")
+
   const selectedComponentKey = queryParams.component || "google_sheets-add-single-row"
   const setSelectedComponentKey = (value: string) => {
     // Batch all state updates to prevent multiple configureComponent calls
@@ -221,6 +229,18 @@ export function MyPage() {
     fileCode,
     setFileCode,
 
+    // Proxy-specific exports
+    editableExternalUserId,
+    setEditableExternalUserId,
+    accountId,
+    setAccountId,
+    proxyUrl,
+    setProxyUrl,
+    proxyMethod,
+    setProxyMethod,
+    proxyBody,
+    setProxyBody,
+
     code,
   }
 }