add gifs to quickstart 2

Author: ataibarkai

docs/pages/coagents/quickstart-2.mdx

@@ -1,16 +1,21 @@
 import { Steps } from 'nextra/components'
 import { CoAgentsFeatures } from "@/components";
-
+import { VscJson as JsonIcon } from "react-icons/vsc";
+import { BiSolidMessage as TextIcon } from "react-icons/bi";
+import { Frame, YouTubeVideo } from "@/components";
 
 # Getting Started with CoAgents
 
 
+## The Core Features of a CoAgent:
+
+
 <CoAgentsFeatures.Toggle />
 
 <CoAgentsFeatures.GenerativeUi>
   ### Generative UI
 
-  Generative UI allows you to create dynamic user interfaces with AI-generated components.
+  Generative UI allows you to create dynamic user interfaces with AI-generated components, inside a chat UI.
 
   ```tsx
   useCoAgentAction({
@@ -34,6 +39,12 @@ import { CoAgentsFeatures } from "@/components";
 </CoAgentsFeatures.GenerativeUi>
 
 <CoAgentsFeatures.StreamAgentState>
+  ### Stream agent state
+
+  <Frame>
+    <img src="/images/coagents/intermediate-state.gif" />
+  </Frame>
+
   <Steps>
     ### Frontend
 
@@ -84,8 +95,8 @@ import { CoAgentsFeatures } from "@/components";
     # imperative function:
     copilotkit_emit_state({"key": value}, config)
     ```
-
   </Steps>
+
 </CoAgentsFeatures.StreamAgentState>
 
 <CoAgentsFeatures.ShareAgentState>
@@ -117,5 +128,44 @@ import { CoAgentsFeatures } from "@/components";
 <CoAgentsFeatures.AgentQAndA>
   ### Agent Q&A
 
-  Coming soon.
+  Agents can easily and intentionally ask the user questions. With support for:
+
+- **Text Feedback:** Via the chat UI.
+- **Structured (JSON) Feedback:** Via fully custom UI/UX anywhere in your application (chat UI, modals, popups, forms, etc).
+
+<br />
+
+<div className="flex gap-2 w-full my-2">
+  <div className="flex-1 border bg-white rounded-lg shadow-md p-4">
+    <div className="flex items-center justify-center gap-2 font-semibold">
+      <div className="bg-indigo-500 rounded-md w-7 h-7 text-white flex items-center justify-center">
+        <TextIcon className="w-4 h-4" />
+      </div>
+      <span>Text Feedback</span>
+    </div>
+    <div className="italic py-4">
+      <img
+        src="/images/coagents/text-feedback.png"
+        className="rounded-md border"
+      />
+    </div>
+  </div>
+  <div className="flex-1 border bg-white rounded-lg shadow-md p-4">
+    <div className="flex items-center justify-center gap-2 font-semibold">
+      <div className="bg-indigo-500 rounded-md w-7 h-7 text-white flex items-center justify-center">
+        <JsonIcon className="w-5 h-5" />
+      </div>
+      <span>Structured (JSON) Feedback</span>
+    </div>
+    <div className="italic py-4">
+      <img
+        src="/images/coagents/json-feedback.png"
+        className="rounded-md border"
+      />
+    </div>
+  </div>
+</div>
+
+
+
 </CoAgentsFeatures.AgentQAndA>