Docs(Programmatic Control): Added missing agentId, fixed imports and useEffect (mirror of CopilotKit#4430) (CopilotKit#4450)

Mirror of CopilotKit#4430 by @MalaikaAbb.

Adds an agentId note for non-default agents, replaces `agent.id` with
`agent.agentId`, corrects the `@copilotkit/shared/v2` import to
`@copilotkit/shared`, and adds the missing `[agent]` dependency to a
useEffect.

Author: marthakelly

docs/content/docs/(root)/programmatic-control.mdx

@@ -34,6 +34,14 @@ Programmatic control lets you run agents outside of a chat UI — trigger agent
   </Tab>
 </Tabs>
 
+<Callout type="info">
+Note: If you are not using CopilotKit Cloud public access/license key, then you need to pass your agentId to useAgent() hook.
+```ts
+const { agent } = useAgent({agentId: "myAgent"})
+````
+
+</Callout>
+
 You can also execute individual tools programmatically — no LLM turn needed:
 
 <Tabs items={['tool-button.tsx']}>

docs/snippets/shared/basics/programmatic-control.mdx

@@ -41,7 +41,7 @@ Use `copilotkit.runAgent()` to trigger your agent from any component — no chat
 ```tsx title="page.tsx"
 import { useAgent } from "@copilotkit/react-core/v2";
 import { useCopilotKit } from "@copilotkit/react-core/v2";
-import { randomUUID } from "@copilotkit/shared/v2";
+import { randomUUID } from "@copilotkit/shared";
 
 export function AgentTrigger() {
   const { agent } = useAgent();

docs/snippets/use-agent.mdx

@@ -21,7 +21,7 @@
       return (
         <div>
           {/* [!code highlight:4] */}
-          <p>Agent ID: {agent.id}</p>
+          <p>Agent ID: {agent.agentId}</p>
           <p>Thread ID: {agent.threadId}</p>
           <p>Status: {agent.isRunning ? "Running" : "Idle"}</p>
           <p>Messages: {agent.messages.length}</p>
@@ -30,6 +30,13 @@
     }
     ```
 
+    <Callout type="info">
+      Note: If you are not using CopilotKit Cloud public access/license key, then you need to pass your agentId to useAgent() hook.
+      ```ts
+      const { agent } = useAgent({agentId: "myAgent"})
+      ```
+    </Callout>
+
     The hook will throw an error if no agent is configured, so you can safely use `agent` without null checks.
   </Step>
 
@@ -91,7 +98,7 @@
     ```tsx title="page.tsx"
     import { useAgent } from "@copilotkit/react-core/v2";
     import { useCopilotKit } from "@copilotkit/react-core/v2";
-    import { randomUUID } from "@copilotkit/shared/v2";
+    import { randomUUID } from "@copilotkit/shared";
 
     export function RunAgent() {
       const { agent } = useAgent();
@@ -209,7 +216,7 @@ export function EventLogger() {
     // [!code highlight:2]
     const { unsubscribe } = agent.subscribe(subscriber);
     return () => unsubscribe();
-  }, []);
+  }, [agent]);
 
   return null;
 }