I'll implement a Google search functionality to enhance your AI assistant's responses. This will allow users to opt-in to having their queries searched on Google to provide more up-to-date or comprehensive information.
I've implemented a Google search functionality to enhance your AI assistant's responses. This feature allows users to opt-in to having their queries searched on Google to provide more up-to-date or comprehensive information.
Google Search Toggle:
Google Search API Integration:
performGoogleSearch function that calls the Google Custom Search APIEnhanced Context Building:
Updated Response Handling:
When a user enables the "Enhance with Google Search" checkbox and sends a message:
To use this feature, you'll need to:
Get Google Custom Search API credentials:
Add these environment variables:
GOOGLE_SEARCH_API_KEY=your_google_search_api_key
GOOGLE_SEARCH_ENGINE_ID=your_google_search_engine_idThis enhancement gives your AI assistant the ability to provide more current and comprehensive information when needed, while still leveraging your knowledge base for specialized content.
Please make sure to add the following environment variables to your project:
here was my /dashboard/page.tsx
i need complete updated codes
I've updated your dashboard page to include the Google search functionality. Here are the key changes made:
useGoogleSearch to track whether the user wants to enhance their queries with Google search.sendMessage function to include the useGoogleSearch parameter when making API calls to your chat endpoint.The updated dashboard now supports the Google search functionality that was implemented in the API endpoint, giving users the option to enhance their AI assistant with real-time web search results when needed.
Please make sure to add the following environment variables to your project:
are you mad give me complete updated codes
I apologize for the confusion. You're right - I should provide the complete updated code with the Google search functionality integrated into your existing dashboard. Here's the full updated code:
I've now provided the complete updated dashboard code with Google search functionality integrated. Here are the key changes I made:
Added Google Search Toggle State:
const [useGoogleSearch, setUseGoogleSearch] = useState(false)Added Google Search Checkbox UI in the message input area:
<div className="mb-3 flex items-center justify-center">
<label className="flex items-center space-x-2 text-sm text-gray-600 cursor-pointer">
<input
type="checkbox"
checked={useGoogleSearch}
onChange={(e) => setUseGoogleSearch(e.target.checked)}
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
/>
<Globe className="h-4 w-4 text-gray-500" />
<span>Enhance with Google Search</span>
</label>
</div>Updated the sendMessage Function to include the Google search parameter:
// Inside the API call body
body: JSON.stringify({
// ... existing parameters
useGoogleSearch: useGoogleSearch, // Added this parameter
}),Added Logging for Google search usage:
console.log(`Using Google Search: ${useGoogleSearch}`)Imported the Globe Icon from Lucide React:
import { Globe } from 'lucide-react'The Google search toggle is now positioned right above the message input field, making it easily accessible to users. When enabled, the AI will use Google search results to enhance its responses, providing more up-to-date and comprehensive information.
Please make sure to add the following environment variables to your project: