Add test-exports-vite, update docusaurus

docker-compose.yml

@@ -40,6 +40,14 @@ services:
       - ./langchain:/langchain
       - ./scripts:/scripts
     command: bash /scripts/docker-ci-entrypoint.sh
+  test-exports-vite:
+    image: node:18
+    working_dir: /app
+    volumes:
+      - ./test-exports-vite:/package
+      - ./langchain:/langchain
+      - ./scripts:/scripts
+    command: bash /scripts/docker-ci-entrypoint.sh
   success:
     image: alpine:3.14
     command: echo "Success"
@@ -54,3 +62,5 @@ services:
         condition: service_completed_successfully
       test-exports-vercel:
         condition: service_completed_successfully
+      test-exports-vite:
+        condition: service_completed_successfully

docs/docs/getting-started/install.md

@@ -38,7 +38,7 @@ import { OpenAI } from "langchain/llms/openai";
 
 If you are using TypeScript in an ESM project we suggest updating your `tsconfig.json` to include the following:
 
-```json
+```json title="tsconfig.json"
 {
   "compilerOptions": {
     ...
@@ -74,7 +74,7 @@ import { OpenAI } from "langchain/llms/openai";
 
 If you want to use LangChain in frontend `pages`, you need to add the following to your `next.config.js` to enable support for WebAssembly modules (which is required by the tokenizer library `@dqbd/tiktoken`):
 
-```js
+```js title="next.config.js"
 const nextConfig = {
   webpack(config) {
     config.experiments = {
@@ -87,6 +87,36 @@ const nextConfig = {
 };
 ```
 
+### Browser
+
+LangChain can be used in the browser. In our CI we test bundling LangChain with Webpack and Vite, but other bundlers should work too. You can import it using the following syntax:
+
+```typescript
+import { OpenAI } from "langchain/llms/openai";
+```
+
+#### Create React App
+
+If you're using `create-react-app` by default it doesn't support WebAssembly modules, so the tokenizer library `@dqbd/tiktoken` will not work in the browser. You can follow the instructions [here](https://github.com/dqbd/tiktoken/tree/main/js#create-react-app) to enable support for WebAssembly modules.
+
+#### Vite
+
+If you're using Vite, you need to add the following to your `vite.config.js` to enable support for WebAssembly modules (which is required by the tokenizer library `@dqbd/tiktoken`):
+
+```bash npm2yarn
+npm install -D vite-plugin-wasm vite-plugin-top-level-await
+```
+
+```js title="vite.config.js"
+import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [wasm(), topLevelAwait()],
+});
+```
+
 ## Updating from <0.0.52
 
 If you are updating from a version of LangChain prior to 0.0.52, you will need to update your imports to use the new path structure.
@@ -105,12 +135,12 @@ import { OpenAI } from "langchain/llms/openai";
 
 This applies to all imports from the following 6 modules, which have been split into submodules for each integration. The combined modules are deprecated, do not work outside of Node.js, and will be removed in a future version.
 
-- If you were importing from `langchain/llms`, see [LLMs](../modules/models/llms/integrations) for updated import paths.
-- If you were importing from `langchain/chat_models`, see [Chat Models](../modules/models/chat/integrations) for updated import paths.
-- If you were importing from `langchain/embeddings`, see [Embeddings](../modules/models/embeddings/integrations) for updated import paths.
-- If you were importing from `langchain/vectorstores`, see [Vector Stores](../modules/indexes/vector_stores/integrations/) for updated import paths.
-- If you were importing from `langchain/document_loaders`, see [Document Loaders](../modules/indexes/document_loaders/examples/) for updated import paths.
-- If you were importing from `langchain/retrievers`, see [Retrievers](../modules/indexes/retrievers/) for updated import paths.
+- If you were using `langchain/llms`, see [LLMs](../modules/models/llms/integrations) for updated import paths.
+- If you were using `langchain/chat_models`, see [Chat Models](../modules/models/chat/integrations) for updated import paths.
+- If you were using `langchain/embeddings`, see [Embeddings](../modules/models/embeddings/integrations) for updated import paths.
+- If you were using `langchain/vectorstores`, see [Vector Stores](../modules/indexes/vector_stores/integrations/) for updated import paths.
+- If you were using `langchain/document_loaders`, see [Document Loaders](../modules/indexes/document_loaders/examples/) for updated import paths.
+- If you were using `langchain/retrievers`, see [Retrievers](../modules/indexes/retrievers/) for updated import paths.
 
 Other modules are not affected by this change, and you can continue to import them from the same path.
 

docs/package.json

@@ -19,9 +19,9 @@
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,md,mdx}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.3.1",
+    "@docusaurus/core": "2.4.0",
+    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.4.0",
     "@mdx-js/react": "^1.6.22",
     "@mendable/search": "^0.0.79",
     "clsx": "^1.2.1",

examples/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "langchain-examples",
+  "name": "examples",
   "version": "0.0.0",
   "private": true,
   "description": "Langchain examples",

langchain/scripts/create-entrypoints.js

@@ -161,6 +161,7 @@ const testExports = [
   ["test-exports-cf", (p) => `export * from "langchain/${p}";`],
   ["test-exports-cra", (p) => `export * from "langchain/${p}";`],
   ["test-exports-vercel", (p) => `export * from "langchain/${p}";`],
+  ["test-exports-vite", (p) => `export * from "langchain/${p}";`],
 ];
 
 const updateJsonFile = (relativePath, updateFunction) => {

package.json

@@ -13,7 +13,8 @@
     "test-exports-cjs",
     "test-exports-cf",
     "test-exports-cra",
-    "test-exports-vercel"
+    "test-exports-vercel",
+    "test-exports-vite"
   ],
   "repository": {
     "type": "git",
@@ -32,7 +33,7 @@
     "test:int": "turbo run test:integration",
     "test:exports:docker": "docker compose up",
     "publish": "bash scripts/release-branch.sh && turbo run build lint test test:integration && yarn run test:exports:docker && yarn workspace langchain run release && echo '🔗 Open https://github.com/hwchase17/langchainjs/compare/release?expand=1 and merge the release PR'",
-    "example": "turbo run start --filter langchain-examples --",
+    "example": "turbo run start --filter examples --",
     "prepare": "husky install",
     "precommit": "turbo run precommit",
     "docs": "yarn workspace docs start"

test-exports-cf/src/index.ts

@@ -8,7 +8,7 @@
  * Learn more at https://developers.cloudflare.com/workers/
  */
 
-// import all entrypoints
+// import all entrypoints to test, do not do this in your own app
 import "./entrypoints.js";
 
 // Import a few things we'll use to test the exports

test-exports-cra/src/App.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 
-// import all entrypoints
+// import all entrypoints to test, do not do this in your own app
 import "./entrypoints.js";
 
 // Import a few things we'll use to test the exports

test-exports-vercel/src/pages/api/hello-edge.ts

@@ -1,6 +1,6 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-// import all entrypoints
+// import all entrypoints to test, do not do this in your own app
 import "../../entrypoints.js";
 
 // Import a few things we'll use to test the exports

test-exports-vercel/src/pages/api/hello-serverless.ts

@@ -1,6 +1,6 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-// import all entrypoints
+// import all entrypoints to test, do not do this in your own app
 import "../../entrypoints.js";
 
 // Import a few things we'll use to test the exports

test-exports-vercel/src/pages/index.tsx

@@ -1,4 +1,4 @@
-// import all entrypoints
+// import all entrypoints to test, do not do this in your own app
 import "../entrypoints.js";
 
 import Head from "next/head";

test-exports-vite/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

test-exports-vite/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

test-exports-vite/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "test-exports-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "tsc"
+  },
+  "dependencies": {
+    "langchain": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vite-plugin-top-level-await": "^1.3.0",
+    "vite-plugin-wasm": "^3.2.2"
+  }
+}

test-exports-vite/src/chain.ts

@@ -0,0 +1,38 @@
+// Import a few things we'll use to test the exports
+import { LLMChain } from "langchain/chains";
+import { ChatOpenAI } from "langchain/chat_models/openai";
+import {
+  ChatPromptTemplate,
+  HumanMessagePromptTemplate,
+} from "langchain/prompts";
+import { CallbackManager } from "langchain/callbacks";
+
+export function setupChain(element: HTMLButtonElement) {
+  const runChain = async () => {
+    const llm = new ChatOpenAI({
+      // Don't do this in your app, it would leak your API key
+      openAIApiKey: import.meta.env.VITE_OPENAI_API_KEY,
+      streaming: true,
+      callbackManager: CallbackManager.fromHandlers({
+        handleLLMNewToken: async (token) =>
+          console.log("handleLLMNewToken", token),
+      }),
+    });
+
+    // Test count tokens
+    const n = await llm.getNumTokens("Hello");
+    console.log("getNumTokens", n);
+
+    // Test a chain + prompt + model
+    const chain = new LLMChain({
+      llm,
+      prompt: ChatPromptTemplate.fromPromptMessages([
+        HumanMessagePromptTemplate.fromTemplate("{input}"),
+      ]),
+    });
+    const res = await chain.run("hello");
+
+    console.log("runChain", res);
+  };
+  element.addEventListener("click", runChain);
+}

test-exports-vite/src/entrypoints.js

@@ -0,0 +1,25 @@
+export * from "langchain/agents";
+export * from "langchain/base_language";
+export * from "langchain/tools";
+export * from "langchain/chains";
+export * from "langchain/embeddings/base";
+export * from "langchain/embeddings/fake";
+export * from "langchain/embeddings/openai";
+export * from "langchain/llms/base";
+export * from "langchain/llms/openai";
+export * from "langchain/prompts";
+export * from "langchain/vectorstores/base";
+export * from "langchain/vectorstores/prisma";
+export * from "langchain/text_splitter";
+export * from "langchain/memory";
+export * from "langchain/document";
+export * from "langchain/docstore";
+export * from "langchain/document_loaders/base";
+export * from "langchain/chat_models/base";
+export * from "langchain/chat_models/openai";
+export * from "langchain/chat_models/anthropic";
+export * from "langchain/schema";
+export * from "langchain/callbacks";
+export * from "langchain/output_parsers";
+export * from "langchain/retrievers/remote";
+export * from "langchain/cache";

test-exports-vite/src/main.ts

@@ -0,0 +1,27 @@
+// import all entrypoints to test, do not do this in your own app
+import "./entrypoints.js";
+
+import "./style.css";
+import typescriptLogo from "./typescript.svg";
+import viteLogo from "/vite.svg";
+import { setupChain } from "./chain";
+
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="chain" type="button">click to run chain</button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`;
+
+setupChain(document.querySelector<HTMLButtonElement>("#chain")!);