AI is transforming industries in ways we couldn’t have imagined just a few short years ago, from automating customer service to streamlining supply chain management. But, with these exciting advancements come new challenges. As AI systems become more integral to everyday business operations, the need to monitor their performance, behavior, and decision-making processes has never been greater.

According to the National Institute of Standards and Technology (NIST), AI applications require rigorous oversight, as inadequate management can lead to unforeseen or inequitable outcomes. Unfortunately, existing observability solutions fall short by focusing solely on performance, rather than other attributes unique to AI.

This article sheds light on observability, defining what it is, why it’s essential for managing AI systems, and why traditional approaches are inadequate.

So, What Exactly Is Observability?

Observability platforms help companies monitor, analyze, and understand the performance and health of their systems, including logs, metrics, and traces. Traditional monitoring systems track basic metrics like server status or network latency. They’re an evolution of traditional network monitoring solutions, but with a broader scope and more advanced capabilities. These platforms take monitoring further by empowering teams to answer questions like, “What’s causing these performance issues?” or “Why is this behavior happening?” It provides deeper, actionable insights into system health and performance, helping teams solve issues before they impact users.

Observability offers several key benefits for businesses, like accelerating issue resolution and reducing downtime. It can also help businesses optimize resources, predict failures before they happen, and align system health with key business metrics. Ultimately, observability is about making smarter, faster decisions to keep things running smoothly.

Why Traditional Observability Tools Fall Short for AI

AI systems introduce a new set of variables that require careful monitoring, particularly when interacting with AI models that engage with users in real-time.

Traditional observability systems were designed to track predefined metrics like CPU usage, vs. capturing GenAI response inaccuracies or mitigating malicious user inputs. This is where advanced AI observability steps in, offering a way to manage these systems effectively and ensure they perform as expected and, importantly, that they do so in an ethical and secure way.

Let’s take a deeper dive into the unique needs of AI systems:

• AI “Grey Areas”: AI presents unique grey areas for performance monitoring. An AI system may appear to perform correctly (e.g., a user enters a prompt and the AI answers), but the response is suspect. For example, if a company’s chatbot promotes a competitor over its own product, the performance is fine, but the content of the response is a problem.
• Data Quality Monitoring and Security: It is crucial to make sure that AI does not leak sensitive information such as customer PII, confidential business data, or proprietary information about the AI system itself — especially as nefarious actors may try to trick it into doing so.
• User Interaction:  True measurement of AI effectiveness requires insights not only into the system’s performance but also into user interaction. While metrics like response times and accuracy are important, they don’t provide the full picture. Feedback about the AI’s responses to user queries is essential, so that businesses know if the AI is responding as expected and meeting customers’ needs.
• AI Output Issues: AI outputs must be continuously monitored for toxicity (i.e., harmful or offensive content such as hate speech or biased language) and hallucinations, where the model generates misleading or false information. Without proper oversight, these issues can undermine user trust, spread misinformation, and lead to unintended consequences
• Compliance: AI systems must adhere to strict and ever-evolving regulations and compliance standards that are difficult to keep up with. These include the EU Artificial Intelligence Act, California Consumer Privacy Act, and several others.

Why Advanced AI Observability Systems Are Essential

Observability tools tailored explicitly for AI systems address these unique risks with the following features:

1. Comprehensive User Interaction Monitoring: Provides full visibility into user interactions, including conversation histories, logins, and use of tokens (i.e. units of data consumed by AI models). This granular tracking helps teams identify suspicious resource consumption, detect cost harvesting attempts (i.e. query spamming to drive up operational costs for an AI system), and optimize budgets without compromising performance.
2. Real-Time Issue Detection and Resolution: Identifies problems such as poor response accuracy, latency spikes, and malicious user inputs. This allows teams to address underperforming AI agents before they negatively impact the user experience.
3. AI Evaluation Engine: Includes both quality and security evaluators, as well as the ability to customize to meet specific needs. The quality evaluators analyze both user and AI interactions to detect potential issues, such as toxicity and AI hallucinations. Meanwhile, the security evaluators continuously monitor for potential risks, enabling early identification and helping secure AI systems against malicious actors.
4. Compliance and Regulation Adherence: Helps businesses stay on top of evolving regulatory requirements regarding AI accuracy, reliability, and ethical use, while also mitigating legal and reputational risks.

The Future of AI Observability

As AI systems grow more complex, the limitations of traditional observability tools are becoming more apparent. Standard observability solutions only focus on performance and are not designed with AI’s unique challenges in mind, so they struggle to effectively track and manage the nuances of AI behavior.

Fortunately, emerging observability platforms are being designed to address the unique challenges posed by AI solutions, providing deeper insights into user interactions and risks, such as toxicity, hallucinations, and security vulnerabilities.

One exciting development we anticipate seeing soon is the integration of agentic AI into the observability process. This would be a game-changer, with agents able to diagnose and solve problems with minimal human assistance.

For organizations aiming to stay competitive, AI observability must be a core component of their strategy. By focusing on AI-specific metrics, businesses can ensure a seamless and high-quality AI environment, harness the full potential of the technology, and achieve positive, tangible business outcomes.

The post Why AI Demands a New Approach to Observability appeared first on The New Stack.

You’ve used GitHub Copilot to help you write code in your IDE. Now, imagine assigning Copilot an issue, just like you would a teammate—and getting a fully tested pull request in return. 

That’s the power of the new coding agent in GitHub Copilot. Built directly into GitHub, this agent starts working as soon as you assign it a GitHub Issue or prompt it in VS Code. Keeping you firmly in the pilot’s seat, the coding agent builds pull requests based on the issues you assign it.

This isn’t just autocomplete. It’s a new class of software engineering agents that work asynchronously to help you move faster, clean up tech debt, and focus on the work that really matters. Let’s explore how this coding agent works and how it can help you find new ways of working faster. ✨

Oh, and if you’re a visual learner we have you covered. 👇

Coding agent in GitHub Copilot 101

This new coding agent, which is our first asynchronous software engineering agent, is built on GitHub Actions and works like a teammate. You assign it an issue, let it do the work, and then review its outputs before changing or accepting them. It also incorporates context from related issues or PR discussions and can follow custom repository instructions that your team has already set.

You assign Copilot an issue and it plans the work, opens a pull request, writes the code, runs the tests, and then asks for your review. If you leave feedback, it’ll revise the PR and keep going until you approve. 

The process isn’t instant—it takes a little time to compute and run. But it’s already helping developers work faster and more efficiently. 

According to Brittany Ellich, Senior Software Engineer at GitHub, traditional advice for devs has been to do one thing at a time, and do it well. But with the new coding agent, GitHub can now help you do more things well, like:

• Offloading repetitive, boilerplate tasks like adding and extending unit tests
• Maintaining better issue hygiene and documentation with quick typo fixes and small refactors
• Improving user experience by fixing bugs, updating user interface features, and bolstering accessibility

By assigning these low- to medium-complexity tasks to the coding agent, you may finally have the bandwidth to focus on higher-level problem solving and design, tackle that tech debt that’s been piling up, learn new skills, and more.

Even though Copilot is doing the work, you’re in control the entire time: You decide what to assign, what to approve, and what should be changed.

How to get the coding agent to complete an issue

Step one: Write and assign the issue to Copilot

This is where you’ll be most involved—and this step is crucial for success. Think of writing the issue like briefing a team member: The more context you give, the better the results (like any other prompt). 

Make sure to include:

• Relevant background info: Why this task matters, what it touches, and any important history or context. 
• Expected outcome: What “done” looks like.
• Technical details: File names, functions, or components involved.
• Formatting or linting rules: These are especially important if you use custom scripts or auto-generated files. You can add these instructions for Copilot so it’s automatically reflected in every issue. 

Once you’ve written the issue, it’s time to assign it to Copilot—just like you would a teammate. You can do this via github.com, the GitHub Mobile app, or through the GitHub CLI. 

Copilot works best with well-scoped tasks, but it can handle larger ones. It just might take a little bit longer. You don’t have to assign only one issue; you can batch-assign multiple issues, which is great for tasks like increasing test coverage or updating documentation.

Here are a few tips and tricks that we’ve found helpful:

• You can use issue templates with fields like “description” and “acceptance criteria” to make writing issues easier and more consistent across your team. 
• If your repo includes custom instructions (such as which files are auto-generated or how to run formatters), Copilot will use these to improve its output.
• The agent can actually see images included in its assigned issues on GitHub, so you can easily share images of what you want your new feature to look like, and the agent can run with it. 

Step two: Copilot plans the code 

Once you assign Copilot an issue, it will add an 👀 emoji reaction. Then it will kick off an agent session using GitHub Actions, which powers the integrated, secure, and fully customizable environment the coding agent is built on. 

This environment is where Copilot can explore and analyze your codebase, run tests, and make changes. The coding agent will simultaneously open both a branch and a pull request, which will evolve as Copilot works. 

Copilot will read your issue and break it down into a checklist of tasks, then update the pull request with this checklist. As it completes each task, Copilot checks it off and pushes commits to the branch. You can watch the session live, view the session logs later, or refresh the PR to see how Copilot is reasoning through the task. These are updated regularly for increased visibility, so you can easily spot problems if they arise.

Step three: Copilot writes the code

This is where the magic happens. Once you see the “Copilot started work” event in the pull request timeline, you’ll know the wheels are turning. Here’s what happens next:

• Copilot modifies your codebase based on the issue.
• It runs automated tests and linters if they’re present in your repo and updates or generates tests as needed.
• Copilot will also push commits iteratively as it completes tasks.

You can see the work happening in real time, and if you notice that something looks off, you can step in at any point to make sure things are going in the right direction before Copilot passes it back to you.

Step four: Review and merge the pull request

This is another stage where you’ll need to be involved. Once Copilot finishes the work, it will tag you for review. You can either:

• Approve the pull request
• Leave comments
• Ask for changes

Copilot will automatically request reviewers based on the rules you’ve set in your repo. And if needed, you can go through multiple review cycles until you get your desired outcome—just like with a human teammate. 

Once the pull request is approved:

• The change can now follow your repo’s merge and deploy process.
• The agent session will end.
• If needed, a human can take over from the branch at any time. 

🚨One important thing to note: The person who created the issue can’t be the final approver. You’ll need a peer, manager, or designated reviewer to give the green light. This promotes collaboration and ensures unreviewed or unsafe code doesn’t get merged.

And you’re done! ✅ 

Like any other tool (or teammate), Copilot’s coding agent might need a little prodding to deliver exactly the output you want. Remember, the biggest factor to success starts with how you write the issue (Copilot can also help you write those faster). 

Here are a few tips on how to get the most out of Copilot: 

• Write comprehensive issues: Clear, scoped, and well-documented issues lead to better results.
• Start small: Try using the agent for tests, docs, or simple refactors.
• Troubleshooting: If Copilot gets stuck, tag it in a comment and add more context. Iterating and refining the issue requirements can also help.

Take this with you 

AI and LLMs are improving at a rapid pace. “The models we’re using today are the worst ones we’ll ever use—because they’re only getting better,” says Ellich. And coding agents are already proving useful in real workflows. 

Try using the coding agent on a sample repo. See what it can do. And start building your own agentic workflows. Happy coding!

The post Assigning and completing issues with coding agent in GitHub Copilot appeared first on The GitHub Blog.

If you’re following along, this is the third post in a series about the new CSS shape() function. We’ve learned how to draw lines and arcs and, in this third part, I will introduce the curve command — the missing command you need to know to have full control over the shape() function. In reality, there are more commands, but you will rarely need them and you can easily learn about them later by checking the documentation.

The curve command

This command adds a Bézier curve between two points by specifying control points. We can either have one control point and create a Quadratic curve or two control points and create a Cubic curve.

Bézier, Quadratic, Cubic, control points? What?!

For many of you, that definition is simply unclear, or even useless! You can spend a few minutes reading about Bézier curves but is it really worth it? Probably not, unless your job is to create shapes all the day and you have a solid background in geometry.

We already have cubic-bezier() as an easing function for animations but, honestly, who really understands how it works? We either rely on a generator to get the code or we read a “boring” explanation that we forget in two minutes. (I have one right here by the way!)

Don’t worry, this article will not be boring as I will mostly focus on practical examples and more precisely the use case of rounding the corners of irregular shapes. Here is a figure to illustrate a few examples of Bézier curves.

The blue dots are the starting and ending points (let’s call them A and B) and the black dots are the control points. And notice how the curve is tangent to the dashed lines illustrated in red.

In this article, I will consider only one control point. The syntax will follow this pattern:

clip-path: shape(
  from Xa Ya, 
  curve to Xb Yb with Xc Yc
);

arc command vs. curve command

We already saw in Part 1 and Part 2 that the arc command is useful establishing rounded edges and corners, but it will not cover all the cases. That’s why you will need the curve command. The tricky part is to know when to use each one and the answer is “it depends.” There is no generic rule but my advice is to first see if it’s possible (and easy) using arc. If not, then you have to use curve.

For some shapes, we can have the same result using both commands and this is a good starting point for us to understand the curve command and compare it with arc.

Take the following example:

This is the code for the first shape:

.shape {
  clip-path: shape(from 0 0,
    arc to 100% 100% of 100% cw,
    line to 0 100%)
}

And for the second one, we have this:

.shape {
  clip-path: shape(from 0 0,
    curve to 100% 100% with 100% 0,
    line to 0 100%)
}

The arc command needs a radius (100% in this case), but the curve command needs a control point (which is 100% 0 in this example).

Now, if you look closely, you will notice that both results aren’t exactly the same. The first shape using the arc command is creating a quarter of a circle, whereas the shape using the curve command is slightly different. If you place both of them above each other, you can clearly see the difference.

This is interesting because it means we can round some corners using either an arc or a curve, but with slightly different results. Which one is better, you ask? I would say it depends on your visual preference and the shape you are creating.

In Part 1, we created rounded tabs using the arc command, but we can also create them with curve.

Can you spot the difference? It’s barely visible but it’s there.

Notice how I am using the by directive the same way I am doing with arc, but this time we have the control point, which is also relative. This part can be confusing, so pay close attention to this next bit.

Consider the following:

shape(from Xa Ya, curve by Xb Yb with Xc Yc)

It means that both (Xb,Yb) and (Xc,Yc) are relative coordinates calculated from the coordinate of the starting point. The equivalent of the above using a to directive is this:

shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xc) (Yb + Yc))

We can change the reference of the control point by adding a from directive. We can either use start (the default value), end, or origin.

shape(from Xa Ya, curve by Xb Yb with Xc Yc from end)

The above means that the control point will now consider the ending point instead of the starting point. The result is similar to:

shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xb + Xc) (Ya + Yb + Yc))

If you use origin, the reference will be the origin, hence the coordinate of the control point becomes absolute instead of relative.

The from directive may add some complexity to the code and the calculation, so don’t bother yourself with it. Simply know it exists in case you face it, but keep using the default value.

I think it’s time for your first homework! Similar to the rounded tab exercise, try to create the inverted radius shape we covered in the Part 1 using curve instead of arc. Here are both versions for you to reference, but try to do it without peeking first, if you can.

Let’s draw more shapes!

Now that we have a good overview of the curve command, let’s consider more complex shapes where arc won’t help us round the corners and the only solution is to draw curves instead. Considering that each shape is unique, so I will focus on the technique rather than the code itself.

Slanted edge

Let’s start with a rectangular shape with a slanted edge.

Getting the shape on the left is quite simple, but the shape on the right is a bit tricky. We can round two corners with a simple border-radius, but for the slanted edge, we will use shape() and two curve commands.

The first step is to write the code of the shape without rounded corners (the left one) which is pretty straightforward since we’re only working with the line command:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line to calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}

Then we take each corner and try to round it by modifying the code. Here is a figure to illustrate the technique I am going to use for each corner.

We define a distance, R, that controls the radius. From each side of the corner point, I move by that distance to create two new points, which are illustrated above in red. Then, I draw my curve using the new points as starting and ending points. The corner point will be the control point.

The code becomes:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    Line  to Xa Ya,
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}

Notice how the curve is using the coordinates of the corner point in the with directive, and we have two new points, A and B.

Until now, the technique is not that complex. For each corner point, you replace the line command with line + curve commands where the curve command reuses the old point in its with directive.

If we apply the same logic to the other corner, we get the following:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line  to Xa Ya, 
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line  to Xc Yc,
    curve to Xd Yd with 100% 100%,
    line to 0 100%
    );
}

Now we need to calculate the coordinates of the new points. And here comes the tricky part because it’s not always simple and it may require some complex calculation. Even if I detail this case, the logic won’t be the same for the other shapes we’re making, so I will skip the math part and give you the final code:

.box {
  --h: 200px; /* element height */
  --s: 90px;  /* slant size */
  --r: 20px;  /* radius */
  
  height: var(--h);
  border-radius: var(--r) 0 0 var(--r);
  --_a: atan2(var(--s), var(--h));
  clip-path: 
    shape(from 0 0,
    line  to calc(100% - var(--s) - var(--r)) 0,
    curve by calc(var(--r) * (1 + sin(var(--_a)))) 
              calc(var(--r) * cos(var(--_a)))
    with var(--r) 0,
    line  to calc(100% - var(--r) * sin(var(--_a))) 
              calc(100% - var(--r) * cos(var(--_a))),
    curve to calc(100% - var(--r)) 100%  with 100% 100%,
    line to 0 100%
    );
}

I know the code looks a bit scary, but the good news is that the code is also really easy to control using CSS variables. So, even if the math is not easy to grasp, you don’t have to deal with it. It should be noted that I need to know the height to be able to calculate the coordinates which means the solution isn’t perfect because the height is a fixed value.

Arrow-shaped box

Here’s a similar shape, but this time we have three corners to round using the curve command.

The final code is still complex but I followed the same steps. I started with this:

.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line to calc(100% - var(--s)) 0,
    /* corner #2 */
    line to 100% 50%,
    /* corner #3 */
    line to calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}

Then, I modified it into this:

.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line  to Xa Ya
    curve to Xb Yb with calc(100% - var(--s)) 0,
    /* corner #2 */
    line  to Xa Ya
    curve to Xb Yb with 100% 50%,
    /* corner #3 */
    line  to Xa Yb
    curve to Xb Yb with calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}

Lastly, I use a pen and paper to do all the calculations.

You might think this technique is useless if you are not good with math and geometry, right? Not really, because you can still grab the code and use it easily since it’s optimized using CSS variables. Plus, you aren’t obligated to be super accurate and precise. You can rely on the above technique and use trial and error to approximate the coordinates. It will probably take you less time than doing all the math.

Rounded polygons

I know you are waiting for this, right? Thanks to the new shape() and the curve command, we can now have rounded polygon shapes!

Here is my implementation using Sass where you can control the radius, number of sides and the rotation of the shape:

If we omit the complex geometry part, the loop is quite simple as it relies on the same technique with a line + curve per corner.

$n: 9; /* number of sides*/
$r: .2; /* control the radius [0 1] */
$a: 15deg; /* control the rotation */

.poly {
  aspect-ratio: 1;
  $m: ();
  @for $i from 0 through ($n - 1) {
    $m: append($m, line  to Xai Yai, comma);
    $m: append($m, curve to Xbi Ybi with Xci Yci, comma);
  } 
  clip-path: shape(#{$m});
}

Here is another implementation where I define the variables in CSS instead of Sass:

Having the variables in CSS is pretty handy especially if you want to have some animations. Here is an example of a cool hover effect applied to hexagon shapes:

I have also updated my online generator to add the radius parameter. If you are not familiar with Sass, you can easily copy the CSS code from there. You will also find the border-only and cut-out versions!

Conclusion

Are we done with the curve command? Probably not, but we have a good overview of its potential and all the complex shapes we can build with it. As for the code, I know that we have reached a level that is not easy for everyone. I could have extended the explanation by explicitly breaking down the math, but then this article would be overly complex and make it seem like using shape() is harder than it is.

This said, most of the shapes I code are available within my online collection that I constantly update and optimize so you can easily grab the code of any shape!

If you want a good follow-up to this article, I wrote an article for Frontend Masters where you can create blob shapes using the curve command.

---

Better CSS Shapes Using shape() — Part 3: Curves originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.