WIP agent template quickstart for agent builder

Author: katmayb

src/docs.json

@@ -1303,6 +1303,7 @@
                 {
                   "group": "Get started",
                   "pages": [
+                    "langsmith/agent-builder-quickstart",
                     "langsmith/agent-builder-essentials",
                     "langsmith/agent-builder-templates",
                     "langsmith/agent-builder-setup",

src/langsmith/agent-builder-quickstart.mdx

@@ -0,0 +1,237 @@
+---
+title: Build your first agent quickstart
+sidebarTitle: Quickstart
+---
+
+Create your first AI agent step-by-step. No coding required.
+
+This will use a template to build a **Meeting Prep Assistant** that:
+- Checks your calendar for upcoming meetings.
+- Finds relevant emails about those meetings.
+- Creates a summary document with key discussion points.
+
+Feel free to follow along with this example or customize the instructions and tools for your own agent needs.
+
+<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 the <Icon icon="mouse-pointer"/> no-code toggle in the lower 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. Customize your agent
+
+<Steps>
+
+  <Step title="Customize for meeting prep">
+
+    1. When you use a template, you may want to edit the title and description at the top of the configuration page.
+    2. Update the **Instructions** field with the following:
+
+        ```
+        You are a Meeting Prep Assistant. When I ask you to help me prepare for meetings:
+
+        1. Check my Google Calendar for meetings today or tomorrow
+        2. For each meeting, search my Gmail for emails about that meeting (use meeting title keywords)
+        3. Create a summary document with:
+           - Meeting name, time, and attendees
+           - Key topics from emails
+           - Any action items or decisions mentioned
+        4. Ask me if I want you to send this summary to myself via email
+
+        Always confirm before sending emails.
+        ```
+
+    3. 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:
+
+    > _Help me prepare for my meetings today_
+  </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."
+    />
+
+  </Step>
+</Steps>
+
+## Step 5. Review and approve
+
+<Steps>
+  <Step title="Read the summary">
+    Your agent will present a meeting prep summary in chat. Review it for accuracy.
+  </Step>
+
+  <Step title="Give feedback (optional)">
+    If something isn't working well, tell your agent. For example:
+
+    > _Can you also include links to the emails you found?_
+
+    Your agent will update the summary.
+  </Step>
+
+  <Step title="Approve email send (if applicable)">
+    If your agent asks to send the summary via email, you'll see:
+
+    **"I'd like to send this summary to you. Do you approve?"**
+
+    Click **Approve** or **Edit** to modify before sending.
+  </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 your **Meeting Prep Assistant** agent.
+1. Select <Icon icon="pencil"/> **Edit Agent**.
+
+    <img
+    className="block dark:hidden"
+    src="/langsmith/images/agent-builder-edit-page.png"
+    alt="Agent in edit mode with a visualization and options to add tools, sub-agents, and triggers."
+    />
+
+    <img
+    className="hidden dark:block"
+    src="/langsmith/images/agent-builder-edit-page-dark.png"
+    alt="Agent in edit mode with a visualization and options to add tools, sub-agents, and triggers."
+    />
+
+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>