adding jsx to the file itself

docs/my-website/docs/index.md

@@ -2,7 +2,65 @@
 displayed_sidebar: tutorialSidebar
 ---
 # litellm
-import QueryParamReader from './QueryParamReader';
+import { useState, useEffect } from 'react';
+
+const CodeBlock = ({ token }) => {
+  const codeWithToken = `
+from litellm import completion
+
+# set ENV variables 
+os.environ["LITELLM_TOKEN"] = '${token}'
+
+messages = [{ "content": "Hello, how are you?","role": "user"}]
+
+# openai call
+response = completion(model="gpt-3.5-turbo", messages=messages)
+
+# cohere call
+response = completion("command-nightly", messages)
+`;
+
+  const codeWithoutToken = `
+from litellm import completion
+
+## set ENV variables
+os.environ["OPENAI_API_KEY"] = "openai key"
+os.environ["COHERE_API_KEY"] = "cohere key"
+
+
+messages = [{ "content": "Hello, how are you?","role": "user"}]
+
+# openai call
+response = completion(model="gpt-3.5-turbo", messages=messages)
+
+# cohere call
+response = completion("command-nightly", messages)
+`;
+  return (
+    <pre>
+        {console.log("token: ", token)}
+      {token ? codeWithToken : codeWithoutToken}
+    </pre>
+  )
+}
+
+const QueryParamReader = () => {
+  const [token, setToken] = useState(null);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get('token');
+    setToken(token);
+  }, []);
+
+  return (
+    <div>
+      <CodeBlock token={token} />
+    </div>
+  );
+}
+
+export default QueryParamReader;
 
 [![PyPI Version](https://img.shields.io/pypi/v/litellm.svg)](https://pypi.org/project/litellm/)
 [![PyPI Version](https://img.shields.io/badge/stable%20version-v0.1.345-blue?color=green&link=https://pypi.org/project/litellm/0.1.1/)](https://pypi.org/project/litellm/0.1.1/)