docs: add tutorials for using early access AI agent features (#17186)

Some content is still being merged, but the structure is still there

Preview: https://coder.com/docs/@ai-features/tutorials/ai-agents
This commit is contained in:
Ben Potter
2025-04-01 19:57:05 -05:00
committed by GitHub
parent 4604f191e9
commit a61c3e7a1c
20 changed files with 498 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 285 KiB

View File

@ -705,6 +705,60 @@
"description": "Learn how to install and run Coder quickly", "description": "Learn how to install and run Coder quickly",
"path": "./tutorials/quickstart.md" "path": "./tutorials/quickstart.md"
}, },
{
"title": "Run AI Coding Agents with Coder",
"description": "Learn how to run and secure agents in Coder",
"path": "./tutorials/ai-agents/README.md",
"state": ["early access"],
"children": [
{
"title": "Learn about coding agents",
"description": "Learn about the different AI agents and their tradeoffs",
"path": "./tutorials/ai-agents/agents.md"
},
{
"title": "Create a Coder template for agents",
"description": "Create a purpose-built template for your AI agents",
"path": "./tutorials/ai-agents/create-template.md",
"state": ["early access"]
},
{
"title": "Integrate with your issue tracker",
"description": "Assign tickets to AI agents and interact via code reviews",
"path": "./tutorials/ai-agents/issue-tracker.md",
"state": ["early access"]
},
{
"title": "Best practices \u0026 adding tools via MCP",
"description": "Improve results by adding tools to your agents",
"path": "./tutorials/ai-agents/best-practices.md",
"state": ["early access"]
},
{
"title": "Supervise agents via Coder UI",
"description": "Interact with agents via the Coder UI",
"path": "./tutorials/ai-agents/coder-dashboard.md",
"state": ["early access"]
},
{
"title": "Supervise agents via the IDE",
"description": "Interact with agents via VS Code or Cursor",
"path": "./tutorials/ai-agents/ide-integration.md",
"state": ["early access"]
},
{
"title": "Programmatically manage agents",
"description": "Manage agents via MCP, the Coder CLI, and/or REST API",
"path": "./tutorials/ai-agents/headless.md",
"state": ["early access"]
},
{
"title": "Securing agents in Coder",
"description": "Learn how to secure agents with boundaries",
"path": "./tutorials/ai-agents/securing.md"
}
]
},
{ {
"title": "Write a Template from Scratch", "title": "Write a Template from Scratch",
"description": "Learn how to author Coder templates", "description": "Learn how to author Coder templates",

View File

@ -0,0 +1,36 @@
# Run AI Agents in Coder (Early Access)
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
AI Coding Agents such as [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview), [Goose](https://block.github.io/goose/), and [Aider](https://github.com/paul-gauthier/aider) are becoming increasingly popular for:
- Protyping web applications or landing pages
- Researching / onboarding to a codebase
- Assisting with lightweight refactors
- Writing tests and documentation
- Small, well-defined chores
With Coder, you can self-host AI agents in isolated development environments with proper context and tooling around your existing developer workflows. Whether you are a regulated enterprise or an individual developer, running AI agents at scale with Coder is much more productive and secure than running them locally.
![AI Agents in Coder](../../images/guides//ai-agents/landing.png)
## Prerequisites
Coder is free and open source for developers, with a [premium plan](https://coder.com/pricing) for enterprises. You can self-host a Coder deployment in your own cloud provider.
- A [Coder deployment](../../install/) with v2.21.0 or later
- A Coder [template](../../admin/templates/) for your project(s).
- Access to at least one ML model (e.g. Anthropic Claude, Google Gemini, OpenAI)
- Cloud Model Providers (AWS Bedrock, GCP Vertex AI, Azure OpenAI) are supported with some agents
- Self-hosted models (e.g. llama3) and AI proxies (OpenRouter) are supported with some agents
## Table of Contents
<children></children>

View File

@ -0,0 +1,55 @@
# Coding Agents
> [!NOTE]
>
> This page is not exhaustive and the landscape is evolving rapidly. Please
> [open an issue](https://github.com/coder/coder/issues/new) or submit a pull
> request if you'd like to see your favorite agent added or updated.
There are several types of coding agents emerging:
- **Headless agents** can run without an IDE open and are great for rapid
prototyping, background tasks, and chat-based supervision.
- **In-IDE agents** require developers keep their IDE opens and are great for
interactive, focused coding on more complex tasks.
## Headless agents
Headless agents can run without an IDE open, or alongside any IDE. They
typically run as CLI commands or web apps. With Coder, developers can interact
with agents via any preferred tool such as via PR comments, within the IDE,
inside the Coder UI, or even via the REST API or an MCP client such as Claude
Desktop or Cursor.
| Agent | Supported Models | Coder Support | Limitations |
|---------------|---------------------------------------------------------|---------------------------|---------------------------------------------------------|
| Claude Code ⭐ | Anthropic Models Only (+ AWS Bedrock and GCP Vertex AI) | First class integration ✅ | Beta (research preview) |
| Goose | Most popular AI models + gateways | First class integration ✅ | Less effective compared to Claude Code |
| Aider | Most popular AI models + gateways | In progress ⏳ | Can only run 1-2 defined commands (e.g. build and test) |
| OpenHands | Most popular AI models + gateways | In progress ⏳ ⏳ | Challenging setup, no MCP support |
[Claude Code](https://github.com/anthropics/claude-code) is our recommended
coding agent due to its strong performance on complex programming tasks.
> Note: Any agent can run in a Coder workspace via our
> [MCP integration](./headless.md).
## In-IDE agents
Coding agents can also run within an IDE, such as VS Code, Cursor or Windsurf.
These editors and extensions are fully supported in Coder and work well for more
complex and focused tasks where an IDE is strictly required.
| Agent | Supported Models | Coder Support |
|-----------------------------|-----------------------------------|--------------------------------------------------------------|
| Cursor (Agent Mode) | Most popular AI models + gateways | ✅ [Cursor Module](https://registry.coder.com/modules/cursor) |
| Windsurf (Agents and Flows) | Most popular AI models + gateways | ✅ via Remote SSH |
| Cline | Most popular AI models + gateways | ✅ via VS Code Extension |
In-IDE agents do not require a special template as they are not used in a
headless fashion. However, they can still be run in isolated Coder workspaces
and report activity to the Coder UI.
## Next Steps
- [Create a Coder template for agents](./create-template.md)

View File

@ -0,0 +1,68 @@
# Best Practices & Adding Tools via MCP
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Overview
Coder templates should be pre-equipped with the tools and dependencies needed
for development. With AI Agents, this is no exception.
## Prerequisites
- A Coder deployment with v2.21 or later
- A [template configured for AI agents](./create-template.md)
## Best Practices
- Since agents are still early, it is best to use the most capable ML models you
have access to in order to evaluate their performance.
- Set a system prompt with the `AI_SYSTEM_PROMPT` environment in your template
- Within your repositories, write a `.cursorrules`, `CLAUDE.md` or similar file
to guide the agent's behavior.
- To read issue descriptions or pull request comments, install the proper CLI
(e.g. `gh`) in your image/template.
- Ensure your [template](./create-template.md) is truly pre-configured for
development without manual intervention (e.g. repos are cloned, dependencies
are built, secrets are added/mocked, etc.)
> Note: [External authentication](../../admin/external-auth.md) can be helpful
> to authenticate with third-party services such as GitHub or JFrog.
- Give your agent the proper tools via MCP to interact with your codebase and
related services.
- Read our recommendations on [securing agents](./securing.md) to avoid
surprises.
## Adding Tools via MCP
Model Context Protocol (MCP) is an emerging standard for adding tools to your
agents.
Follow the documentation for your [agent](./agents.md) to learn how to configure
MCP servers. See
[modelcontextprotocol/servers](https://github.com/modelcontextprotocol/servers)
to browse open source MCP servers.
### Our Favorite MCP Servers
In internal testing, we have seen significant improvements in agent performance
when these tools are added via MCP.
- [Playwright](https://github.com/microsoft/playwright-mcp): Instruct your agent
to open a browser, and check its work by viewing output and taking
screenshots.
- [desktop-commander](https://github.com/wonderwhy-er/DesktopCommanderMCP):
Instruct your agent to run long-running tasks (e.g. `npm run dev`) in the
background instead of blocking the main thread.
## Next Steps
- [Supervise Agents in the UI](./coder-dashboard.md)
- [Supervise Agents in the IDE](./ide-integration.md)
- [Supervise Agents Programmatically](./headless.md)
- [Securing Agents](./securing.md)

View File

@ -0,0 +1,28 @@
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Prerequisites
- A Coder deployment with v2.21 or later
- A [template configured for AI agents](./create-template.md)
## Overview
Once you have an agent running and reporting activity to Coder, you can view
status and switch between workspaces from the Coder dashboard.
![Coder Dashboard](../../images/guides/ai-agents/workspaces-list.png)
![Workspace Details](../../images/guides/ai-agents/workspace-details.png)
## Next Steps
- [Supervise Agents in the IDE](./ide-integration.md)
- [Supervise Agents Programmatically](./headless.md)
- [Securing Agents](./securing.md)

View File

@ -0,0 +1,57 @@
# Create a Coder template for agents
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Overview
This tutorial will guide you through the process of creating a Coder template
for agents.
## Prerequisites
- A Coder deployment with v2.21 or later
- A template that is pre-configured for your projects
- You have selected an [agent](./agents.md) based on your needs
## 1. Duplicate an existing template
It is best to create a separate template for AI agents based on an existing
template that has all of the tools and dependencies installed.
This can be done in the Coder UI:
![Duplicate template](../../images/guides/ai-agents/duplicate.png)
## 2. Add a module for supported agents
We currently publish a module for Claude Code and Goose. Additional modules are
[coming soon](./agents.md).
- [Add the Claude Code module](https://registry.coder.com/modules/claude-code)
- [Add the Goose module](https://registry.coder.com/modules/goose)
Follow the instructions in the Coder Registry to install the module. Be sure to
enable the `experiment_use_screen` and `experiment_report_tasks` variables to
report status back to the Coder control plane.
> Alternatively, you can report status from a custom agent back to the Coder
> control plane via our MCP server. For more information,
> [join our Discord](https://discord.gg/coder) or
> [contact us](https://coder.com/contact).
## 3. Confirm tasks are streaming in the Coder UI
The Coder dashboard should now show tasks being reported by the agent.
![AI Agents in Coder](../../images/guides//ai-agents/landing.png)
## Next Steps
- [Integrate with your issue tracker](./issue-tracker.md)

View File

@ -0,0 +1,54 @@
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Prerequisites
- A Coder deployment with v2.21 or later
- A [template configured for AI agents](./create-template.md)
## Overview
Once you have an agent running and reporting activity to Coder, you can manage
it programmatically via the MCP server, Coder CLI, and/or REST API.
## MCP Server
Power users can configure [Claude Desktop](https://claude.ai/download), Cursor,
or other tools with MCP support to interact with Coder in order to:
- List workspaces
- Create/start/stop workspaces
- Run commands on workspaces
- Check in on agent activity
In this model, an [IDE Agent](./agents.md#in-ide-agents) could interact with a
remote Coder workspace, or Coder can be used in a remote pipeline or a larger
workflow.
The Coder CLI has options to automatically configure MCP servers for you. On
your local machine, run the following command:
```sh
coder mcp claude-desktop # Configure Claude Desktop to interact with Coder
coder mcp cursor # Configure Cursor to interact with Coder
```
## Coder CLI
Workspaces can be created, started, and stopped via the Coder CLI. See the
[CLI docs](../../reference/cli/) for more information.
## REST API
The Coder REST API can be used to manage workspaces and agents. See the
[API docs](../../reference/api/) for more information.
## Next Steps
- [Securing Agents](./securing.md)

View File

@ -0,0 +1,29 @@
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Prerequisites
- A Coder deployment with v2.21 or later
- A [template configured for AI agents](./create-template.md)
- VS Code, Windsurf, or Cursor IDE with the
[Coder Extension](https://github.com/coder/vscode-coder/releases) v1.6.0+ or
the [experimental AI VSIX](https://github.com/coder/vscode-coder/releases/)
## Overview
Once you have an agent running and reporting activity to Coder, you can view the
status and switch between workspaces from the IDE. This can be very helpful for
reviewing code, working along with the agent, and more.
![IDE Integration](../../images/guides/ai-agents/ide-integration.png)
## Next Steps
- [Programmatically manage agents](./headless.md)
- [Securing Agents with Boundaries](./securing.md)

View File

@ -0,0 +1,60 @@
# Create a Coder template for agents
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
## Overview
Coder has first-class support for managing agents through Github, but can also
integrate with other issue trackers. Use our action to interact with agents
directly in issues and PRs.
## Prerequisites
- A Coder deployment with v2.21 or later
- A [template configured for AI agents](./create-template.md)
## GitHub
### GitHub Action
The [start-workspace](https://github.com/coder/start-workspace-action) GitHub
action will create a Coder workspace based on a specific phrase in a comment
(e.g. `@coder`).
![GitHub Issue](../../images/guides/ai-agents/github-action.png)
When properly configured with an [AI template](./create-template.md), the agent
will begin working on the issue.
### Pull Request Support (Coming Soon)
We're working on adding support for an agent automatically creating pull
requests and responding to your comments. Check back soon or
[join our Discord](https://discord.gg/coder) to stay updated.
![GitHub Pull Request](../../images/guides/ai-agents/github-pr.png)
## Integrating with Other Issue Trackers
While support for other issue trackers is under consideration, you can can use
the [REST API](../../reference/api/) or [CLI](../../reference/cli/) to integrate
with other issue trackers or CI pipelines.
In addition, an [Open in Coder](../../admin/templates/open-in-coder.md) flow can
be used to generate a URL and/or markdown button in your issue tracker to
automatically create a workspace with specific parameters.
## Next Steps
- [Best practices & adding tools via MCP](./best-practices.md)
- [Supervise Agents in the UI](./coder-dashboard.md)
- [Supervise Agents in the IDE](./ide-integration.md)
- [Supervise Agents Programmatically](./headless.md)
- [Securing Agents with Boundaries](./securing.md)

View File

@ -0,0 +1,47 @@
> [!NOTE]
>
> This functionality is in early access and subject to change. Do not run in
> production as it is unstable. Instead, deploy these changes into a demo or
> staging environment.
>
> Join our [Discord channel](https://discord.gg/coder) or
> [contact us](https://coder.com/contact) to get help or share feedback.
As the AI landscape is evolving, we are working to ensure Coder remains a secure
platform for running AI agents just as it is for other cloud development
environments.
## Use Trusted Models
Most [agents](./agents.md) can be configured to either use a local LLM (e.g.
llama3), an agent proxy (e.g. OpenRouter), or a Cloud-Provided LLM (e.g. AWS
Bedrock). Research which models you are comfortable with and configure your
[Coder templates](./create-template.md) to use those.
## Set up Firewalls and Proxies
Many enterprises run Coder workspaces behind a firewall or a proxy to prevent
threats or bad actors. These same protections can be used to ensure AI agents do
not access or upload sensitive information.
## Separate API keys and scopes for agents
Many agents require API keys to access external services. It is recommended to
create a separate API key for your agent with the minimum permissions required.
This will likely involve editing your
[template for Agents](./create-template.md) to set different scopes or tokens
from the standard one.
Additional guidance and tooling is coming in future releases of Coder.
## Set Up Agent Boundaries (Premium)
Agent Boundaries add an additional layer and isolation of security between the
agent and the rest of the environment inside of your Coder workspace, allowing
humans to have more privileges and access compared to agents inside the same
workspace.
Trial agent boundaries in your workspaces by following the instructions in the
[boundary-releases](https://github.com/coder/boundary-releases) repository.
- [Contact us for more information](https://coder.com/contact)

View File

@ -14,6 +14,7 @@
"azure.svg", "azure.svg",
"bitbucket.svg", "bitbucket.svg",
"centos.svg", "centos.svg",
"claude.svg",
"clion.svg", "clion.svg",
"code.svg", "code.svg",
"coder.svg", "coder.svg",
@ -49,6 +50,7 @@
"go.svg", "go.svg",
"goland.svg", "goland.svg",
"google.svg", "google.svg",
"goose.svg",
"image.svg", "image.svg",
"intellij.svg", "intellij.svg",
"java.svg", "java.svg",

View File

@ -0,0 +1,4 @@
<svg width="512" height="510" viewBox="0 0 512 510" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.612 0H396.387C459.974 0 512 52.026 512 115.612V394.027C512 457.614 459.974 509.639 396.387 509.639H115.612C52.026 509.639 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0Z" fill="#D77655"/>
<path d="M142.27 316.619L215.925 275.293L217.163 271.704L215.925 269.708L212.336 269.707L200.026 268.948L157.942 267.81L121.444 266.294L86.083 264.398L77.186 262.503L68.846 251.508L69.705 246.024L77.187 240.994L87.904 241.929L111.587 243.546L147.124 245.998L172.906 247.515L211.099 251.483H217.163L218.023 249.032L215.95 247.515L214.332 245.998L177.556 221.076L137.746 194.738L116.894 179.572L105.621 171.889L99.934 164.685L97.483 148.964L107.72 137.691L121.47 138.626L124.983 139.562L138.911 150.278L168.66 173.305L207.508 201.917L213.195 206.644L215.47 205.027L215.748 203.889L213.195 199.618L192.065 161.425L169.519 122.577L159.484 106.476L156.83 96.821C155.895 92.853 155.213 89.517 155.213 85.447L166.865 69.624L173.31 67.551L188.855 69.624L195.402 75.311L205.057 97.403L220.703 132.183L244.968 179.474L252.071 193.502L255.862 206.494L257.278 210.462L259.727 210.461V208.186L261.724 181.545L265.414 148.838L269.003 106.754L270.242 94.9L276.105 80.694L287.757 73.011L296.856 77.359L304.338 88.075L303.302 95.001L298.853 123.916L290.133 169.21L284.446 199.541H287.759L291.551 195.75L306.893 175.378L332.675 143.151L344.049 130.362L357.319 116.233L365.836 109.509L381.936 109.508L393.79 127.125L388.483 145.324L371.902 166.353L358.152 184.172L338.436 210.712L326.127 231.943L327.265 233.637L330.197 233.359L374.733 223.88L398.795 219.533L427.509 214.605L440.501 220.671L441.917 226.838L436.811 239.451L406.101 247.034L370.083 254.238L316.447 266.927L315.79 267.407L316.548 268.342L340.712 270.617L351.049 271.173H376.35L423.464 274.687L435.773 282.826L443.154 292.785L441.916 300.368L422.959 310.023L397.38 303.957L337.678 289.752L317.204 284.646L314.374 284.645V286.339L331.435 303.021L362.701 331.254L401.853 367.651L403.85 376.65L398.82 383.752L393.513 382.994L359.112 357.111L345.842 345.46L315.789 320.158L313.793 320.157V322.811L320.719 332.947L357.293 387.922L359.188 404.781L356.535 410.266L347.056 413.577L336.642 411.682L315.234 381.628L293.142 347.784L275.323 317.453L273.15 318.691L262.635 431.952L257.706 437.74L246.332 442.088L236.854 434.884L231.824 423.232L236.854 400.205L242.92 370.153L247.848 346.267L252.297 316.593L254.951 306.735L254.774 306.078L252.601 306.356L230.231 337.066L196.21 383.043L169.291 411.858L162.846 414.411L151.673 408.622L152.71 398.285L158.953 389.085L196.21 341.693L218.68 312.322L233.188 295.361L233.087 292.91H232.228L133.274 357.161L115.656 359.436L108.073 352.333L109.009 340.681L112.598 336.89L142.347 316.416L142.246 316.518L142.27 316.619Z" fill="#FCF2EE"/>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,4 @@
<svg width="1648" height="1648" viewBox="0 0 1648 1648" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1248 0H400C179.086 0 0 179.086 0 400V1248C0 1468.91 179.086 1648 400 1648H1248C1468.91 1648 1648 1468.91 1648 1248V400C1648 179.086 1468.91 0 1248 0Z" fill="white"/>
<path d="M1293.43 1351.06C1349.36 1338.92 1408.68 1305.87 1408.68 1305.87L1304.86 1220.35C1253.53 1178.1 1209.85 1127.35 1175.69 1070.32C1128.5 991.535 1063.29 925.049 985.455 876.335L947.439 854.198C934.413 845.144 925.332 831.032 924.039 815.111C923.211 804.845 925.671 795.668 931.41 787.592C951.204 759.692 1053.52 638.291 1072.27 622.778C1096.41 602.819 1123.32 586.217 1148.28 567.209C1151.83 564.503 1155.39 561.812 1158.9 559.067C1159.02 558.944 1159.2 558.848 1159.31 558.74C1167.32 552.416 1174.88 545.699 1180.89 537.734C1202.59 512.606 1207.86 490.391 1209.15 480.56C1206.22 471.098 1197.46 449.942 1173.05 425.537C1188.35 426.476 1206.87 438.575 1223.66 452.81C1234.93 434.795 1246.73 415.76 1258.52 396.686C1266.39 383.945 1254.71 374.414 1254.39 374.117L1254.32 374.102C1254.32 374.102 1254.32 374.048 1254.31 374.036C1254.01 373.709 1244.48 362.03 1231.76 369.902C1204.58 386.72 1177.42 403.553 1153.26 418.847C1153.26 418.847 1124.62 418.25 1090.72 447.536C1082.74 453.56 1076.02 461.117 1069.71 469.112C1069.59 469.235 1069.48 469.397 1069.38 469.52C1066.62 473.015 1063.93 476.576 1061.24 480.14C1042.22 505.115 1025.63 532.01 1005.67 556.157C990.171 574.919 868.758 677.216 840.858 697.013C832.782 702.752 823.617 705.224 813.339 704.381C797.433 703.103 783.306 694.007 774.249 680.984L752.115 642.968C703.401 565.103 636.915 499.922 558.126 452.729C501.102 418.577 450.36 374.876 408.105 323.564L322.557 219.743C322.557 219.743 289.491 279.05 277.362 334.985C294.234 355.502 338.247 406.421 389.478 445.307C334.398 419.405 293.679 399.377 261.564 382.628C256.614 419.255 258.546 474.647 263.643 517.544C298.41 532.757 357.606 556.196 417.867 568.652C369.666 579.923 316.791 581.975 275.961 581.174C283.155 607.727 293.16 634.811 306.621 662.057C312.345 674.66 318.612 686.966 325.383 699.011C346.989 704.954 431.817 717.311 476.955 707.168C432.048 723.2 356.655 750.134 356.655 750.134C414.561 822.179 478.56 880.793 478.56 880.793C575.907 828.449 598.098 821.297 671.109 773.546C552.876 869.753 522.189 909.032 489 949.4L465.873 981.854C453.855 998.714 443.427 1016.62 434.712 1035.4C405.549 1098.14 364.269 1231.85 364.269 1231.85C356.901 1255.15 373.977 1272.23 396.6 1264.18C396.6 1264.18 530.28 1222.9 593.052 1193.74C611.817 1185.01 629.751 1174.58 646.596 1162.57L679.05 1139.45C689.94 1130.49 700.764 1121.71 712.647 1111.35C712.647 1111.35 794.346 1208.14 878.328 1271.81C878.328 1271.81 905.265 1196.42 921.294 1151.51C911.136 1196.66 923.496 1281.49 929.451 1303.08C941.469 1309.85 953.802 1316.12 966.405 1321.84C993.666 1335.31 1020.73 1345.31 1047.29 1352.5C1046.5 1311.66 1048.54 1258.8 1059.81 1210.6C1072.27 1270.86 1095.69 1330.07 1110.92 1364.82C1153.81 1369.92 1209.21 1371.85 1245.84 1366.9C1229.08 1334.79 1209.06 1294.04 1183.16 1238.99C1222.04 1290.22 1272.96 1334.23 1293.48 1351.1L1293.43 1351.06Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB