diff --git a/js/components/src/context/profile-cache.tsx b/js/components/src/context/profile-cache.tsx
index d5e1a812..61d8688f 100644
--- a/js/components/src/context/profile-cache.tsx
+++ b/js/components/src/context/profile-cache.tsx
@@ -1,4 +1,4 @@
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { AppBskyActorDefs } from "@atproto/api";
 import {
   createContext,
   useCallback,
@@ -9,7 +9,7 @@ import {
 import { useUnauthenticatedBlueskyAppViewAgent } from "../streamplace-store";
 
 interface ProfileCacheContextValue {
-  profiles: Record<string, ProfileViewDetailed>;
+  profiles: Record<string, AppBskyActorDefs.ProfileViewDetailed>;
   requestProfiles: (dids: string[]) => void;
 }
 
@@ -22,9 +22,9 @@ export function ProfileCacheProvider({
   children: React.ReactNode;
 }) {
   const agent = useUnauthenticatedBlueskyAppViewAgent();
-  const [profiles, setProfiles] = useState<Record<string, ProfileViewDetailed>>(
-    {},
-  );
+  const [profiles, setProfiles] = useState<
+    Record<string, AppBskyActorDefs.ProfileViewDetailed>
+  >({});
   const agentRef = useRef(agent);
   agentRef.current = agent;
   const profilesRef = useRef(profiles);
@@ -54,7 +54,10 @@ export function ProfileCacheProvider({
     agentRef.current
       .getProfiles({ actors: toFetch })
       .then((result) => {
-        const newProfiles: Record<string, ProfileViewDetailed> = {};
+        const newProfiles: Record<
+          string,
+          AppBskyActorDefs.ProfileViewDetailed
+        > = {};
         result.data.profiles.forEach((p) => {
           newProfiles[p.did] = p;
         });
diff --git a/js/components/src/hooks/useAvatars.tsx b/js/components/src/hooks/useAvatars.tsx
index c52e4468..33f17295 100644
--- a/js/components/src/hooks/useAvatars.tsx
+++ b/js/components/src/hooks/useAvatars.tsx
@@ -1,10 +1,10 @@
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { AppBskyActorDefs } from "@atproto/api";
 import { useEffect, useMemo } from "react";
 import { useProfileCache } from "../context/profile-cache";
 
 export function useAvatars(
   dids: string[],
-): Record<string, ProfileViewDetailed> {
+): Record<string, AppBskyActorDefs.ProfileViewDetailed> {
   const { profiles, requestProfiles } = useProfileCache();
 
   useEffect(() => {