diff --git a/VOICE_AGENT_INTEGRATION.md b/VOICE_AGENT_INTEGRATION.md
new file mode 100644
index 0000000..992cc7b
--- /dev/null
+++ b/VOICE_AGENT_INTEGRATION.md
@@ -0,0 +1,140 @@
+# Farm Vaidya Voice Agent - Integration Complete! ✅
+
+## What's Been Added
+
+### 1. Files Copied
+- ✅ `src/components/VoiceAgent.tsx` - Main voice agent component
+- ✅ `src/components/ui/*` - UI components (button, card, tooltip, toaster)
+- ✅ `src/hooks/use-toast.ts` - Toast notification hook
+- ✅ `src/app/voice-agent.css` - CSS animations
+- ✅ `public/Farm-vaidya-icon.png` - Voice agent icon
+
+### 2. Dependencies Installed
+- ✅ @daily-co/daily-js (voice infrastructure)
+- ✅ sonner (toast notifications)
+- ✅ lucide-react (icons)
+- ✅ clsx & tailwind-merge (styling utilities)
+
+### 3. Environment Variables Added
+Check your `.env.local` - these were added:
+```
+NEXT_PUBLIC_PIPECAT_TOKEN=pk_aff3af37-4821-4efc-9776-1f2d300a52d0
+NEXT_PUBLIC_PIPECAT_ENDPOINT=https://api.pipecat.daily.co/v1/public/techsprint/start
+```
+
+## How to Enable the Voice Agent
+
+### Option 1: Add to All Pages (Recommended)
+
+Edit `src/app/layout.tsx`:
+
+```tsx
+import VoiceAgent from '@/components/VoiceAgent';
+import { Toaster } from 'sonner';
+import './voice-agent.css'; // Add this import
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+ <>
+
+
+
+ {children}
+
+
+
+
+ {/* Add Farm Vaidya Voice Agent */}
+
+
+
+ );
+}
+```
+
+### Option 2: Add to Specific Pages Only
+
+In any page file (e.g., `src/app/page.tsx`):
+
+```tsx
+import VoiceAgent from '@/components/VoiceAgent';
+import { Toaster } from 'sonner';
+import './voice-agent.css';
+
+export default function HomePage() {
+ return (
+
+ {/* Your existing content */}
+
+ {/* Add voice agent */}
+
+ );
+}
+```
+
+## How to Test
+
+1. **Start the dev server:**
+ ```bash
+ cd ~/techsprint
+ npm run dev
+ ```
+
+2. **Open in browser:**
+ - Go to http://localhost:3000
+ - You'll see a floating button with "Talk to Farm Vaidya" at bottom-left
+
+3. **Click the button:**
+ - Grant microphone permission when prompted
+ - The agent will connect automatically
+ - Start speaking!
+
+## Features
+
+- ✅ Real-time voice conversations with AI farming expert
+- ✅ Visual feedback when speaking
+- ✅ Mute/unmute controls
+- ✅ Call timer
+- ✅ Floating widget (doesn't interfere with your site)
+- ✅ Responsive design
+
+## Customization
+
+### Change Position
+Edit `VoiceAgent.tsx` line ~256:
+```tsx
+// Change from bottom-left to bottom-right
+
+```
+
+### Change Bot Name/Icon
+- Replace `/public/Farm-vaidya-icon.png` with your icon
+- Edit text in VoiceAgent.tsx
+
+### Disable on Certain Pages
+Wrap with conditional:
+```tsx
+{!pathname.includes('/admin') &&
+
+ {/* Farm Vaidya Voice Agent */}
+ ([]);
+ const [callFrame, setCallFrame] = useState(null);
+ const [timer, setTimer] = useState(0);
+ const [inputText, setInputText] = useState("");
+ const { toast } = useToast();
+ const connectLockRef = useRef(false);
+ const transcriptEndRef = useRef(null);
+ const timerRef = useRef(null);
+
+ // Auto-scroll transcript to bottom
+ useEffect(() => {
+ transcriptEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ }, [transcript]);
+
+ // Auto-connect when opening
+ useEffect(() => {
+ if (isOpen && !isConnected && !isConnecting) {
+ startConversation();
+ }
+ }, [isOpen]);
+
+ // Timer logic
+ useEffect(() => {
+ if (isConnected) {
+ timerRef.current = setInterval(() => {
+ setTimer((prev) => prev + 1);
+ }, 1000);
+ } else {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+ setTimer(0);
+ }
+ return () => {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+ };
+ }, [isConnected]);
+
+ const formatTime = (seconds: number) => {
+ const hrs = Math.floor(seconds / 3600);
+ const mins = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+ return `${hrs.toString().padStart(2, "0")}:${mins
+ .toString()
+ .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+ };
+
+ const addToTranscript = (speaker: "user" | "ai", text: string) => {
+ setTranscript((prev) => [
+ ...prev,
+ {
+ id: Math.random().toString(36).substring(7),
+ speaker,
+ text,
+ timestamp: new Date(),
+ },
+ ]);
+ };
+
+ const startConversation = async () => {
+ if (connectLockRef.current || isConnecting || isConnected) return;
+
+ connectLockRef.current = true;
+ setIsConnecting(true);
+
+ try {
+ /*
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ setIsConnected(true);
+ setIsConnecting(false);
+ connectLockRef.current = false;
+ // toast({ title: "Connected", description: "Farm Vaidya is listening (Test Mode)" });
+
+ // Simulate bot greeting
+ addToTranscript("ai", "Namaste! I am Farm Vaidya. How can I help you with your crops today?");
+ */
+
+ const endpoint = process.env.NEXT_PUBLIC_PIPECAT_ENDPOINT || "https://api.pipecat.daily.co/v1/public/webagent/start";
+ const apiKey = process.env.NEXT_PUBLIC_PIPECAT_TOKEN;
+ console.log("Connecting to Pipecat endpoint:", endpoint);
+ console.log("API Key provided:", !!apiKey);
+
+ if (!apiKey) {
+ throw new Error("VITE_PIPECAT_TOKEN is not configured in .env file");
+ }
+
+ // Ensure the Authorization header uses a Bearer token. If the token
+ // already includes the Bearer prefix, leave it as-is.
+ const authHeader = apiKey.match(/^Bearer\s+/i) ? apiKey : `Bearer ${apiKey}`;
+
+ // Start API request immediately
+ const fetchPromise = fetch(
+ endpoint,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": authHeader,
+ },
+ body: JSON.stringify({
+ createDailyRoom: true,
+ dailyRoomProperties: {
+ enable_recording: "cloud",
+ privacy: "public",
+ },
+ dailyMeetingTokenProperties: {
+ is_owner: true,
+ },
+ }),
+ }
+ ).then(async (res) => {
+ if (!res.ok) {
+ const errorText = await res.text();
+ console.error("API Error Response:", errorText);
+ throw new Error(`API request failed: ${res.status} ${res.statusText} - ${errorText}`);
+ }
+ return res.json();
+ });
+
+ // Cleanup existing frame while API is fetching
+ if (callFrame) {
+ await callFrame.leave().catch(console.error);
+ await callFrame.destroy().catch(console.error);
+ setCallFrame(null);
+ }
+
+ // Initialize new frame while API is fetching
+ const frame = DailyIframe.createFrame({
+ showLeaveButton: false,
+ showFullscreenButton: false,
+ iframeStyle: {
+ position: "fixed",
+ width: "1px",
+ height: "1px",
+ opacity: "0",
+ pointerEvents: "none",
+ },
+ });
+
+ // Setup listeners immediately
+ frame
+ .on("joined-meeting", () => {
+ setIsConnected(true);
+ setIsConnecting(false);
+ connectLockRef.current = false;
+ })
+ .on("left-meeting", () => {
+ setIsConnected(false);
+ connectLockRef.current = false;
+ })
+ .on("error", () => {
+ setIsConnecting(false);
+ connectLockRef.current = false;
+ toast({ title: "Error", description: "Connection failed", variant: "destructive" });
+ })
+ .on("participant-joined", (e: any) => {
+ if (e.participant.user_name === "Chatbot") {
+ addToTranscript("ai", "I am Farm Vaidya AI");
+ }
+ })
+ .on("active-speaker-change", (e: any) => {
+ const localParticipant = frame.participants().local;
+ if (e.activeSpeaker && e.activeSpeaker.peerId === localParticipant.user_id) {
+ // User is speaking
+ } else if (e.activeSpeaker) {
+ // AI is speaking
+ } else {
+ // No one is speaking
+ }
+ });
+
+ // Wait for API data
+ const data = await fetchPromise;
+ const roomUrl = data.dailyRoom || data.room_url || data.roomUrl;
+ const roomToken = data.dailyToken || data.token;
+
+ if (!roomUrl || !roomToken) {
+ console.error("API Response:", data);
+ throw new Error("Missing room URL or token from API response");
+ }
+
+ // Join room with optimized settings
+ await frame.join({
+ url: roomUrl,
+ token: roomToken,
+ subscribeToTracksAutomatically: true
+ });
+ setCallFrame(frame);
+
+ } catch (error: any) {
+ console.error(error);
+ setIsConnecting(false);
+ connectLockRef.current = false;
+ toast({ title: "Error", description: error.message || "Could not start conversation", variant: "destructive" });
+ }
+ };
+
+ const endConversation = async () => {
+ if (callFrame) {
+ await callFrame.leave();
+ }
+ setIsConnected(false);
+ setIsOpen(false);
+ };
+
+ const toggleMute = () => {
+ const newMuteState = !isMuted;
+ if (callFrame) {
+ callFrame.setLocalAudio(!newMuteState);
+ }
+ setIsMuted(newMuteState);
+ };
+
+ // @ts-ignore - Used for future text input functionality
+ const handleSendMessage = () => {
+ if (!inputText.trim()) return;
+ addToTranscript("user", inputText);
+ setInputText("");
+ // Here you would typically send the text to the AI if supported by the backend
+
+ // Simulate AI response for testing
+ setTimeout(() => {
+ addToTranscript("ai", "I am a mock bot response. The API is bypassed for testing.");
+ }, 1000);
+ };
+
+ const GoogleLogo = () => (
+
+
+ );
+
+ const GoogleDots = () => (
+
+ );
+
+ return (
+
+ {/* Active Call Pill UI */}
+ {isOpen && (
+
+
+ {/* Avatar Section */}
+
+ {/* Spinning Ring - Blue Colors */}
+
+
+ {/* Avatar Container */}
+
+
+
+
+ {/* Status Text */}
+
+
+ {isConnecting ? "Connecting..." : "Connected"}
+
+
+ {isConnecting ? "00:00:00" : formatTime(timer)}
+
+
+
+ {/* Controls */}
+
+
+ {isMuted ?
+
+
+
+
+
+
+ )}
+
+ {/* Floating Toggle Button */}
+ {!isOpen && (
+
{
+ setIsOpen(true);
+ startConversation();
+ }}
+ className="w-fit cursor-pointer group relative p-[2px] rounded-full bg-black border-2 border-blue-500 shadow-2xl transition-all duration-300 hover:scale-105 animate-bounce-subtle"
+ >
+
+
+ {/* Avatar Container */}
+
+
+
+
+
+ Talk to TechSprint
+
+
+ Hackathon 2026
+
+
+
+
+ )}
+
& {
+ variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+ size?: "default" | "sm" | "lg" | "icon"
+}
+
+const Button = React.forwardRef(
+ ({ className, variant = "default", size = "default", ...props }, ref) => {
+ const variants: Record = {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ }
+
+ const sizes: Record = {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ }
+
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..653321a
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,2 @@
+// Toaster is provided by sonner, we just need a placeholder
+export const Toaster = () => null;
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..12a64e4
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+const TooltipProvider = ({ children }: { children: React.ReactNode }) => {
+ return <>{children}
+}
+
+const Tooltip = ({ children }: { children: React.ReactNode }) => {
+ return <>{children}
+}
+
+const TooltipTrigger = React.forwardRef<
+ HTMLButtonElement,
+ React.HTMLAttributes
+>((props, ref) =>
+>((props, ref) =>
)
+
+TooltipContent.displayName = "TooltipContent"
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts
new file mode 100644
index 0000000..894ce8c
--- /dev/null
+++ b/src/hooks/use-toast.ts
@@ -0,0 +1,25 @@
+import { toast as sonnerToast } from "sonner";
+
+export function useToast() {
+ return {
+ toast: ({
+ title,
+ description,
+ variant = "default",
+ }: {
+ title: string;
+ description?: string;
+ variant?: "default" | "destructive";
+ }) => {
+ if (variant === "destructive") {
+ sonnerToast.error(title, {
+ description,
+ });
+ } else {
+ sonnerToast.success(title, {
+ description,
+ });
+ }
+ },
+ };
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..2cb92be
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}