Update docs for Hypermode Agents UI refresh [WIP]

agents/30-days-of-agents/day-1.mdx

@@ -109,7 +109,7 @@ analyze professional information:
 **Try this LinkedIn-style research:**
 
 ```text
-Can you research Reid Hoffman, the founder of LinkedIn?
+Can you research Reid Hoffman on LinkedIn, the founder of LinkedIn?
 I'd like to know about his current activities, recent posts or articles, and any speaking engagements or interviews.
 ```
 
@@ -137,11 +137,7 @@ Can you research their latest product announcements, funding news, and key execu
 
 ## Step 4: configure your agent settings
 
-<img
-  className="w-80 mx-auto"
-  src="/images/agents/30-days-of-agents/day1-agent-config.png"
-  alt="Agent Configuration - Placeholder"
-/>
+![Agent Configuration - Placeholder](/images/agents/30-days-of-agents/day1-agent-config.png)
 
 ### Model selection
 

agents/30-days-of-agents/day-2.mdx

@@ -23,7 +23,7 @@ experiencing how agents handle actual work scenarios.
 Building on yesterday's foundation, you'll see how agent capabilities translate
 into immediate productivity gains.
 
-![Sidekick Interface - Placeholder](/images/agents/30-days-of-agents/sidekick-about.png)
+![Sidekick Interface - Placeholder](/images/agents/30-days-of-agents/day1-interface-tour.png)
 
 ## What you'll accomplish today
 

agents/30-days-of-agents/overview.mdx

@@ -58,7 +58,7 @@ week's foundations:
 
 This is a foundation week designed to show value in less than 10 min/day.
 
-![Sidekick](/images/agents/30-days-of-agents/sidekick-about.png)
+![Sidekick](/images/agents/30-days-of-agents/day1-interface-tour.png)
 
 Start your agent journey with Sidekick, Hypermode's built-in productivity agent.
 Learn the fundamentals of agent interaction while getting immediate value from

agents/create-agent.mdx

@@ -7,16 +7,17 @@ description:
 ---
 
 Creating an Agent is simple and can be done
-[using the built-in Hypermode Concierge agent](/agents/create-agent#build-a-new-agent-with-concierge)
+[using the built-in Hypermode Agent Helper concierge agent](/agents/create-agent#build-a-new-agent-with-concierge)
 or by
 [specifying the agent's role and instructions yourself](/agents/create-agent#create-an-agent-manually).
 
 ## Build a new agent with Concierge
 
-![Hypermode Concierge agent](/images/agents/concierge.png)
+**Hypermode Agent Helper Concierge** is Hypermode's AI-powered agent that
+transforms natural language descriptions into fully functional agents. No coding
+experience required.
 
-**Concierge** is Hypermode's AI-powered agent that transforms natural language
-descriptions into fully functional agents. No coding experience required.
+![Hypermode Concierge agent](/images/agents/concierge.png)
 
 ### Overview
 
@@ -26,12 +27,12 @@ minutes to complete.
 
 <Steps>
 
-<Step title="Start a new thread with Concierge">
+<Step title="Start a new thread with Hypermode Agent Helper Concierge">
 
-Select the "Start a new thread" option from the left navigation bar under the
-Hypermode Concierge agent.
+To get started with the Agent Helper Concierge, select the "Create new" option
+to create a new thread and select the "Hypermode Agent Helper" helper.
 
-![Start a new thread with Concierge](/images/agents/concierge-1.png)
+![Start a new thread with Concierge](/images/agents/concierge-new-thread.png)
 
 </Step>
 
@@ -72,10 +73,21 @@ marketing agent might need access to GitHub to be able to submit website changes
 as pull requests and access to Notion to read internal messaging and product
 documents.
 
-![Enable connections and start working with your agent](/images/agents/concierge-4.png)
+Select the Agents view from the left navigation bar. Here you'll see the list of
+all agents in your workspace. Select "Add connections" next to the agent you
+just created.
+
+![Enable connections and start working with your agent](/images/agents/manual-create-connections.png)
+
+To add a connection select it from the list of available connections or search
+for it in the search bar.
+
+![Enable connections and start working with your agent](/images/agents/manual-create-connections-github.png)
 
-Once you've added connections, start chatting with your agent by asking what
-they can help you with or what connections they have access to.
+After selecting a connection, you'll be prompted to complete the OAuth flow to
+authorize the agent to access the connection on your behalf.
+
+Once you've added connections, we're ready to start working with your agent.
 
 </Step>
 
@@ -89,9 +101,10 @@ Agents can also be created manually by following the steps below.
 
 <Step title="Create new agent">
 
-Select the "Create new agent" option from the left navigation bar.
+Select the "Create new" button then select the "Create new agent" option from
+the drop down menu.
 
-![Create new agent](/images/agents/manual-create-1.png)
+![Create new agent](/images/agents/manual-create-2.png)
 
 </Step>
 
@@ -100,12 +113,7 @@ Select the "Create new agent" option from the left navigation bar.
 Choose a name, title, and description for your agent. An agent avatar is
 generated randomly but you can also upload your own avatar.
 
-<img
-  height="200"
-  src="/images/agents/manual-create-2.png"
-  alt="Describe your agent"
-  style={{ width: "100%", maxWidth: "400px" }}
-/>
+![Describe your agent](/images/agents/manual-create-form.png)
 
 </Step>
 
@@ -114,12 +122,7 @@ generated randomly but you can also upload your own avatar.
 The agent instructions are the system prompt that's used to guide the agent's
 behavior. This is where you define the agent's role and objectives.
 
-<img
-  height="200"
-  src="/images/agents/manual-create-3.png"
-  alt="Add your agent instructions"
-  style={{ width: "100%", maxWidth: "400px" }}
-/>
+![Add your agent instructions](/images/agents/manual-create-3.png)
 
 </Step>
 
@@ -128,21 +131,28 @@ behavior. This is where you define the agent's role and objectives.
 Select the model that you want to use for your agent. The model is used to run
 the agent's instructions, including choosing how to leverage tools.
 
-<img
-  height="200"
-  src="/images/agents/manual-create-4.png"
-  alt="Select your agent's model"
-  style={{ width: "100%", maxWidth: "400px" }}
-/>
+![Select your agent's model](/images/agents/manual-create-4.png)
 
 </Step>
 
 <Step title="Enable connections and start working with your agent">
+Connections enable the agent to understand and act on its environment. Add the connections that your agent will need to perform its tasks.
+
+Select the Agents view from the left navigation bar. Here you'll see the list of
+all agents in your workspace. Select "Add connections" next to the agent you
+just created.
+
+![Enable connections and start working with your agent](/images/agents/manual-create-connections.png)
+
+To add a connection select it from the list of available connections or search
+for it in the search bar.
+
+![Enable connections and start working with your agent](/images/agents/manual-create-connections-github.png)
 
-Enable connections to allow your agent to access tools and data. This is where
-you define the tools that your agent has access to.
+After selecting a connection, you'll be prompted to complete the OAuth flow to
+authorize the agent to access the connection on your behalf.
 
-![Enable connections and start working with your agent](/images/agents/manual-create-5.png)
+Once you've added connections, we're ready to start working with your agent.
 
 </Step>
 

agents/introduction.mdx

@@ -68,14 +68,16 @@ implementation. **No rebuild required** to go from prototype to production.
 
 ## What can you build?
 
-**Sales pipeline agent**: analyzes sales data and manages pipeline activities,
-integrating Stripe, HubSpot, and Slack.
+[**Market research agent**](/agents/agent-gallery/market-researcher): understand
+what's important to any company, whether it's your competitors or your newest
+partner.
 
-**Customer support agent**: analyzes support tickets and provides insights
-across email and support platforms.
+[**Go-to-market engineer agent**](/agents/agent-gallery/gtm-engineer): ensure
+that your sales and marketing team has the best internal data to make informed
+decisions.
 
-**Marketing insights agent**: analyzes marketing performance across channels and
-provides optimization recommendations.
+[**Marketing insights agent**](/agents/agent-gallery/channelpulse): analyzes
+marketing performance across channels and provides optimization recommendations.
 
 ---
 

docs.json

@@ -62,7 +62,6 @@
               "agents/create-agent",
               "agents/work",
               "agents/connections",
-              "agents/tasks",
               "agents/model-selection",
               {
                 "group": "Example Agents",

first-hypermode-agent.mdx

@@ -31,37 +31,39 @@ started with Hypermode Agents by learning how to interact with agents and add
 ![Sidekick](/images/tutorials/first-hypermode-agent/sidekick.png)
 
 Connections give our agents access to external tools and services, such as
-Google Calendar, email, GitHub, our CRM, and more.
+Google Calendar, email, GitHub, our CRM, and more. Sidekick has access to the
+Google Calendar connection by default.
+
+Let's start by asking Sidekick what they can help us with.
+
+![Sidekick user message](/images/tutorials/first-hypermode-agent/sidekick-message.png)
+
+It looks like Sidekick can be a lot more helpful if we connect our Google
+Calendar.
 
 ## Sidekick connections
 
 Let's configure the Google Calendar connection so Sidekick can access our
-calendar and help us prepare for meetings.
+calendar and help us prepare for meetings. Select the **"Configure agent
+connections"** button and follow the authorization flow to connect your Google
+Calendar.
 
 <Tip>
   Sidekick is configured to connect to Google Calendar. Over 2000 other
   connections are available by upgrading to the Hypermode Pro tier.
 </Tip>
-<img
-  src="/images/tutorials/first-hypermode-agent/sidekick-connections.png"
-  alt="Sidekick connections"
-  style={{ width: "100%", maxWidth: "300px" }}
-/>
-
-## Suggestion task
-
-Sidekick is configured with [tasks](/agents/tasks) to help us interact with our
-agent. Tasks are a repeatable set of instructions that you can save and use
-later with your agent. Think of a task as a learned skill for your agent.
-
-![Suggest task](/images/tutorials/first-hypermode-agent/suggest-task.png)
 
 ## Chat and tools
 
-In addition to selecting tasks, we can also interact with our agent through
-natural language chat. The agent uses tools to complete our requests. By asking
-the agent "who are we meeting with?" it uses the Google Calendar connection to
-access our calendar and find the meeting we're preparing for.
+We can interact with our agent through natural language chat. The agent uses
+"tools" to complete our requests. These tools enable an agent to understand and
+interact on its environment using the connections we add. Under the hood these
+tools and connections are powered by Model Context Protocol (MCP) servers.
+
+When we send a message to our agent it is able to use the tools and connections
+we've added to it to complete our requests. By asking the agent "who are we
+meeting with?" it uses the Google Calendar connection to access our calendar and
+find the meeting we're preparing for.
 
 ![Who are we meeting with?](/images/tutorials/first-hypermode-agent/who-meetings.png)