docs: add embeddings and vector store tabs (#7347)

docs/core_docs/docs/integrations/chat/index.mdx

@@ -12,6 +12,14 @@ hide_table_of_contents: true
 If you'd like to write your own chat model, see [this how-to](/docs/how_to/custom_chat). If you'd like to contribute an integration, see [Contributing integrations](/docs/contributing).
 :::
 
+import ChatModelTabs from "@theme/ChatModelTabs";
+
+<ChatModelTabs openaiParams={`{ model: "gpt-4o-mini" }`} />
+
+```python
+await model.invoke("Hello, world!")
+```
+
 ## Featured providers
 
 | Model                                                                    | Stream | JSON mode | [Tool Calling](/docs/how_to/tool_calling/) | [`withStructuredOutput()`](/docs/how_to/structured_output/#the-.withstructuredoutput-method) | [Multimodal](/docs/how_to/multimodal_inputs/) |

docs/core_docs/docs/integrations/text_embedding/index.mdx

@@ -9,6 +9,14 @@ sidebar_class_name: hidden
 
 This page documents integrations with various model providers that allow you to use embeddings in LangChain.
 
+import EmbeddingTabs from "@theme/EmbeddingTabs";
+
+<EmbeddingTabs />
+
+```javascript
+await embeddings.embedQuery("Hello, world!");
+```
+
 import { CategoryTable, IndexTable } from "@theme/FeatureTables";
 
 <IndexTable />

docs/core_docs/docs/integrations/vectorstores/index.mdx

@@ -7,6 +7,14 @@ sidebar_class_name: hidden
 
 A [vector store](/docs/concepts/#vectorstores) stores [embedded](/docs/concepts/embedding_models) data and performs similarity search.
 
+import EmbeddingTabs from "@theme/EmbeddingTabs";
+
+<EmbeddingTabs />
+
+import VectorStoreTabs from "@theme/VectorStoreTabs";
+
+<VectorStoreTabs />
+
 LangChain.js integrates with a variety of vector stores. You can check out a full list below:
 
 import { CategoryTable, IndexTable } from "@theme/FeatureTables";

docs/core_docs/src/theme/EmbeddingTabs.js

@@ -0,0 +1,127 @@
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment */
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme-original/CodeBlock";
+import Npm2Yarn from "@theme/Npm2Yarn";
+
+const DEFAULTS = {
+  openaiParams: `{\n  model: "text-embedding-3-large"\n}`,
+  azureParams: `{\n  azureOpenAIApiEmbeddingsDeploymentName: "text-embedding-ada-002"\n}`,
+  awsParams: `{\n  model: "amazon.titan-embed-text-v1"\n}`,
+  vertexParams: `{\n  model: "text-embedding-004"\n}`,
+  mistralParams: `{\n  model: "mistral-embed"\n}`,
+  cohereParams: `{\n  model: "embed-english-v3.0"\n}`,
+};
+
+/**
+ * @typedef {Object} EmbeddingTabsProps - Component props.
+ * @property {string} [openaiParams]
+ * @property {string} [azureParams]
+ * @property {string} [awsParams]
+ * @property {string} [vertexParams]
+ * @property {string} [mistralParams]
+ * @property {string} [cohereParams]
+ *
+ * @property {boolean} [hideOpenai]
+ * @property {boolean} [hideAzure]
+ * @property {boolean} [hideAws]
+ * @property {boolean} [hideVertex]
+ * @property {boolean} [hideMistral]
+ * @property {boolean} [hideCohere]
+ *
+ * @property {string} [customVarName] - Custom variable name for the model. Defaults to `"embeddings"`.
+ */
+
+/**
+ * @param {EmbeddingTabsProps} props - Component props.
+ */
+export default function EmbeddingTabs(props) {
+  const { customVarName } = props;
+
+  const embeddingsVarName = customVarName ?? "embeddings";
+
+  const openaiParams = props.openaiParams ?? DEFAULTS.openaiParams;
+  const azureParams = props.azureParams ?? DEFAULTS.azureParams;
+  const awsParams = props.awsParams ?? DEFAULTS.awsParams;
+  const vertexParams = props.vertexParams ?? DEFAULTS.vertexParams;
+  const mistralParams = props.mistralParams ?? DEFAULTS.mistralParams;
+  const cohereParams = props.cohereParams ?? DEFAULTS.cohereParams;
+  const providers = props.providers ?? [
+    "openai",
+    "azure",
+    "aws",
+    "vertex",
+    "mistral",
+    "cohere",
+  ];
+
+  const tabs = {
+    openai: {
+      value: "openai",
+      label: "OpenAI",
+      default: true,
+      text: `import { OpenAIEmbeddings } from "@langchain/openai";\n\nconst ${embeddingsVarName} = new OpenAIEmbeddings(${openaiParams});`,
+      envs: `OPENAI_API_KEY=your-api-key`,
+      dependencies: "@langchain/openai",
+    },
+    azure: {
+      value: "azure",
+      label: "Azure",
+      default: false,
+      text: `import { AzureOpenAIEmbeddings } from "@langchain/openai";\n\nconst ${embeddingsVarName} = new AzureOpenAIEmbeddings(${azureParams});`,
+      envs: `AZURE_OPENAI_API_INSTANCE_NAME=<YOUR_INSTANCE_NAME>\nAZURE_OPENAI_API_KEY=<YOUR_KEY>\nAZURE_OPENAI_API_VERSION="2024-02-01"`,
+      dependencies: "@langchain/openai",
+    },
+    aws: {
+      value: "aws",
+      label: "AWS",
+      default: false,
+      text: `import { BedrockEmbeddings } from "@langchain/aws";\n\nconst ${embeddingsVarName} = new BedrockEmbeddings(${awsParams});`,
+      envs: `BEDROCK_AWS_REGION=your-region`,
+      dependencies: "@langchain/aws",
+    },
+    vertex: {
+      value: "vertex",
+      label: "VertexAI",
+      default: false,
+      text: `import { VertexAIEmbeddings } from "@langchain/google-vertexai";\n\nconst ${embeddingsVarName} = new VertexAIEmbeddings(${vertexParams});`,
+      envs: `GOOGLE_APPLICATION_CREDENTIALS=credentials.json`,
+      dependencies: "@langchain/google-vertexai",
+    },
+    mistral: {
+      value: "mistral",
+      label: "MistralAI",
+      default: false,
+      text: `import { MistralAIEmbeddings } from "@langchain/mistralai";\n\nconst ${embeddingsVarName} = new MistralAIEmbeddings(${mistralParams});`,
+      envs: `MISTRAL_API_KEY=your-api-key`,
+      dependencies: "@langchain/mistralai",
+    },
+    cohere: {
+      value: "cohereParams",
+      label: "Cohere",
+      default: false,
+      text: `import { CohereEmbeddings } from "@langchain/cohere";\n\nconst ${embeddingsVarName} = new CohereEmbeddings(${cohereParams});`,
+      envs: `COHERE_API_KEY=your-api-key`,
+      dependencies: "@langchain/cohere",
+    },
+  };
+
+  const displayedTabs = providers.map((provider) => tabs[provider]);
+
+  return (
+    <div>
+      <h3>Pick your embedding model:</h3>
+      <Tabs groupId="modelTabs">
+        {displayedTabs.map((tab) => (
+          <TabItem value={tab.value} label={tab.label} key={tab.value}>
+            <h4>Install dependencies</h4>
+            <Npm2Yarn>{tab.dependencies}</Npm2Yarn>
+            <CodeBlock language="bash">{tab.envs}</CodeBlock>
+            <CodeBlock language="typescript">{tab.text}</CodeBlock>
+          </TabItem>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

docs/core_docs/src/theme/VectorStoreTabs.js

@@ -0,0 +1,105 @@
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme-original/CodeBlock";
+import Npm2Yarn from "@theme/Npm2Yarn";
+
+export default function VectorStoreTabs(props) {
+  const { customVarName } = props;
+
+  const vectorStoreVarName = customVarName ?? "vectorStore";
+
+  const tabItems = [
+    {
+      value: "Memory",
+      label: "Memory",
+      text: `import { MemoryVectorStore } from "langchain/vectorstores/memory";\n\nconst ${vectorStoreVarName} = new MemoryVectorStore(embeddings);`,
+      dependencies: "langchain",
+      default: true,
+    },
+    {
+      value: "Chroma",
+      label: "Chroma",
+      text: `import { Chroma } from "@langchain/community/vectorstores/chroma";\n\nconst ${vectorStoreVarName} = new Chroma(embeddings, {\n  collectionName: "a-test-collection",\n});`,
+      dependencies: "@langchain/community",
+      default: true,
+    },
+    {
+      value: "FAISS",
+      label: "FAISS",
+      text: `import { FaissStore } from "@langchain/community/vectorstores/faiss";\n\nconst ${vectorStoreVarName} = new FaissStore(embeddings, {});`,
+      dependencies: "@langchain/community",
+      default: false,
+    },
+    {
+      value: "MongoDB",
+      label: "MongoDB",
+      text: `import { MongoDBAtlasVectorSearch } from "@langchain/mongodb"
+import { MongoClient } from "mongodb";
+
+const client = new MongoClient(process.env.MONGODB_ATLAS_URI || "");
+const collection = client
+  .db(process.env.MONGODB_ATLAS_DB_NAME)
+  .collection(process.env.MONGODB_ATLAS_COLLECTION_NAME);
+
+const ${vectorStoreVarName} = new MongoDBAtlasVectorSearch(embeddings, {
+  collection: collection,
+  indexName: "vector_index",
+  textKey: "text",
+  embeddingKey: "embedding",
+});`,
+      dependencies: "@langchain/mongodb",
+      default: false,
+    },
+    {
+      value: "PGVector",
+      label: "PGVector",
+      text: `import PGVectorStore from "@langchain/community/vectorstores/pgvector";
+
+const ${vectorStoreVarName} = await PGVectorStore.initialize(embeddings, {})`,
+      dependencies: "@langchain/community",
+      default: false,
+    },
+    {
+      value: "Pinecone",
+      label: "Pinecone",
+      text: `import { PineconeStore } from "@langchain/pinecone";
+import { Pinecone as PineconeClient } from "@pinecone-database/pinecone";
+
+const pinecone = new PineconeClient();
+const ${vectorStoreVarName} = new PineconeStore(embeddings, {
+  pineconeIndex,
+  maxConcurrency: 5,
+});`,
+      dependencies: "@langchain/pinecone",
+      default: false,
+    },
+    {
+      value: "Qdrant",
+      label: "Qdrant",
+      text: `import { QdrantVectorStore } from "@langchain/qdrant";
+
+const ${vectorStoreVarName} = await QdrantVectorStore.fromExistingCollection(embeddings, {
+  url: process.env.QDRANT_URL,
+  collectionName: "langchainjs-testing",
+});`,
+      dependencies: "@langchain/qdrant",
+      default: false,
+    },
+  ];
+
+  return (
+    <div>
+      <h3>Pick your vector store:</h3>
+      <Tabs groupId="vectorStoreTabs">
+        {tabItems.map((tab) => (
+          <TabItem value={tab.value} label={tab.label} key={tab.value}>
+            <h4>Install dependencies</h4>
+            <Npm2Yarn>{tab.dependencies}</Npm2Yarn>
+            <CodeBlock language="typescript">{tab.text}</CodeBlock>
+          </TabItem>
+        ))}
+      </Tabs>
+    </div>
+  );
+}