docs[patch]: Add onlyWsa prop to chat model tabs, other nits (#5405)

* docs[patch]: Add onlyWsa prop to chat model tabs, other nits

* fix link

* chore: lint files

* cr

Author: bracesproul

docs/core_docs/docs/how_to/structured_output.ipynb

@@ -29,20 +29,16 @@
     "\n",
     "## The `.withStructuredOutput()` method\n",
     "\n",
-    "There are several strategies that models can use under the hood. For some of the most popular model providers, including [OpenAI](/docs/integrations/platforms/openai/), [Anthropic](/docs/integrations/platforms/anthropic/), and [Mistral](/docs/integrations/providers/mistralai/), LangChain implements a common interface that abstracts away these strategies called `.withStructuredOutput`.\n",
+    "There are several strategies that models can use under the hood. For some of the most popular model providers, including [Anthropic](/docs/integrations/platforms/anthropic/), [Google VertexAI](/docs/integrations/platforms/google/), [Mistral](/docs/integrations/providers/mistralai/), and [OpenAI](/docs/integrations/platforms/openai/) LangChain implements a common interface that abstracts away these strategies called `.withStructuredOutput`.\n",
     "\n",
     "By invoking this method (and passing in [JSON schema](https://json-schema.org/) or a [Zod schema](https://zod.dev/)) the model will add whatever model parameters + output parsers are necessary to get back structured output matching the requested schema. If the model supports more than one way to do this (e.g., function calling vs JSON mode) - you can configure which method to use by passing into that method.\n",
     "\n",
-    "You can find the [current list of models that support this method here](/docs/integrations/chat/).\n",
-    "\n",
     "Let's look at some examples of this in action! We'll use Zod to create a simple response schema.\n",
     "\n",
     "```{=mdx}\n",
     "import ChatModelTabs from \"@theme/ChatModelTabs\";\n",
     "\n",
-    "<ChatModelTabs\n",
-    "  customVarName=\"model\"\n",
-    "/>\n",
+    "<ChatModelTabs onlyWsa={true} />\n",
     "```"
    ]
   },

docs/core_docs/docs/mdx_components/integration_install_tooltip.mdx

@@ -1,3 +1,3 @@
 :::tip
-See [this section for general instructions on installing integration packages](/docs/get_started/installation#installing-integration-packages).
+See [this section for general instructions on installing integration packages](/docs/how_to/installation#installing-integration-packages).
 :::

docs/core_docs/src/theme/ChatModelTabs.js

@@ -25,23 +25,34 @@ function InstallationInfo({ children }) {
 }
 
 const DEFAULTS = {
-  openaiParams: `{\n  model: "gpt-3.5-turbo-0125",\n  temperature: 0\n}`,
+  openaiParams: `{\n  model: "gpt-3.5-turbo",\n  temperature: 0\n}`,
   anthropicParams: `{\n  model: "claude-3-sonnet-20240229",\n  temperature: 0\n}`,
   fireworksParams: `{\n  model: "accounts/fireworks/models/firefunction-v1",\n  temperature: 0\n}`,
   mistralParams: `{\n  model: "mistral-large-latest",\n  temperature: 0\n}`,
+  groqParams: `{\n  model: "mixtral-8x7b-32768",\n  temperature: 0\n}`,
+  vertexParams: `{\n  model: "gemini-1.5-pro",\n  temperature: 0\n}`,
 };
 
+const MODELS_WSA = ["openai", "anthropic", "mistral", "groq", "vertex"];
+
 /**
  * @typedef {Object} ChatModelTabsProps - Component props.
- * @property {string} [openaiParams] - Parameters for OpenAI chat model. Defaults to `"{\n  model: "gpt-3.5-turbo-0125",\n  temperature: 0\n}"`
+ * @property {string} [openaiParams] - Parameters for OpenAI chat model. Defaults to `"{\n  model: "gpt-3.5-turbo",\n  temperature: 0\n}"`
  * @property {string} [anthropicParams] - Parameters for Anthropic chat model. Defaults to `"{\n  model: "claude-3-sonnet-20240229",\n  temperature: 0\n}"`
  * @property {string} [fireworksParams] - Parameters for Fireworks chat model. Defaults to `"{\n  model: "accounts/fireworks/models/firefunction-v1",\n  temperature: 0\n}"`
  * @property {string} [mistralParams] - Parameters for Mistral chat model. Defaults to `"{\n  model: "mistral-large-latest",\n  temperature: 0\n}"`
+ * @property {string} [groqParams] - Parameters for Groq chat model. Defaults to `"{\n  model: "mixtral-8x7b-32768",\n  temperature: 0\n}"`
+ * @property {string} [vertexParams] - Parameters for Google VertexAI chat model. Defaults to `"{\n  model: "gemini-1.5-pro",\n  temperature: 0\n}"`
+ *
  * @property {boolean} [hideOpenai] - Whether or not to hide OpenAI chat model.
  * @property {boolean} [hideAnthropic] - Whether or not to hide Anthropic chat model.
  * @property {boolean} [hideFireworks] - Whether or not to hide Fireworks chat model.
  * @property {boolean} [hideMistral] - Whether or not to hide Mistral chat model.
+ * @property {boolean} [hideGroq] - Whether or not to hide Mistral chat model.
+ * @property {boolean} [hideVertex] - Whether or not to hide Mistral chat model.
+ *
  * @property {string} [customVarName] - Custom variable name for the model. Defaults to `"model"`.
+ * @property {boolean} [onlyWsa] - Only display models which have `withStructuredOutput` implemented.
  */
 
 /**
@@ -56,49 +67,71 @@ export default function ChatModelTabs(props) {
   const anthropicParams = props.anthropicParams ?? DEFAULTS.anthropicParams;
   const fireworksParams = props.fireworksParams ?? DEFAULTS.fireworksParams;
   const mistralParams = props.mistralParams ?? DEFAULTS.mistralParams;
+  const groqParams = props.groqParams ?? DEFAULTS.groqParams;
+  const vertexParams = props.vertexParams ?? DEFAULTS.vertexParams;
   const providers = props.providers ?? [
     "openai",
     "anthropic",
     "fireworks",
     "mistral",
+    "groq",
+    "vertex",
   ];
 
   const tabs = {
     openai: {
-      value: "OpenAI",
+      value: "openai",
       label: "OpenAI",
       default: true,
       text: `import { ChatOpenAI } from "@langchain/openai";\n\nconst ${llmVarName} = new ChatOpenAI(${openaiParams});`,
       envs: `OPENAI_API_KEY=your-api-key`,
       dependencies: "@langchain/openai",
     },
     anthropic: {
-      value: "Anthropic",
+      value: "anthropic",
       label: "Anthropic",
       default: false,
       text: `import { ChatAnthropic } from "@langchain/anthropic";\n\nconst ${llmVarName} = new ChatAnthropic(${anthropicParams});`,
       envs: `ANTHROPIC_API_KEY=your-api-key`,
       dependencies: "@langchain/anthropic",
     },
     fireworks: {
-      value: "FireworksAI",
+      value: "fireworks",
       label: "FireworksAI",
       default: false,
       text: `import { ChatFireworks } from "@langchain/community/chat_models/fireworks";\n\nconst ${llmVarName} = new ChatFireworks(${fireworksParams});`,
       envs: `FIREWORKS_API_KEY=your-api-key`,
       dependencies: "@langchain/community",
     },
     mistral: {
-      value: "MistralAI",
+      value: "mistral",
       label: "MistralAI",
       default: false,
       text: `import { ChatMistralAI } from "@langchain/mistralai";\n\nconst ${llmVarName} = new ChatMistralAI(${mistralParams});`,
       envs: `MISTRAL_API_KEY=your-api-key`,
       dependencies: "@langchain/mistralai",
     },
+    groq: {
+      value: "groq",
+      label: "Groq",
+      default: false,
+      text: `import { ChatGroq } from "@langchain/groq";\n\nconst ${llmVarName} = new ChatGroq(${groqParams});`,
+      envs: `GROQ_API_KEY=your-api-key`,
+      dependencies: "@langchain/groq",
+    },
+    vertex: {
+      value: "vertex",
+      label: "VertexAI",
+      default: false,
+      text: `import { ChatVertexAI } from "@langchain/google-vertexai";\n\nconst ${llmVarName} = new ChatVertexAI(${vertexParams});`,
+      envs: `GOOGLE_APPLICATION_CREDENTIALS=credentials.json`,
+      dependencies: "@langchain/google-vertexai",
+    },
   };
 
-  const displayedTabs = providers.map((provider) => tabs[provider]);
+  const displayedTabs = (props.onlyWsa ? MODELS_WSA : providers).map(
+    (provider) => tabs[provider]
+  );
 
   return (
     <div>