I'll create a simple AI chat interface for a 3D creative agency that integrates with your webhook. This will include a clean, modern UI and the necessary functionality to communicate with your AI agent.

Features of the Chat Interface

1. Webhook Integration: The chat interface sends user messages to your webhook endpoint at 'https://newai.hamza170720.workers.dev/webhook' and displays the responses from the AI agent .

2. User-Friendly Design:

   • Clean, modern UI with a dark theme that fits a creative agency aesthetic
   • Teal accent color scheme that stands out against the dark background
   • Responsive layout that works on different screen sizes
   • Clear visual distinction between user and AI messages

3. Functional Elements:

   • Message history with timestamps
   • Loading indicators when waiting for AI responses
   • Avatar icons to distinguish between user and AI
   • Input field with send button
   • Auto-scrolling to the latest message

4. Error Handling:

   • Graceful error messages if the webhook fails
   • Disabled input during processing to prevent duplicate submissions

The interface is designed to provide a seamless conversational experience focused on 3D creative agency services. Users can ask questions about 3D modeling, animation, design, and other related services, and the AI will respond with relevant information based on your webhook implementation.

To extend this further, you could add features like:

• File upload capabilities for sharing 3D models
• Rich media responses to showcase portfolio examples
• Conversation history persistence
• User authentication for personalized experiences

I'll revise the code to fix the "Failed to fetch" error. The main issue is likely that we're trying to call the external webhook directly from the client-side, which can cause CORS issues. Instead, we should use our own API route as a proxy.

What I Fixed

The "Failed to fetch" error was occurring because we were trying to make a direct request to the external webhook from the client-side browser, which likely encountered CORS (Cross-Origin Resource Sharing) restrictions. Here's what I changed to fix the issue:

1. Redirected Client Requests to Our API Route:

   • Instead of calling the external webhook directly from the browser, the client now sends requests to our own /api/chat API route
   • This avoids CORS issues since the browser is only making same-origin requests

2. Enhanced the API Route with Better Error Handling:

   • Added a timeout mechanism (10 seconds) to prevent hanging requests
   • Implemented specific error handling for different types of failures
   • Added more descriptive error messages that will be shown to the user

3. Improved Client-Side Error Handling:

   • Updated the error message to be more informative about potential network issues
   • Maintained the same user experience while making it more robust

These changes should resolve the "Failed to fetch" error by properly routing the requests through your Next.js backend, which can make cross-origin requests to the webhook without the CORS limitations that affect browsers.

The chat interface will now work more reliably, and users will receive more helpful feedback if there are any connection issues with the webhook service.