-0.3 C
New York
Sunday, January 26, 2025

Methods to Construct a Net Efficiency Watchdog Agent with Agent.ai


As an online developer, sustaining a quick and user-friendly web site is essential for search engine marketing rankings and consumer retention. Core Net Vitals like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Format Shift (CLS) are key metrics tracked by Google to evaluate web page expertise.

Manually monitoring these metrics throughout a number of websites will be time-consuming.

That’s the place the Net Efficiency Watchdog Agent steps in, automating the method and delivering each day experiences to your inbox. This lets you concentrate on fixes relatively than monitoring.

By the top of this tutorial, you’ll have a completely autonomous agent for each day efficiency monitoring utilizing the Agent.ai Agent Builder.

What You’ll Construct

On this information, we’ll create an autonomous agent in Agent.ai Builder to:

  1. Fetch web site efficiency metrics from Google’s Lighthouse API.
  2. Course of and extract related metrics.
  3. Format the information into an expert HTML electronic mail.
  4. Ship the e-mail report back to your group.

Give it a strive first: Discover this
dwell demonstration
of the WebVitals Watchdog agent in motion! This instance showcases how the agent displays efficiency metrics, detects anomalies, and generates skilled electronic mail experiences. Dive in to see it in motion and get a really feel for the workflow earlier than beginning your personal setup on this 10-minute information. 😄

What You’ll Want

  1. An Agent.ai account.
  2. Google API key to entry the Lighthouse API.
  3. Fundamental data of internet efficiency metrics like FCP, LCP, and CLS.

Step-by-Step Information

Step 1: Set Up Your Agent in Agent.ai

  1. Log in to your Agent.ai account.
  2. Navigate to the Agent Builder Dashboard by deciding on Agent Builder from the navigation bar.
  3. Click on the Create Agent button.
  4. Select Begin from Scratch to create a brand new agent.
  5. Enter the next particulars within the Settings Tab of the Agent Editor:
    • Agent IdentifyNet Efficiency Watchdog.
    • Description“Each day web site efficiency monitor that fetches Lighthouse metrics, detects anomalies, and sends electronic mail experiences.”

Step 2: Configure the Lighthouse API Name

This step is essential as a result of it pulls detailed efficiency metrics instantly from the Lighthouse API.

These metrics, like First Contentful Paint (FCP)Largest Contentful Paint (LCP), and Cumulative Format Shift (CLS), present the inspiration for understanding your web site’s efficiency and figuring out areas for enchancment.

  1. Add Motion: Within the Actions Tab of the Agent Editor, click on Add Motion and choose Invoke Net API.
  2. Configure the API name:
    • URL: https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={{yourWebsiteUrl}}&class=efficiency&key={{yourApiKey}}
    • TechniqueGET
    • Output Variable IdentifylighthouseMetrics
  3. Substitute:
    • {{yourWebsiteUrl}} with the URL of the web site to investigate (e.g., https://tympanus.web/codrops).
    • {{yourApiKey}} along with your Google API key.

Notice that URLs should begin with “www“, for instance https://www.hubspot.com/.

Step 3: Sanitize the Information

The uncooked API response from Lighthouse will be overwhelming, containing numerous pointless or deeply nested data.

On this step, you’ll sanitize the information to focus solely on the components you want for additional processing.

For brokers, LLMs, and even your pocket (inference prices) 😅, much less is extra, streamlining the information ensures effectivity and readability.

  1. Add Motion: Within the Actions Tab of the Agent Editor, click on Add Motion and choose Format Textual content.
  2. Configure the formatting:
    • SortTruncate (or select one other appropriate text-sanitizing technique).
    • Enter VariablelighthouseMetrics.
    • Output Variable IdentifysanitizedMetrics.

Step 4: Extract Related Metrics

This step condenses the detailed Lighthouse knowledge into simply the metrics that matter, like First Contentful Paint (FCP)Largest Contentful Paint (LCP), and Cumulative Format Shift (CLS).

It’s all about making issues less complicated and extra actionable for builders.

By figuring out anomalies upfront, you’ll know precisely the place to focus your efforts with out wading by way of pointless particulars.

LLM Engine: GPT-4o-Mini.

Immediate:

You might be an assistant that extracts related data from Lighthouse API outcomes. 
Given the next JSON enter, extract the required particulars and format them in JSON:

Enter JSON:

{{sanitizedMetrics}}

### Extract the next particulars:
1. **Web site URL**:
   - The URL of the web site being analyzed.

2. **Metrics**:
   - `fcp`: First Contentful Paint (in seconds).
   - `lcp`: Largest Contentful Paint (in seconds).
   - `cls`: Cumulative Format Shift worth.
   - `performanceScore`: Efficiency rating (as a proportion).

3. **Anomalies**:
   - For `fcp`: Return `true` if FCP > 2 seconds, in any other case `false`.
   - For `lcp`: Return `true` if LCP > 2.5 seconds, in any other case `false`.
   - For `cls`: Return `true` if CLS > 0.1, in any other case `false`.

4. **Steered Actions**:
   - Present actionable suggestions primarily based on detected anomalies.

### Anticipated JSON Output Instance:

{
  "url": "https://instance.com",
  "metrics": {
    "fcp": "2.3",
    "lcp": "1.8",
    "cls": "0.12",
    "performanceScore": "89"
  },
  "anomalies": {
    "fcp": true,
    "lcp": false,
    "cls": true
  },
  "suggestedActions": [
    "Optimize images to improve FCP",
    "Reduce layout shifts by reserving space for ads or images"
  ]
}

Set the output variable title as processedMetrics.

Step 5: Generate the E mail Physique

This step transforms the processed metrics into an expert and visually interesting HTML electronic mail.

The e-mail will summarize key metrics in a desk, spotlight anomalies, and supply actionable suggestions, all formatted for readability and compatibility throughout electronic mail purchasers.

LLM Engine:
GPT-4o-Mini.

Immediate:

You might be an assistant that codecs knowledge into an expert and visually interesting HTML electronic mail physique. Use the next JSON knowledge to create a structured and concise electronic mail report in HTML format:

Enter JSON:

{{processedMetrics}}

### Directions:
1. **Greeting and Introduction**:
   - Embody a welcoming line and specify the aim of the e-mail.
   - Point out the web site URL as a clickable hyperlink.

2. **Metrics Abstract**:
   - Use a styled HTML desk to show key metrics with two columns: Metric Identify and Worth.
   - Guarantee correct alignment, spacing, and readability.

3. **Highlighted Anomalies**:
   - If anomalies are detected, record them as bullet factors.
   - Spotlight crucial points utilizing daring textual content or distinct shade.

4. **Steered Actions**:
   - Current actionable suggestions in a numbered record.

5. **Closing Assertion**:
   - Conclude with a well mannered abstract encouraging additional motion.
   - Log out with "Finest regards" and a placeholder for the group title.

### Necessities:
- Use clear and trendy HTML with inline kinds for electronic mail compatibility.
- Deal with readability with an expert, minimalist design.
- Output **solely** the e-mail physique in HTML format.

### Instance Construction for Output:

<!DOCTYPE html>
<html>
  <physique type="font-family: Arial, sans-serif; line-height: 1.6; max-width: 600px; margin: 0 auto; shade: #333;">
    <!-- Introduction -->
    <p>Whats up,</p>
    <p>Right here is the Lighthouse metrics report on your web site: 
      <a href="https://tympanus.web/codrops/" goal="_blank" type="shade: #4CAF50; text-decoration: none;">Codrops</a>.
    </p>

    <!-- Metrics Abstract -->
    <h2 type="shade: #4CAF50; font-size: 20px;">Metrics Abstract</h2>
    <desk type="border-collapse: collapse; width: 100%; margin-bottom: 20px; border: 1px strong #ddd;">
      <tr type="background-color: #f9f9f9;">
        <th type="text-align: left; border-bottom: 2px strong #ddd; padding: 8px;">Metric</th>
        <th type="text-align: left; border-bottom: 2px strong #ddd; padding: 8px;">Worth</th>
      </tr>
      <tr>
        <td type="padding: 8px;">First Contentful Paint (FCP)</td>
        <td type="padding: 8px;">1.804 seconds</td>
      </tr>
      <tr>
        <td type="padding: 8px;">Largest Contentful Paint (LCP)</td>
        <td type="padding: 8px;">2.045 seconds</td>
      </tr>
      <tr>
        <td type="padding: 8px;">Cumulative Format Shift (CLS)</td>
        <td type="padding: 8px;">0.0006</td>
      </tr>
      <tr>
        <td type="padding: 8px;">Efficiency Rating</td>
        <td type="padding: 8px;">AVERAGE</td>
      </tr>
    </desk>

    <!-- Anomalies -->
    <h2 type="shade: #FF5722; font-size: 20px;">Anomalies Detected</h2>
    <ul type="padding-left: 20px; margin-bottom: 20px;">
      <li>No anomalies detected for FCP (beneath 2 seconds).</li>
      <li>No anomalies detected for LCP (beneath 2.5 seconds).</li>
      <li>No anomalies detected for CLS (beneath 0.1).</li>
    </ul>

    <!-- Steered Actions -->
    <h2 type="shade: #2196F3; font-size: 20px;">Steered Actions</h2>
    <p type="shade: #555;">No steered actions. Your web site is performing properly primarily based on the present metrics!</p>

    <!-- Closing -->
    <p type="margin-top: 20px;">We advocate persevering with to observe these metrics to take care of a fantastic consumer expertise and optimize efficiency as wanted.</p>
    <p type="margin-top: 20px;">Finest regards,<br><sturdy>Your Efficiency Watchdog</sturdy></p>
  </physique>
</html>

Set the enter variable as processedMetrics and the output variable title as emailBody.

Step 6: Ship the E mail

This last step ensures the insights gathered and processed by the agent are delivered on to your inbox or a distribution record, making them instantly accessible to builders or stakeholders.

Add Motion: Within the Actions Tab of the Agent Editor, click on Add Motion and choose Ship E mail. Configure the e-mail settings as follows:

  • To: Your electronic mail or a distribution record (e.g., instruments@yourdomain.com).
  • Physique: Use the variable {{emailBody}}.

This step completes the workflow by turning the processed knowledge into actionable insights and delivering them to the fitting folks on the proper time.

Methods to Check Your Workflow

Testing your workflow ensures that each one actions and outputs work as anticipated earlier than setting it to run mechanically.

Each time you save an motion within the Agent Editor, the workflow mechanically runs within the debugger. This lets you instantly see the outcomes of every step and establish any points in actual time.

Steps to Confirm:

  1. Verify the Debugger Panel:
    • View the step-by-step execution within the right-hand Debugger panel.
    • Affirm that every motion executes as anticipated and produces the proper outputs.
  2. Confirm Key Outputs:
    • Make sure that metrics (e.g., FCP, LCP, CLS) are extracted and sanitized correctly.
    • Verify that anomalies are detected precisely primarily based on the thresholds.
    • Evaluate the e-mail output to substantiate it’s formatted accurately with all of the related particulars.

Should you encounter any points throughout testing, use the “Report Points” button within the Debugger panel, and a member of the help group will comply with up.

Schedule the Workflow

  • Navigate to the Triggers Tab within the Agent Editor.
  • Set the workflow to run each day, weekly, or at customized intervals to automate efficiency monitoring.

Subsequent Steps

Now that your workflow is dwell, right here’s how one can unlock much more potential and join with the Agent.ai group:

Improve the Agent

  • Observe Historic Information: Add help for storing and evaluating historic metrics to establish developments over time. This could possibly be your subsequent problem to stage up your agent’s capabilities.
  • Combine with Undertaking Administration Instruments: Automate activity creation in instruments like Jira or Trello by linking your agent by way of webhooks or API actions. Make it even simpler to remain on high of anomalies.

Collaborate with Different Builders

  • Discover the Agent.ai Builder documentation to unlock superior options and uncover new methods to reinforce your brokers.
  • Join with fellow builders and innovators within the Agent.ai group. Share your workflows, alternate suggestions, and collaborate on thrilling initiatives to push the boundaries of what brokers can do.

Last Ideas

Constructing workflows doesn’t need to be a chore, and the Net Efficiency Watchdog agent is proof of that. With only a few steps, you’ve created an autonomous agent that delivers each day insights and helps builders concentrate on what issues, bettering efficiency.

Have questions or concepts for making this agent even higher? I’d love to listen to your ideas or see the way you’ve custom-made it. Let’s maintain constructing smarter!

Imagine in love ✌️



Supply hyperlink

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles