diff --git a/canvas/src/components/ui/KeyValueField.tsx b/canvas/src/components/ui/KeyValueField.tsx
index bde8b132..efbef38b 100644
--- a/canvas/src/components/ui/KeyValueField.tsx
+++ b/canvas/src/components/ui/KeyValueField.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useCallback, useRef, useEffect, type ChangeEvent } from 'react';
 import { RevealToggle } from './RevealToggle';
 
diff --git a/canvas/src/components/ui/TestConnectionButton.tsx b/canvas/src/components/ui/TestConnectionButton.tsx
index 4f548437..940c06e4 100644
--- a/canvas/src/components/ui/TestConnectionButton.tsx
+++ b/canvas/src/components/ui/TestConnectionButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { TestConnectionState, SecretGroup } from '@/types/secrets';
 import { validateSecret } from '@/lib/api/secrets';