import requests

import json
import time
from typing import Dict, Any, Optional, Iterator, List, Union
from dataclasses import dataclass, field
from urllib.parse import urlencode, quote

@dataclass
class Message:
"""Represents a chat message"""
role: str
content: Union[str, List[Dict[str, Any]]]

@dataclass
class ChatCompletionChunk:
"""Represents a streaming chunk from the API"""
id: str
object: str
created: int
model: str
choices: List[Dict[str, Any]]
system_fingerprint: Optional[str] = None
prompt_filter_results: Optional[List[Dict[str, Any]]] = None

def get_content(self) -> str:
"""Extract content from the first choice delta"""
if self.choices and len(self.choices) > 0:
delta = self.choices[0].get('delta', {})
return delta.get('content', '')
return ''

def is_finished(self) -> bool:
"""Check if this chunk indicates completion"""
if self.choices and len(self.choices) > 0:
return self.choices[0].get('finish_reason') is not None
return False

class PollinationClient:
"""Enhanced client for interacting with pollinations.ai API, with improved features and support for more endpoints."""

def __init__(
self,
base_url: str = "https://text.pollinations.ai/openai/v1/chat/completions",
token: Optional[str] = None,
referrer: Optional[str] = None
):
self.base_url = base_url.rstrip('/')
self.token = token
self.referrer = referrer
self.session = requests.Session()
if self.token:
self.session.headers.update({"Authorization": f"Bearer {self.token}"})

def _parse_sse_line(self, line: str) -> Optional[Dict[str, Any]]:
"""Parse a single SSE line"""
line = line.strip()
if not line or line.startswith(':'):
return None

if line.startswith('data: '):
data_str = line[6:] # Remove 'data: ' prefix
if data_str.strip() == '[DONE]':
return {'done': True}
try:
return json.loads(data_str)
except json.JSONDecodeError:
return None

return None

def chat_completion(
self,
messages: List[Message],
model: str = "gpt-4o",
stream: bool = True,
temperature: float = 0.7,
max_tokens: Optional[int] = 12000,
top_p: Optional[float] = None,
frequency_penalty: Optional[float] = None,
presence_penalty: Optional[float] = None,
stop: Optional[List[str]] = None,
seed: Optional[int] = None,
response_format: Optional[Dict[str, str]] = None,
tools: Optional[List[Dict[str, Any]]] = None,
tool_choice: Optional[Union[str, Dict[str, Any]]] = None,
private: bool = False,
**kwargs
) -> Iterator[ChatCompletionChunk]:
"""
Create a chat completion with streaming support. Enhanced with support for multimodal inputs (vision, audio),
tools, JSON mode, seed, private mode, and more.

Args:
messages: List of Message objects (content can be str or list for multimodal)
model: Model to use (default: gpt-4o, other options like mistral, claude-hybridspace)
stream: Whether to stream responses (default: True)
temperature: Sampling temperature (default: 0.7)
max_tokens: Maximum tokens to generate
top_p: Top-p sampling parameter
frequency_penalty: Frequency penalty
presence_penalty: Presence penalty
stop: Stop sequences
seed: Seed for reproducible results
response_format: Response format, e.g., {"type": "json_object"} for JSON mode
tools: List of tools for function calling
tool_choice: Tool choice configuration
private: If True, prevent response from appearing in public feed
**kwargs: Additional parameters

Yields:
ChatCompletionChunk objects
"""
# Convert messages to the format expected by the API
formatted_messages = []
for msg in messages:
formatted_messages.append({
"role": msg.role,
"content": msg.content
})

# Build query parameters
params = {
"model": model,
"stream": str(stream).lower(),
"temperature": temperature,
"private": str(private).lower(),
}

if self.token:
params["token"] = self.token
if self.referrer:
params["referrer"] = self.referrer

# Add optional parameters
if max_tokens is not None:
params["max_tokens"] = max_tokens
if top_p is not None:
params["top_p"] = top_p
if frequency_penalty is not None:
params["frequency_penalty"] = frequency_penalty
if presence_penalty is not None:
params["presence_penalty"] = presence_penalty
if stop is not None:
params["stop"] = stop
if seed is not None:
params["seed"] = seed

# Add any additional kwargs
params.update(kwargs)

# Build URL with query parameters
query_string = urlencode(params, doseq=True)
url = f"{self.base_url}?{query_string}"

# Prepare request body
payload = {
"messages": formatted_messages
}
if response_format:
payload["response_format"] = response_format
if tools:
payload["tools"] = tools
if tool_choice:
payload["tool_choice"] = tool_choice

# Make streaming request
headers = {
"Content-Type": "application/json",
"Accept": "text/event-stream"
}

try:
response = self.session.post(
url,
json=payload,
headers=headers,
stream=True,
timeout=30
)
response.raise_for_status()

# Process streaming response
for line in response.iter_lines(decode_unicode=True):
if not line:
continue

parsed = self._parse_sse_line(line)
if parsed is None:
continue

if parsed.get('done'):
break

# Convert to ChatCompletionChunk
chunk = ChatCompletionChunk(
id=parsed.get('id', ''),
object=parsed.get('object', ''),
created=parsed.get('created', 0),
model=parsed.get('model', ''),
choices=parsed.get('choices', []),
system_fingerprint=parsed.get('system_fingerprint'),
prompt_filter_results=parsed.get('prompt_filter_results')
)

yield chunk

# Check if completion is finished
if chunk.is_finished():
break

except requests.RequestException as e:
raise ConnectionError(f"Failed to connect to Pollination API: {e}")
except Exception as e:
raise RuntimeError(f"Error processing response: {e}")

def chat_completion_simple(
self,
prompt: str,
model: str = "gpt-4o",
temperature: float = 0.7,
**kwargs
) -> str:
"""
Simple chat completion that returns the full response as a string

Args:
prompt: The prompt to send
model: Model to use
temperature: Sampling temperature
**kwargs: Additional parameters

Returns:
Complete response as a string
"""
messages = [Message(role="user", content=prompt)]

response_content = ""
for chunk in self.chat_completion(
messages=messages,
model=model,
temperature=temperature,
**kwargs
):
response_content += chunk.get_content()

return response_content.strip()

def list_models(self) -> List[Dict[str, Any]]:
"""List available text models"""
url = "https://text.pollinations.ai/models"
response = self.session.get(url)
response.raise_for_status()
return response.json()

def generate_image(
self,
prompt: str,
model: str = "flux",
width: int = 1024,
height: int = 1024,
seed: Optional[int] = None,
nologo: bool = False,
private: bool = False,
enhance: bool = False,
safe: bool = False
) -> bytes:
"""Generate an image and return the image bytes"""
params = {
"model": model,
"width": width,
"height": height,
"seed": seed if seed is not None else "random",
"nologo": str(nologo).lower(),
"private": str(private).lower(),
"enhance": str(enhance).lower(),
"safe": str(safe).lower(),
}
encoded_prompt = quote(prompt)
query_string = urlencode(params)
url = f"https://pollinations.ai/p/{encoded_prompt}?{query_string}"
response = self.session.get(url)
response.raise_for_status()
return response.content

def text_to_speech(
self,
prompt: str,
model: str = "openai-audio",
voice: str = "nova"
) -> bytes:
"""Generate speech audio from text and return audio bytes"""
encoded_prompt = quote(prompt)
params = {
"model": model,
"voice": voice,
}
query_string = urlencode(params)
url = f"https://text.pollinations.ai/{encoded_prompt}?{query_string}"
response = self.session.get(url)
response.raise_for_status()
return response.content

# Helper functions
def create_message(role: str, content: Union[str, List[Dict[str, Any]]]) -> Message:
"""Helper function to create a Message object"""
return Message(role=rol

api.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Documentation | Vibecode Studio</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔌</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                        accent: '#ec4899',
+                        dark: '#0f172a',
+                        light: '#f8fafc'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+        }
+        .glow {
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+        }
+        .code-block {
+            background: #1e293b;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            overflow-x: auto;
+        }
+        .endpoint-card {
+            transition: all 0.3s ease;
+        }
+        .endpoint-card:hover {
+            transform: translateX(5px);
+        }
+        .tab-active {
+            border-bottom: 2px solid #6366f1;
+            color: #6366f1;
+        }
+    </style>
+</head>
+<body class="text-light">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-dark/90 backdrop-blur-sm py-4 px-6 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
+                <i data-feather="code" class="text-white"></i>
+            </div>
+            <span class="text-xl font-bold">Vibecode<span class="text-accent">Studio</span></span>
+        </div>
+        <div class="hidden md:flex space-x-8">
+            <a href="index.html" class="hover:text-primary transition">Home</a>
+            <a href="#" class="hover:text-primary transition">Features</a>
+            <a href="#" class="hover:text-primary transition">API</a>
+            <a href="chat.html" class="hover:text-primary transition">Chat</a>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/80 transition">Get Started</button>
+            <button id="menu-toggle" class="md:hidden text-light">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="pt-24 pb-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center max-w-3xl mx-auto">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">
+                    Powerful <span class="text-primary">API</span> Integration
+                </h1>
+                <p class="text-xl text-gray-300 mb-8">
+                    Integrate Vibecode Studio into your applications with our comprehensive API. 
+                    Generate code, create images, and convert text to speech programmatically.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <button class="px-6 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium glow">
+                        Get API Key
+                    </button>
+                    <button class="px-6 py-3 rounded-lg bg-dark border border-gray-700 hover:bg-gray-800 transition font-medium">
+                        View Examples
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- API Endpoints Section -->
+    <section class="py-12 bg-dark/50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">API <span class="text-primary">Endpoints</span></h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    Explore our available API endpoints and their capabilities
+                </p>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Endpoint 1 -->
+                <div class="endpoint-card bg-dark border border-gray-800 rounded-2xl p-6">
+                    <div class="flex items-start mb-4">
+                        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mr-3">
+                            <i data-feather="message-square" class="text-primary"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold">Chat Completion</h3>
+                            <span class="text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded">POST</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        Generate conversational AI responses with streaming support
+                    </p>
+                    <div class="text-sm font-mono bg-gray-900 p-3 rounded">
+                        /openai/v1/chat/completions
+                    </div>
+                </div>
+
+                <!-- Endpoint 2 -->
+                <div class="endpoint-card bg-dark border border-gray-800 rounded-2xl p-6">
+                    <div class="flex items-start mb-4">
+                        <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mr-3">
+                            <i data-feather="image" class="text-accent"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold">Image Generation</h3>
+                            <span class="text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded">GET</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        Create stunning images from text prompts
+                    </p>
+                    <div class="text-sm font-mono bg-gray-900 p-3 rounded">
+                        /p/{prompt}
+                    </div>
+                </div>
+
+                <!-- Endpoint 3 -->
+                <div class="endpoint-card bg-dark border border-gray-800 rounded-2xl p-6">
+                    <div class="flex items-start mb-4">
+                        <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center mr-3">
+                            <i data-feather="mic" class="text-secondary"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold">Text to Speech</h3>
+                            <span class="text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded">GET</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        Convert text to natural sounding speech
+                    </p>
+                    <div class="text-sm font-mono bg-gray-900 p-3 rounded">
+                        /{prompt}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- JavaScript SDK Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <h2 class="text-3xl font-bold mb-6">
+                        JavaScript <span class="text-primary">SDK</span>
+                    </h2>
+                    <p class="text-gray-400 mb-6">
+                        Our JavaScript SDK makes it easy to integrate Vibecode Studio into your web applications.
+                        With built-in support for streaming responses, image generation, and text-to-speech.
+                    </p>
+                    
+                    <div class="flex space-x-4 mb-8">
+                        <button id="sdk-tab" class="tab-active px-4 py-2 font-medium">SDK</button>
+                        <button id="fetch-tab" class="px-4 py-2 font-medium">Fetch API</button>
+                    </div>
+                    
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Streaming chat completions</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Image generation with text prompts</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Text-to-speech conversion</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-green-500 mt-1 mr-3"></i>
+                            <span>Promise-based async/await support</span>
+                        </li>
+                    </ul>
+                    
+                    <button class="px-6 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium">
+                        Download SDK
+                    </button>
+                </div>
+                
+                <div class="lg:w-1/2 w-full">
+                    <div class="bg-dark border border-gray-800 rounded-2xl p-6">
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="text-sm text-gray-400">JavaScript Example</div>
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 text-xs rounded bg-primary/10 text-primary">JavaScript</button>
+                            </div>
+                        </div>
+                        <div class="code-block">
+                            <pre class="text-blue-400"><span class="text-blue-400">import</span> { <span class="text-yellow-300">PollinationClient</span> } <span class="text-blue-400">from</span> <span class="text-green-400">'@vibecode/sdk'</span>;</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400"><span class="text-blue-400">const</span> client = <span class="text-yellow-300">new</span> <span class="text-yellow-300">PollinationClient</span>({</pre>
+                            <pre class="text-blue-400">  apiKey: <span class="text-green-400">'your-api-key'</span></pre>
+                            <pre class="text-blue-400">});</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400"><span class="text-blue-400">const</span> response = <span class="text-yellow-300">await</span> client.chatCompletion({</pre>
+                            <pre class="text-blue-400">  messages: [{</pre>
+                            <pre class="text-blue-400">    role: <span class="text-green-400">'user'</span>,</pre>
+                            <pre class="text-blue-400">    content: <span class="text-green-400">'Create a responsive navbar with Tailwind'</span></pre>
+                            <pre class="text-blue-400">  }],</pre>
+                            <pre class="text-blue-400">  model: <span class="text-green-400">'gpt-4o'</span></pre>
+                            <pre class="text-blue-400">});</pre>
+                            <pre class="text-gray-400"></pre>
+                            <pre class="text-blue-400"><span class="text-yellow-300">console</span>.<span class="text-yellow-300">log</span>(response.choices[0].message.content);</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- API Examples Section -->
+    <section class="py-20 bg-dark/50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">API <span class="text-primary">Examples</span></h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    See how easy it is to integrate Vibecode Studio into your applications
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Example 1 -->
+                <div class="bg-dark border border-gray-800 rounded-2xl p-6">
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <i data-feather="message-circle" class="text-primary mr-2"></i>
+                        Chat Completion
+                    </h3>
+                    <div class="code-block mb-4">
+                        <pre class="text-blue-400"><span class="text-blue-400">const</span> response = <span class="text-yellow-300">await</span> fetch(<span class="text-green-400">'https://text.pollinations.ai/openai/v1/chat/completions'</span>, {</pre>
+                        <pre class="text-blue-400">  method: <span class="text-green-400">'POST'</span>,</pre>
+                        <pre class="text-blue-400">  headers: {</pre>
+                        <pre class="text-blue-400">    <span class="text-green-400">'Content-Type'</span>: <span class="text-green-400">'application/json'</span></pre>
+                        <pre class="text-blue-400">  },</pre>
+                        <pre class="text-blue-400">  body: <span class="text-yellow-300">JSON</span>.<span class="text-yellow-300">stringify</span>({</pre>
+                        <pre class="text-blue-400">    messages: [{</pre>
+                        <pre class="text-blue-400">      role: <span class="text-green-400">'user'</span>,</pre>
+                        <pre class="text-blue-400">      content: <span class="text-green-400">'Explain quantum computing in simple terms'</span></pre>
+                        <pre class="text-blue-400">    }]</pre>
+                        <pre class="text-blue-400">  })</pre>
+                        <pre class="text-blue-400">});</pre>
+                    </div>
+                    <p class="text-gray-400">
+                        Generate conversational AI responses with our chat completion endpoint.
+                    </p>
+                </div>
+                
+                <!-- Example 2 -->
+                <div class="bg-dark border border-gray-800 rounded-2xl p-6">
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <i data-feather="image" class="text-accent mr-2"></i>
+                        Image Generation
+                    </h3>
+                    <div class="code-block mb-4">
+                        <pre class="text-blue-400"><span class="text-blue-400">const</span> imageUrl = <span class="text-green-400">'https://pollinations.ai/p/A beautiful sunset?model=flux&width=1024&height=1024'</span>;</pre>
+                        <pre class="text-gray-400"></pre>
+                        <pre class="text-blue-400"><span class="text-blue-400">const</span> response = <span class="text-yellow-300">await</span> fetch(imageUrl);</pre>
+                        <pre class="text-blue-400"><span class="text-blue-400">const</span> imageBlob = <span class="text-yellow-300">await</span> response.blob();</pre>
+                        <pre class="text-gray-400"></pre>
+                        <pre class="text-blue-400"><span class="text-blue-400">const</span> imageUrl = <span class="text-yellow-300">URL</span>.<span class="text-yellow-300">createObjectURL</span>(imageBlob);</pre>
+                        <pre class="text-blue-400"><span class="text-yellow-300">document</span>.<span class="text-yellow-300">getElementById</span>(<span class="text-green-400">'image'</span>).src = imageUrl;</pre>
+                    </div>
+                    <p class="text-gray-400">
+                        Create stunning images from text prompts with our image generation API.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">
+                Start Building with <span class="text-primary">Vibecode API</span>
+            </h2>
+            <p class="text-gray-400 max-w-2xl mx-auto mb-8">
+                Get your API key and start integrating powerful AI capabilities into your applications today.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="px-8 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium glow">
+                    Get API Key
+                </button>
+                <button class="px-8 py-3 rounded-lg bg-dark border border-gray-700 hover:bg-gray-800 transition font-medium">
+                    View Documentation
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="py-12 bg-dark border-t border-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
+                            <i data-feather="code" class="text-white w-4 h-4"></i>
+                        </div>
+                        <span class="text-xl font-bold">Vibecode<span class="text-accent">Studio</span></span>
+                    </div>
+                    <p class="text-gray-400">
+                        Creative coding platform for developers and designers.
+                    </p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Product</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="index.html" class="hover:text-primary transition">Features</a></li>
+                        <li><a href="#" class="hover:text-primary transition">API</a></li>
+                        <li><a href="chat.html" class="hover:text-primary transition">Free Chat</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Documentation</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Company</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-primary transition">About</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Blog</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Careers</a></li>
+                        <li><a href="#" class="hover:text-primary transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-primary transition">
+                            <i data-feather="discord"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 Vibecode Studio. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Tab switching
+        document.getElementById('sdk-tab').addEventListener('click', function() {
+            this.classList.add('tab-active');
+            document.getElementById('fetch-tab').classList.remove('tab-active');
+        });
+        
+        document.getElementById('fetch-tab').addEventListener('click', function() {
+            this.classList.add('tab-active');
+            document.getElementById('sdk-tab').classList.remove('tab-active');
+        });
+        
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            const menu = document.querySelector('.mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+    </script>
+</body>
+</html>

chat.html

@@ -71,10 +71,10 @@
         <div class="hidden md:flex space-x-8">
             <a href="index.html" class="hover:text-primary transition">Home</a>
             <a href="#" class="hover:text-primary transition">Features</a>
-            <a href="#" class="hover:text-primary transition">API</a>
+            <a href="api.html" class="hover:text-primary transition">API</a>
             <a href="#" class="hover:text-primary transition">Pricing</a>
         </div>
-        <div class="flex items-center space-x-4">
+<div class="flex items-center space-x-4">
             <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/80 transition">Sign In</button>
             <button id="menu-toggle" class="md:hidden text-light">
                 <i data-feather="menu"></i>

index.html

@@ -70,10 +70,10 @@
         <div class="hidden md:flex space-x-8">
             <a href="#" class="hover:text-primary transition">Home</a>
             <a href="#" class="hover:text-primary transition">Features</a>
-            <a href="#" class="hover:text-primary transition">API</a>
+            <a href="api.html" class="hover:text-primary transition">API</a>
             <a href="chat.html" class="hover:text-primary transition">Chat</a>
         </div>
-        <div class="flex items-center space-x-4">
+<div class="flex items-center space-x-4">
             <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/80 transition">Get Started</button>
             <button id="menu-toggle" class="md:hidden text-light">
                 <i data-feather="menu"></i>
@@ -236,10 +236,10 @@
                             <span>Model selection and customization</span>
                         </li>
                     </ul>
-                    <button class="px-6 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium">
+                    <a href="api.html" class="px-6 py-3 rounded-lg bg-primary hover:bg-primary/80 transition font-medium inline-block">
                         View Documentation
-                    </button>
-                </div>
+                    </a>
+</div>
             </div>
         </div>
     </section>
@@ -283,11 +283,11 @@
                     <h4 class="text-lg font-semibold mb-4">Product</h4>
                     <ul class="space-y-2 text-gray-400">
                         <li><a href="#" class="hover:text-primary transition">Features</a></li>
-                        <li><a href="#" class="hover:text-primary transition">API</a></li>
+                        <li><a href="api.html" class="hover:text-primary transition">API</a></li>
                         <li><a href="chat.html" class="hover:text-primary transition">Free Chat</a></li>
                         <li><a href="#" class="hover:text-primary transition">Documentation</a></li>
                     </ul>
-                </div>
+</div>
 <div>
                     <h4 class="text-lg font-semibold mb-4">Company</h4>
                     <ul class="space-y-2 text-gray-400">