add "ask ai" to docs

Author: NawarA

docs/http-reference/examples/openai-compliant/chatCompletionsExample.mdx

@@ -9,7 +9,7 @@ Provides chat completions for all open source models that are `chat`, `audio-tex
 
 To specify a provider, prefix the model with the provider, e.g. `gpt-4` should be passed in as `openai/gpt4`
 
-We provide free api access to models from `openai`, `mistral`, and `google`.
+We provide access to models from `openai`, `mistral`, and `google`.
 
 You will need to supply a header `provider-key` in order to make requests to `anthropic`, and `cohere` models.
 

docs/http-reference/examples/openai-compliant/completionsExample.mdx

@@ -9,7 +9,7 @@ Provides completions for all open source models that are `text-generation`, it a
 
 To specify a provider, prefix the model with the provider, e.g. `davinci-002` should be passed in as `openai/davinci-002`
 
-We provide free api access to models from `openai`, `mistral`, and `google`.
+We provide access to models from `openai`, `mistral`, and `google`.
 
 You will need to supply a header `provider-key` in order to make requests to `anthropic`, and `cohere` models.
 

docs/model-api/docs/welcome.mdx

@@ -1,22 +1,14 @@
 ---
 title: 'Welcome'
-description: '1 API Key. 175k+ models.'
+description: 'The unified API for 100,000+ AI models'
 icon: 'hand-wave'
 mode: 'wide'
 ---
 
+import { AskAI } from '/snippets/ask-ai.jsx';
 import { tasks } from '/snippets/tasks.mdx';
 
-<Card
-  arrow
-  horizontal
-  color="#6073BF"
-  icon="circle-info"
-  href="/model-api/docs/get-started"
-  title="Are you new to Bytez?"
->
-  Get started by exploring our quick start guide.
-</Card>
+<AskAI />
 
 <br />
 

docs/snippets/ask-ai.jsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+
+export const AskAI = () => {
+  const [question, setQuestion] = useState('');
+
+  const basePrompt = 'Search https://docs.bytez.com and answer: ';
+  const encodedPrompt = encodeURIComponent(basePrompt + question);
+
+  const links = [
+    { name: 'ChatGPT', url: `https://chatgpt.com/?q=${encodedPrompt}` },
+    { name: 'Claude', url: `https://claude.ai/new?q=${encodedPrompt}` },
+    { name: 'Perplexity', url: `https://www.perplexity.ai/search?q=${encodedPrompt}` },
+  ];
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && question) {
+      window.open(`https://chatgpt.com/?q=${encodeURIComponent(basePrompt + question)}`, '_blank');
+    }
+  };
+
+  return (
+    <div
+      style={{
+        background: 'rgba(30, 32, 44, 0.6)',
+        border: '1px solid rgba(96, 115, 191, 0.3)',
+        borderRadius: '12px',
+        padding: '24px',
+        marginBottom: '24px',
+      }}
+    >
+      <h3 style={{ margin: '0 0 8px 0', fontSize: '1.25rem', color: '#D0BCFF' }}>
+        Ask AI about Bytez
+      </h3>
+      <p style={{ margin: '0 0 16px 0', opacity: 0.7, fontSize: '0.9rem' }}>
+        Get instant answers from our docs
+      </p>
+
+      <input
+        type="text"
+        placeholder="How do I run a model?"
+        value={question}
+        onChange={(e) => setQuestion(e.target.value)}
+        onKeyDown={handleKeyDown}
+        style={{
+          width: '100%',
+          padding: '12px 16px',
+          fontSize: '1rem',
+          marginTop: 8,
+          border: '1px solid rgba(96, 115, 191, 0.3)',
+          borderRadius: '8px',
+          background: 'rgba(0,0,0,0.3)',
+          color: 'inherit',
+          marginBottom: '16px',
+          boxSizing: 'border-box',
+        }}
+      />
+
+      <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+        {links.map(({ name, url }) => (
+          <a
+            key={name}
+            href={question ? url : '#'}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => !question && e.preventDefault()}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '10px 20px',
+              background: question ? '#E8DEF8' : 'rgba(96, 115, 191, 0.3)',
+              color: question ? '#332D41' : 'white',
+              borderRadius: '8px',
+              textDecoration: 'none',
+              fontWeight: 500,
+              fontSize: '0.9rem',
+              opacity: question ? 1 : 0.5,
+              cursor: question ? 'pointer' : 'not-allowed',
+              transition: 'all 0.2s',
+            }}
+          >
+            {name}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};