Merge pull request langchain-ai#16 from langchain-ai/erick/hub-docs-u…

…pdates

Hub Docs Updates

docs/hub/dev-setup-py.mdx → docs/hub/dev-setup.mdx

@@ -1,22 +1,27 @@
 ---
-sidebar_label: Python Setup
+sidebar_label: Developer Setup
 sidebar_position: 2
 ---
-# Python Setup
 
-This guide will continue from the hub quickstart, using the Python SDK to interact with the hub instead of the Playground UI.
+import {
+  HubInstallationCodeTabs,
+  HubPullCodeTabs,
+  HubPushCodeTabs,
+} from "@site/src/components/Hub";
+
+# Developer Setup
+
+This guide will continue from the hub quickstart, using the Python or TypeScript SDK to interact with the hub instead of the Playground UI.
 
 This guide assumes you've gone through the Hub [Quick Start](./quickstart) including login-required steps.
 
-If you don't yet have an account, you'll only be able to pull public objects in steps 1 and 3.
+If you don't yet have an account, you'll only be able to pull public objects.
 
 ## 1. Install/upgrade packages
 
 **Note:** You likely need to upgrade even if they're already installed!
 
-```bash
-pip install --upgrade langchain langchainhub 
-```
+<HubInstallationCodeTabs />
 
 ## 2. Configuring environment variables
 
@@ -26,32 +31,14 @@ Get an API key for your **Personal** organization if you have not yet. The hub w
 export LANGCHAIN_HUB_API_KEY="ls_..."
 ```
 
-## 3. Pull an object from the hub and use it
-
-```python
-from langchain import hub
+If you already have `LANGCHAIN_API_KEY` set to a personal organization’s api key from LangSmith, you can skip this.
 
-# pull a chat prompt
-prompt = hub.pull("efriis/my-first-prompt")
-
-# create a model to use it with
-from langchain.chat_models import ChatOpenAI
-model = ChatOpenAI()
+## 3. Pull an object from the hub and use it
 
-# use it in a runnable
-runnable = prompt | model
-runnable.invoke({
-	"profession": "biologist",
-	"question": "What is special about parrots?",
-})
-```
+<HubPullCodeTabs />
 
-## 4. Push it back to your personal organization as a private prompt
+## 4. Push a prompt to your personal organization
 
 For this step, you'll need the `handle` for your account!
 
-```python
-from langchain import hub
-
-hub.push("<handle>/my-first-prompt", prompt)
-```
+<HubPushCodeTabs />

docs/hub/faq.mdx

@@ -1,16 +1,18 @@
 ---
 sidebar_label: FAQs
-sidebar_position: 4
+sidebar_position: 3
 ---
 # Frequently Asked Questions
 
 ### Why can't I use my organization with hub?
 
 Hub is currently only available for "Personal" organizations! We are working on adding support for other organizations.
 
-### Why can't I push anything other than PromptTemplates and ChatPromptTemplates?
+### Why can't I push anything other than prompts?
 
-Hub currently only supports these two types of LangChain objects. We are working on adding support for more!
+Hub currently only supports LangChain prompt objects. We are working on adding support for more!
+
+If you have a specific request, please join the `hub-feedback` [discord](https://discord.gg/6adMQxSpJS) channel and let us know!
 
 ### Can I upload a prompt to the hub from a LangSmith Trace?
 

docs/hub/quickstart.mdx

@@ -44,7 +44,7 @@ For this example, we'll use the following prompt: [https://smith.langchain.com/h
 
 To start, you can get a sense of what the prompt does just by looking at it (this one is pretty straightforward).
 Below the contents of the prompt, you can see a code snippet of how to use it in Python. For more information on
-using hub prompts from code, finish this guide and check out the developer guides in [Python](dev-setup-py) or [TypeScript](dev-setup-ts).
+using hub prompts from code, finish this guide and check out the [developer guide](dev-setup).
 
 Next, let's try out the object in the playground by clicking the [playground button](https://smith.langchain.com/hub/efriis/my-first-prompt/playground) in the top-right.
 
@@ -91,3 +91,4 @@ Once you've run it, we can commit it directly to a new prompt under your user. C
 ![Hub Playground Commit](static/hub-playground-commit.png)
 
 Here, you can create a new repo called `my-first-prompt` and use this as a first commit! Once you've done that, you'll be redirected to your new prompt.
+

src/components/Hub.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from '@theme/CodeBlock';
+
+import {
+  CodeTabs,
+  PythonBlock,
+  TypeScriptBlock,
+  ShellBlock,
+} from './InstructionsWithCode';
+
+export const HubInstallationCodeTabs = () => (
+  <CodeTabs
+    groupId="client-language"
+    tabs={[
+      {
+        value: 'python',
+        label: 'pip',
+        language: 'bash',
+        content: `pip install -U langchain langchainhub`,
+      },
+      {
+        value: 'typescript',
+        label: 'yarn',
+        language: 'bash',
+        content: `yarn add langchain langchainhub`,
+      },
+      {
+        value: 'npm',
+        label: 'npm',
+        language: 'bash',
+        content: `npm install -S langchain langchainhub`,
+      },
+      {
+        value: 'pnpm',
+        label: 'pnpm',
+        language: 'bash',
+        content: `pnpm add langchain langchainhub`,
+      },
+    ]}
+  />
+);
+
+export const HubPullCodeTabs = ({}) => {
+  const pyBlock = `from langchain import hub
+
+# pull a chat prompt
+prompt = hub.pull("efriis/my-first-prompt")
+
+# create a model to use it with
+from langchain.chat_models import ChatOpenAI
+model = ChatOpenAI()
+
+# use it in a runnable
+runnable = prompt | model
+runnable.invoke({
+	"profession": "biologist",
+	"question": "What is special about parrots?",
+})`;
+
+const jsBlock = `// import
+import * as hub from "langchain/hub";
+import { ChatOpenAI } from "langchain/chat_models/openai";
+
+// pull a chat prompt
+const prompt = await hub.pull("efriis/my-first-prompt");
+
+// create a model to use it with
+const model = new ChatOpenAI();
+
+// use it in a runnable
+const runnable = prompt.pipe(model);
+const result = await runnable.invoke({
+	"profession": "biologist",
+	"question": "What is special about parrots?",
+});
+
+console.log(result);`
+
+  return (
+    <Tabs groupId="client-language">
+      <TabItem key="python" value="python" label="Python">
+        <CodeBlock className="python" language="python">
+          {pyBlock}
+        </CodeBlock>
+      </TabItem>
+      <TabItem key="typescript" value="typescript" label="TypeScript">
+        <CodeBlock className="typescript" language="typescript">
+          {jsBlock}
+        </CodeBlock>
+      </TabItem>
+    </Tabs>
+  );
+};
+
+export const HubPushCodeTabs = ({}) => {
+  const pyBlock = `from langchain import hub
+from langchain.prompts.chat import ChatPromptTemplate
+
+prompt = ChatPromptTemplate.from_template("tell me a joke about {topic}")
+
+hub.push("<handle>/topic-joke-generator", prompt)`;
+
+const jsBlock = `import * as hub from "langchain/hub";
+import {
+  ChatPromptTemplate,
+  HumanMessagePromptTemplate,
+} from 'langchain/prompts';
+
+const message = HumanMessagePromptTemplate.fromTemplate(
+  'tell me a joke about {topic}'
+);
+const prompt = ChatPromptTemplate.fromPromptMessages([message]);
+
+await hub.push("<handle>/my-first-prompt", prompt);`
+
+  return (
+    <Tabs groupId="client-language">
+      <TabItem key="python" value="python" label="Python">
+        <CodeBlock className="python" language="python">
+          {pyBlock}
+        </CodeBlock>
+      </TabItem>
+      <TabItem key="typescript" value="typescript" label="TypeScript">
+        <CodeBlock className="typescript" language="typescript">
+          {jsBlock}
+        </CodeBlock>
+      </TabItem>
+    </Tabs>
+  );
+};