WIP agent template quickstart for agent builder

Author: katmayb

src/docs.json

@@ -1301,6 +1301,7 @@
                   "pages": [
                     "langsmith/agent-builder-essentials",
                     "langsmith/agent-builder-templates",
+                    "langsmith/agent-builder-quickstart",
                     "langsmith/agent-builder-setup",
                     "langsmith/agent-builder-workspace-vs-private"
                   ]

src/langsmith/agent-builder-quickstart.mdx

@@ -0,0 +1,187 @@
+---
+title: Build an agent from a template
+sidebarTitle: Template quickstart
+---
+
+Create your first AI agent step-by-step. No coding required. In this quickstart, you'll use the pre-defined **Email Assistant** [template](/langsmith/agent-builder-templates) that organizes and manages your inbox for you.
+
+Feel free to follow along with this example or you can:
+
+- Customize the instructions and tools for your own agent needs.
+- Select a different template.
+
+<Callout icon="comment" color="#8B5CF6" iconType="regular">
+You'll interact with your agent through chat, just like texting a helpful assistant.
+</Callout>
+
+## Before you start
+
+You'll need:
+- A LangSmith account ([sign up here](https://smith.langchain.com)).
+- A Gmail account.
+- A Google calendar.
+- An OpenAI or Anthropic API key (Step 1 will show you how to get one).
+
+## Step 1. Get your API key
+
+Your agent needs an API key to connect to an AI model. The AI model is what allows your agent to understand and respond to your requests.
+
+<Tabs>
+  <Tab title="OpenAI (ChatGPT)">
+    1. Go to [platform.openai.com/api-keys](https://platform.openai.com/api-keys).
+    1. Click **Create new secret key**.
+    1. Give it a name like "Agent Builder".
+    1. Copy the key (it starts with `sk-`).
+    1. Save it somewhere safe, you'll need it in Step 2.
+  </Tab>
+
+  <Tab title="Anthropic (Claude)">
+    1. Go to [console.anthropic.com/settings/keys](https://console.anthropic.com/settings/keys).
+    2. Click **Create Key**.
+    3. Give it a name like "Agent Builder".
+    4. Copy the key (it starts with `sk-ant-`).
+    5. Save it somewhere safe, you'll need it in Step 2.
+  </Tab>
+</Tabs>
+
+<Info>
+**Cost:** Both services charge based on use.
+</Info>
+
+## Step 2. Add your API key to LangSmith
+
+Now you'll add your API key to LangSmith so your agents can use it:
+
+<Steps>
+  <Step title="Open Settings">
+    1. Go to [smith.langchain.com](https://smith.langchain.com).
+    2. Click the <Icon icon="gear" /> **Settings** icon in the bottom left.
+  </Step>
+
+  <Step title="Go to Secrets">
+    Click the **Secrets** tab at the top.
+  </Step>
+
+  <Step title="Add your key">
+    1. Click **Add secret**.
+    2. For **Key**, enter:
+       - `OPENAI_API_KEY` (if using OpenAI)
+       - `ANTHROPIC_API_KEY` (if using Anthropic)
+    3. For **Value**, paste the API key you copied in Step 1.
+    4. Click **Save secret**.
+  </Step>
+</Steps>
+
+<Callout type="success" icon="check" color="#10B981" iconType="regular">
+Your agent now has access to an AI model to understand and respond to your requests. Next, you'll create your agent.
+</Callout>
+
+## Step 3. Create your agent
+
+<Steps>
+  <Step title="Navigate to Agent Builder">
+    1. In the [LangSmith UI](https://smith.langchain.com), click <Icon icon="mouse-pointer"/> **Switch to Agent Builder** at the top of the left-hand navigation.
+  </Step>
+
+  <Step title="Choose a template">
+    1. Select **Templates** in the left-hand navigation.
+    1. Select **Email Assistant** template.
+    1. Click **Use this template**.
+
+    <Tip>
+    If you don't want to start with a template, you have two other options. From the **+ New Agent** page:
+    - Use the chat interface to describe your agent, and it will help you create it step-by-step.
+    - Select **Create manually instead** to build your agent without any pre-filled responses on the configuration page.
+    </Tip>
+  </Step>
+
+  <Step title="Authorize accounts">
+    Your agent will ask you to connect your Google accounts:
+
+    1. Click **Connect**.
+    2. Sign in with your Google account.
+    3. Review permissions and click **Allow**.
+    4. You'll be redirected back to LangSmith where your agent will be created.
+  </Step>
+
+</Steps>
+
+<Info>
+Your agent only accesses your accounts when working on tasks you give it. You can revoke access anytime in your Google account settings.
+</Info>
+
+## Step 4. View the agent template
+
+<Steps>
+
+  <Step title="View and customize the template">
+
+    At this point, you can review the template instructions for the email assistant. If needed, you can make adjustments to the instructions.
+
+    If you made any changes, click **Save changes**.
+  </Step>
+
+  <Step title="Start a test chat">
+    1. In the right-hand panel of the configuration page, select the **Test Chat** tab.
+    2. Try out the email assistant in the chat interface, for example:
+
+    > _Apply a "Review" label to emails that I receive, which require some kind of review from me_
+  </Step>
+
+  <Step title="Agent starts working">
+    Your agent will start work and provide a **Continue** option for each step that requires your approval.
+
+    <img
+    className="block dark:hidden"
+    src="/langsmith/images/agent-builder-response.png"
+    alt="Test chat output view with response including approvals for Gmail tool."
+    />
+
+    <img
+    className="hidden dark:block"
+    src="/langsmith/images/agent-builder-response-dark.png"
+    alt="Test chat output view with response including approvals for Gmail tool."
+    />
+
+    3. As you test out the agent, you can make edits to the instructions, or add tools that you may need. Click **Save changes** when you're happy with the results.
+
+  </Step>
+
+</Steps>
+
+## Edit your agent
+
+You may want to update your agent's instructions or include more tools. You can directly chat with your agent to ask for updates, or you can:
+
+1. From **My Agents** in the left-hand navigation, select the agent you want to edit.
+1. Select <Icon icon="pencil"/> **Edit Agent**.
+
+From the agent's edit page, you can:
+
+- Add tools with **+ Add tool** to connect more apps and services like Slack, GitHub, or Linear.
+- Add further helpers with **+ Add sub-agent** to break complex tasks into specialized sub-tasks.
+- Request pauses for reviews on existing tools.
+- Modify existing tools.
+- Explore features that can trigger your agent to start a task.
+
+## Next steps
+
+Now that you've created your first agent, here's what to explore:
+
+<CardGroup cols={2}>
+  <Card title="Try more templates" icon="shapes" href="/langsmith/agent-builder-templates">
+    Explore pre-built agents for common tasks
+  </Card>
+
+  <Card title="Add automation" icon="bolt" href="/langsmith/agent-builder-essentials#triggers">
+    Run your agent automatically with triggers (Slack, email, schedules)
+  </Card>
+
+  <Card title="Connect more tools" icon="puzzle-piece" href="/langsmith/agent-builder-tools">
+    Add Slack, GitHub, Linear, and more
+  </Card>
+
+  <Card title="Build complex agents" icon="sitemap" href="/langsmith/agent-builder-essentials#sub-agents">
+    Use sub-agents to break down big tasks
+  </Card>
+</CardGroup>

src/langsmith/agent-builder-templates.mdx

@@ -7,10 +7,14 @@ mode: wide
 
 Agent Builder includes starter templates to help you create agents quickly. Templates include predefined system prompts, tools, and triggers (if applicable) for common use cases. You can use templates as-is, or as a baseline to customize.
 
+<Tip>
+New to Agent Builder? Start with the step-by-step [template quickstart](/langsmith/agent-builder-quickstart) to build your first agent using a template.
+</Tip>
+
 ## How to use templates
 
 <Steps>
-  <Step title="Pick a template" icon="squares-plus">
+  <Step title="Pick a template" icon="square">
     In Agent Builder, choose a template that matches your use case (e.g., Gmail assistant, Linear Slack bot, etc.).
   </Step>
   <Step title="Review tools and prompts" icon="sliders">