<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Takuto Yuki</title>
    <description>The latest articles on Forem by Takuto Yuki (@pppp606).</description>
    <link>https://forem.com/pppp606</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2690248%2Fec5c4d48-2e90-4434-b594-f699df12706b.jpeg</url>
      <title>Forem: Takuto Yuki</title>
      <link>https://forem.com/pppp606</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/pppp606"/>
    <language>en</language>
    <item>
      <title>Building an MCP Server to Give Claude Code Memory of Its Own Actions</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Thu, 16 Oct 2025 03:54:58 +0000</pubDate>
      <link>https://forem.com/pppp606/building-an-mcp-server-to-give-claude-code-memory-of-its-own-actions-3d20</link>
      <guid>https://forem.com/pppp606/building-an-mcp-server-to-give-claude-code-memory-of-its-own-actions-3d20</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;I built &lt;a href="https://github.com/pppp606/claude-ops-mcp" rel="noopener noreferrer"&gt;claude-ops-mcp&lt;/a&gt;, an MCP server that lets Claude Code access its own operation history. Now Claude can accurately recall what files it edited, what commands it ran, and what changes it made—without relying on inference.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Claude Code v2 introduced the &lt;code&gt;/rewind&lt;/code&gt; command, which is great for rolling back conversations. But there's a fundamental issue: &lt;strong&gt;Claude Code doesn't actually remember what it did&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When you ask "What did you just do?", Claude infers an answer based on context rather than checking its actual operation log. This leads to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Inaccurate responses about past actions&lt;/li&gt;
&lt;li&gt;Inability to review specific changes without &lt;code&gt;/rewind&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Difficulty debugging when something goes wrong&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I found myself constantly asking "wait, what files did you modify?" and getting vague answers. It felt inefficient—and honestly, a bit unfair to Claude.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution
&lt;/h2&gt;

&lt;p&gt;Claude Code stores session logs in &lt;code&gt;~/.claude/projects/&amp;lt;projectHash&amp;gt;/&amp;lt;sessionId&amp;gt;.jsonl&lt;/code&gt;. This MCP server reads those logs and makes them accessible through four tools, allowing Claude to query its own history with precision.&lt;/p&gt;

&lt;h3&gt;
  
  
  How It Works
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Automatic Session Detection&lt;/strong&gt;: Uses the &lt;code&gt;toolUseId&lt;/code&gt; passed during MCP tool invocation to identify the current session file&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;JSONL Parsing&lt;/strong&gt;: Streams and indexes Edit/Write/Bash operations from the log&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Efficient Querying&lt;/strong&gt;: Filters by file path or operation type for fast retrieval&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Caching&lt;/strong&gt;: Optimizes performance by caching session detection results&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Nothing fancy—just giving Claude access to its own diary.&lt;/p&gt;

&lt;h2&gt;
  
  
  Four MCP Tools
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;listFileChanges&lt;/code&gt; - File Modification History
&lt;/h3&gt;

&lt;p&gt;Get a history of file changes with CREATE/UPDATE/DELETE operations (READ operations excluded).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;filePath&lt;/code&gt;: File path or pattern (e.g., "src/index.ts", "helpers.ts")&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;limit&lt;/code&gt;: Max operations to retrieve (default: 100, max: 1000)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Returns:&lt;/strong&gt; Operation ID, timestamp, tool name, file path, change type&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;code&gt;listBashHistory&lt;/code&gt; - Command Execution History
&lt;/h3&gt;

&lt;p&gt;Retrieve executed bash commands with summaries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;limit&lt;/code&gt;: Max commands to retrieve (default: 100, max: 1000)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Returns:&lt;/strong&gt; Operation ID, timestamp, command, exit code, working directory, summary&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;code&gt;showBashResult&lt;/code&gt; - Detailed Command Results
&lt;/h3&gt;

&lt;p&gt;Get stdout/stderr for a specific command using the operation ID from &lt;code&gt;listBashHistory&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;id&lt;/code&gt;: Operation ID (e.g., "toolu_01Vabc...")&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Returns:&lt;/strong&gt; stdout, stderr, exit code&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;code&gt;showOperationDiff&lt;/code&gt; - Detailed Operation Diff
&lt;/h3&gt;

&lt;p&gt;Get detailed diffs in unified format using operation IDs from &lt;code&gt;listFileChanges&lt;/code&gt; or &lt;code&gt;listBashHistory&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;id&lt;/code&gt;: Operation ID&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Returns:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;For Edit/Write: &lt;code&gt;oldString&lt;/code&gt;, &lt;code&gt;newString&lt;/code&gt;, unified diff&lt;/li&gt;
&lt;li&gt;For Bash: stdout, stderr, exitCode&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Installation &amp;amp; Setup
&lt;/h2&gt;

&lt;p&gt;Install globally via npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; claude-ops-mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create &lt;code&gt;.mcp.json&lt;/code&gt; in your project root:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"claude-ops-mcp"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"claude-ops-mcp"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For development from source:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"claude-ops-mcp"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"/absolute/path/to/claude-ops-mcp/dist/index.js"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Restart Claude Code to activate the MCP server.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Usage Examples
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Review Recent Edits
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; "Show me what you just edited"&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; [Uses &lt;code&gt;listFileChanges&lt;/code&gt; to retrieve recent modifications]&lt;/p&gt;

&lt;h3&gt;
  
  
  View Specific Diffs
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; "Show me the diff for that change"&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; [Uses &lt;code&gt;showOperationDiff&lt;/code&gt; to display detailed unified diff]&lt;/p&gt;

&lt;h3&gt;
  
  
  Track File History
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; "What changes did you make to server.ts?"&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; [Uses &lt;code&gt;listFileChanges(filePath: "server.ts")&lt;/code&gt;]&lt;/p&gt;

&lt;h3&gt;
  
  
  Check Test Results
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; "What were the results of that test you ran?"&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; [Uses &lt;code&gt;listBashHistory&lt;/code&gt; → &lt;code&gt;showBashResult&lt;/code&gt;]&lt;/p&gt;

&lt;h3&gt;
  
  
  Debug Failed Commands
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; "Show me which commands failed"&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; [Uses &lt;code&gt;listBashHistory&lt;/code&gt; to find exitCode != 0 → &lt;code&gt;showBashResult&lt;/code&gt; for details]&lt;/p&gt;

&lt;p&gt;Now when you ask "what did you just do?", Claude responds with factual information from its operation log rather than inference.&lt;/p&gt;

&lt;h2&gt;
  
  
  Open Questions
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Why Isn't This Built Into Claude Code?
&lt;/h3&gt;

&lt;p&gt;This seems like a natural feature for Claude Code to have natively. My guess is that allowing Claude to recursively read its own operations might create context consumption loops or other issues. I've limited this MCP to file edits and command executions to mitigate that risk.&lt;/p&gt;

&lt;p&gt;So far, I've had no issues and find it genuinely useful. If you encounter problems, please &lt;a href="https://github.com/pppp606/claude-ops-mcp/issues" rel="noopener noreferrer"&gt;open an issue&lt;/a&gt;!&lt;/p&gt;

&lt;h3&gt;
  
  
  Windows Support
&lt;/h3&gt;

&lt;p&gt;I've specified what I believe to be the correct log file path for Windows, but I haven't thoroughly tested it. If you're on Windows and encounter issues, please let me know!&lt;/p&gt;

&lt;h2&gt;
  
  
  Lessons Learned
&lt;/h2&gt;

&lt;h3&gt;
  
  
  MCP Development Requires Frequent Restarts
&lt;/h3&gt;

&lt;p&gt;During development, Claude Code needs to be restarted for each MCP change, which slows down the iteration cycle considerably. There might be better approaches I'm not aware of yet.&lt;/p&gt;

&lt;p&gt;Improving the development experience—especially for the AI developer—would make MCP tool creation much more productive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It Out
&lt;/h2&gt;

&lt;p&gt;If you're interested, give it a try! Claude Code seems to appreciate having access to its own memory (or maybe that's just my imagination 😊).&lt;/p&gt;




&lt;p&gt;&lt;a href="https://github.com/pppp606/claude-ops-mcp" rel="noopener noreferrer"&gt;https://github.com/pppp606/claude-ops-mcp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>mcp</category>
      <category>ai</category>
      <category>claude</category>
      <category>vibecoding</category>
    </item>
    <item>
      <title>One Chart That Explains the Power of AI-Driven Development</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Tue, 09 Sep 2025 15:12:04 +0000</pubDate>
      <link>https://forem.com/pppp606/one-chart-that-explains-the-power-of-ai-driven-development-5gbo</link>
      <guid>https://forem.com/pppp606/one-chart-that-explains-the-power-of-ai-driven-development-5gbo</guid>
      <description>&lt;h2&gt;
  
  
  What I Did
&lt;/h2&gt;

&lt;p&gt;I wanted to see how much AI coding agents are actually changing the way people work.&lt;br&gt;
So I looked at a group that’s almost certainly using them heavily: &lt;strong&gt;Anthropic engineers&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Here’s what I did:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Collected GitHub accounts that mention &lt;em&gt;Anthropic&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Pulled their daily contribution counts&lt;/li&gt;
&lt;li&gt;Aggregated the data into a weekly chart&lt;/li&gt;
&lt;/ol&gt;


&lt;h2&gt;
  
  
  The Chart
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5zy16t8ao04ulmkd63oy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5zy16t8ao04ulmkd63oy.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Commit activity has been rising sharply — especially since spring.&lt;br&gt;
This group is likely among the heaviest users of AI-assisted coding today.&lt;/p&gt;

&lt;p&gt;Now imagine this isn’t Anthropic, but &lt;strong&gt;your competitors’ developers&lt;/strong&gt;.&lt;br&gt;
That’s the perspective worth sharing with your team.&lt;/p&gt;


&lt;h2&gt;
  
  
  How the Chart Was Made
&lt;/h2&gt;

&lt;p&gt;I wrote a small script to generate it:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/pppp606" rel="noopener noreferrer"&gt;
        pppp606
      &lt;/a&gt; / &lt;a href="https://github.com/pppp606/github-contribution-analyzer" rel="noopener noreferrer"&gt;
        github-contribution-analyzer
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;GitHub Users Analysis Tools&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;This project contains a comprehensive toolset for retrieving GitHub users/organization members and analyzing their contribution data.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;📁 File Structure&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Main Tools:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;github_users_enhanced.py&lt;/code&gt; - User/Organization search&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;github_batch_analyzer.py&lt;/code&gt; - Batch contribution analysis&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;github_group_trends.py&lt;/code&gt; - Weekly group trend analysis ⭐&lt;strong&gt;Recommended&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Support Tools:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;github_users_gh.py&lt;/code&gt; - Basic user search&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;github_visualizer.py&lt;/code&gt; - Comprehensive chart generation&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;github_contributions.py&lt;/code&gt; - Individual user contribution analysis&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Configuration Files:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;requirements.txt&lt;/code&gt; - Python dependencies&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;README.md&lt;/code&gt; - Usage instructions (English)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;README_ja.md&lt;/code&gt; - Usage instructions (Japanese)&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Scripts&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;1. User Search (&lt;code&gt;github_users_enhanced.py&lt;/code&gt;) - &lt;strong&gt;Recommended&lt;/strong&gt;
&lt;/h3&gt;

&lt;/div&gt;
&lt;p&gt;Uses GitHub API via gh command with support for multiple retrieval modes.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Features:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Supports keyword search, organization all members, and public members retrieval&lt;/li&gt;
&lt;li&gt;Flexible configuration via command line arguments&lt;/li&gt;
&lt;li&gt;Reliable and fast using official API&lt;/li&gt;
&lt;li&gt;Requires gh CLI authentication&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Usage:&lt;/strong&gt;&lt;/p&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;&lt;span class="pl-c"&gt;&lt;span class="pl-c"&gt;#&lt;/span&gt; Authenticate with GitHub CLI (first time only)&lt;/span&gt;
gh auth login
&lt;span class="pl-c"&gt;&lt;span class="pl-c"&gt;#&lt;/span&gt; Keyword search&lt;/span&gt;
python3 github_users_enhanced.py --mode search -q &lt;span class="pl-s"&gt;&lt;span class="pl-pds"&gt;"&lt;/span&gt;YourCompany&lt;span class="pl-pds"&gt;"&lt;/span&gt;&lt;/span&gt;

&lt;span class="pl-c"&gt;&lt;span class="pl-c"&gt;#&lt;/span&gt; Get all&lt;/span&gt;&lt;/pre&gt;…
&lt;/div&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/pppp606/github-contribution-analyzer" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;You can point it at any keyword or org, fetch contribution counts, and produce the same style of chart.&lt;br&gt;
It took about 15 minutes to go from idea to visualization.&lt;/p&gt;




&lt;h2&gt;
  
  
  Notes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;User list comes from a simple keyword search:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/search?q=Anthropic&amp;amp;type=users" rel="noopener noreferrer"&gt;https://github.com/search?q=Anthropic&amp;amp;type=users&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Roughly 80–90% appear to be actual Anthropic employees.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;Contribution counts don’t directly equal development speed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Still, AI-driven workflows generally push commit activity higher.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;No ties to Anthropic.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I even looked for a Claude Code affiliate program — none exists 😅&lt;/li&gt;
&lt;li&gt;And yes, sometimes Codex feels smarter.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  Takeaway
&lt;/h2&gt;

&lt;p&gt;Put this next to your own team’s contribution chart, and the contrast speaks for itself.&lt;/p&gt;




</description>
      <category>ai</category>
      <category>productivity</category>
      <category>analytics</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>Cursor Vibe Check — It felt right... but was it actually efficient?</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Wed, 04 Jun 2025 12:28:18 +0000</pubDate>
      <link>https://forem.com/pppp606/cursor-vibe-check-it-felt-right-but-was-it-actually-efficient-36no</link>
      <guid>https://forem.com/pppp606/cursor-vibe-check-it-felt-right-but-was-it-actually-efficient-36no</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Let me start with a simple question: how much are you spending on AI tools?&lt;/p&gt;

&lt;p&gt;For me, it's already over $100 a month.&lt;/p&gt;

&lt;p&gt;Lately, I've been running out of my 500 Cursor requests way too quickly.&lt;br&gt;
Each time I hit Enter, it feels like pulling a slot machine lever —&lt;br&gt;
&lt;em&gt;“Come on... let this one be the perfect response...!”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;There’s a lot of advice out there:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Use this prompt!”&lt;/li&gt;
&lt;li&gt;“Follow this kind of workflow!”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But I often wonder:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How efficient are those prompts, really?&lt;/li&gt;
&lt;li&gt;Could there be a better approach?&lt;/li&gt;
&lt;li&gt;When something doesn’t work, where exactly did it go wrong?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Unfortunately, we rarely have enough data to reflect on that.&lt;/p&gt;

&lt;p&gt;And in bigger projects, team-wide AI usage costs can become significant.&lt;br&gt;
Even if you’ve committed a &lt;code&gt;.cursor&lt;/code&gt; config to your repo, how do you know those rules are actually working?&lt;br&gt;
Tweaking them might unknowingly increase token usage for everyone.&lt;/p&gt;

&lt;p&gt;That’s why I built a tool to summarize Cursor's large logs in a way that's easy to understand and analyze:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/pppp606/cursor-efficiency" rel="noopener noreferrer"&gt;https://github.com/pppp606/cursor-efficiency&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This tool is for you if:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You burn through your 500 requests way too fast&lt;/li&gt;
&lt;li&gt;You want to improve how you interact with AI&lt;/li&gt;
&lt;li&gt;You want to track and optimize team-wide AI usage&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  2. Overview
&lt;/h2&gt;

&lt;p&gt;This tool reads Cursor’s local logs to extract useful data: what kind of prompts you sent, how many tokens were used, how much code was actually committed, and so on.&lt;/p&gt;

&lt;p&gt;For example, you might find:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I sent all these prompts, but in the end, only this much code was committed... my prompt rejection rate is way too high!"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The tool outputs a summarized log in JSON format like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"branch"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"main"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"startTime"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2025-06-01T13:28:02.820Z"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"endTime"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2025-06-02T01:37:21.871Z"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"usedTokens"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"input"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;16819&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"output"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1987&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"usageRequestAmount"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"chatCount"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"input"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"output"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"git"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"linesChanged"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;170&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"commit"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"b5dec83ee341d045d3645b8a9f9f23c5f8af2e4f"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"diff"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"...diff output..."&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"proposedCodeCount"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"adoptionRate"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"chatEntries"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="err"&gt;...&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Behind the scenes, Cursor writes logs to a local SQLite file called &lt;code&gt;state.vscdb&lt;/code&gt;. This tool digs into that database, finds what’s useful, and presents it cleanly.&lt;/p&gt;

&lt;p&gt;If you’ve ever found yourself struggling to track down where a certain AI response or suggestion came from, this tool will help.&lt;/p&gt;

&lt;p&gt;You can also check out the log extraction logic here:&lt;br&gt;
&lt;a href="https://github.com/pppp606/cursor-efficiency/blob/main/src/utils/chatLogs.ts" rel="noopener noreferrer"&gt;https://github.com/pppp606/cursor-efficiency/blob/main/src/utils/chatLogs.ts&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  3. Installation
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/pppp606/cursor-efficiency.git
&lt;span class="nb"&gt;cd &lt;/span&gt;cursor-efficiency

npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run build
npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Note: The tool isn’t published to npm yet, so you’ll need to build and install it manually for now.&lt;/p&gt;


&lt;h2&gt;
  
  
  4. How to Use
&lt;/h2&gt;

&lt;p&gt;The basic flow is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Start measurement when you create a new branch&lt;/li&gt;
&lt;li&gt;Do your usual Cursor-based development&lt;/li&gt;
&lt;li&gt;End the measurement and review your AI usage stats&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Using it across multiple branches or in different directories is not recommended.&lt;/p&gt;
&lt;h3&gt;
  
  
  4.1 Start Measurement
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cursor-efficiency start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This creates &lt;code&gt;.cursor-efficiency.json&lt;/code&gt; under the log directory and records the starting time and commit SHA.&lt;/p&gt;
&lt;h3&gt;
  
  
  4.2 Develop as Usual
&lt;/h3&gt;

&lt;p&gt;Use Cursor as usual. Ask AI for help, reject some suggestions, edit others, and commit changes as you go.&lt;/p&gt;

&lt;p&gt;It’s best to end the measurement when your development task is done and you’re about to open a PR.&lt;/p&gt;
&lt;h3&gt;
  
  
  4.3 End Measurement
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Without chat logs:&lt;/span&gt;
cursor-efficiency end

&lt;span class="c"&gt;# With detailed chat log:&lt;/span&gt;
cursor-efficiency end &lt;span class="nt"&gt;-c&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If you want to save the output to a file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cursor-efficiency end &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; my_log.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Field Descriptions
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;usedTokens.input / output&lt;/strong&gt;: Total tokens used in prompts and responses&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;usageRequestAmount&lt;/strong&gt;: Number of AI requests (related to cost)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;chatCount.input / output&lt;/strong&gt;: Number of turns in the conversation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;git.linesChanged&lt;/strong&gt;: Actual lines changed and committed&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;git.diff&lt;/strong&gt;: Commit diff (only shown in detailed mode)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;proposedCodeCount / adoptionRate&lt;/strong&gt;: Number of AI code proposals and how many were accepted&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  6. Real Example: Reflecting with AI
&lt;/h2&gt;

&lt;p&gt;You can feed the output log into an LLM (like GPT-4) and ask for improvement suggestions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Prompt Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Please analyze this coding session log and give advice on how the user could improve their interaction with AI.

## Goals
- Increase adoptionRate (accepted suggestions)
- Reduce chatCount (number of back-and-forths)
- Reduce usageRequestAmount (AI request count)

## Log
&amp;lt;your JSON log here&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  7. Team Use: Git Hook Example
&lt;/h2&gt;

&lt;p&gt;To collect usage data across your team, you can use a Git hook like &lt;code&gt;pre-push&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/bin/bash&lt;/span&gt;

&lt;span class="nv"&gt;BRANCH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;git rev-parse &lt;span class="nt"&gt;--abbrev-ref&lt;/span&gt; HEAD&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="nv"&gt;SHA&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;git rev-parse &lt;span class="nt"&gt;--short&lt;/span&gt; HEAD&lt;span class="si"&gt;)&lt;/span&gt;
&lt;span class="nv"&gt;LOG_FILE&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"cursor_log_&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;BRANCH&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;_&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;SHA&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.json"&lt;/span&gt;

cursor-efficiency end &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$LOG_FILE&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

curl &lt;span class="nt"&gt;-X&lt;/span&gt; POST &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Content-Type: application/json"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; @&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$LOG_FILE&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  https://example.com/api/team-logs/upload

&lt;span class="nb"&gt;exit &lt;/span&gt;0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You could then analyze the data in BigQuery or another system to spot patterns like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“This file always causes a drop in output quality”&lt;/li&gt;
&lt;li&gt;“This teammate really knows how to use AI well”&lt;/li&gt;
&lt;li&gt;“After changing the .cursor config, request counts dropped 10%”&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  8. Roadmap
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Add raw log export mode for feeding into BigQuery&lt;/li&gt;
&lt;li&gt;Add more helpful fields for LLM-based analysis&lt;/li&gt;
&lt;li&gt;Detect changes in Cursor log structure via CI&lt;/li&gt;
&lt;li&gt;Support other AI tools and coding assistants (e.g., Codex)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Feedback
&lt;/h2&gt;

&lt;p&gt;If you have any feedback or run into issues, please open an issue on GitHub!&lt;/p&gt;

</description>
      <category>cursor</category>
      <category>ai</category>
      <category>agents</category>
      <category>vibecoding</category>
    </item>
    <item>
      <title>Automating 44 E2E Tests with AI-Powered Browser Control for Under $1</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Wed, 29 Jan 2025 02:14:37 +0000</pubDate>
      <link>https://forem.com/pppp606/automating-44-e2e-tests-with-ai-powered-browser-control-for-under-1-3fbj</link>
      <guid>https://forem.com/pppp606/automating-44-e2e-tests-with-ai-powered-browser-control-for-under-1-3fbj</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;End-to-end (E2E) testing is crucial for ensuring software quality, yet it is often costly. Writing and maintaining test scripts is time-consuming, and even minor DOM changes can cause test failures.&lt;/p&gt;

&lt;p&gt;While some engineers enjoy writing tests, few specialize in E2E testing. The tech industry has responded with numerous automated and no-code E2E testing solutions, but these tools are often expensive and lack precision.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;browser-use&lt;/strong&gt; offers a new approach by automating browser interactions. Given its capabilities, I experimented with using it for E2E test automation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/browser-use/browser-use" rel="noopener noreferrer"&gt;GitHub - browser-use&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Overview
&lt;/h2&gt;

&lt;p&gt;In this experiment, I used the following tools and services:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Tools:&lt;/strong&gt; Python, browser-use, Playwright, Jest&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Test site:&lt;/strong&gt; &lt;a href="https://www.saucedemo.com" rel="noopener noreferrer"&gt;Sauce Demo&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;A mock e-commerce site widely used for testing&lt;/li&gt;
&lt;li&gt;Fully mocked backend with publicly available test accounts&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Goal:&lt;/strong&gt; Minimize manual effort in E2E testing&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Key Takeaway
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;It performs well but requires optimization.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The complete source code is available in this repository:&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/pppp606/browser-use_e2e_test_automation_labs" rel="noopener noreferrer"&gt;GitHub - browser-use E2E test automation&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Strategy
&lt;/h2&gt;

&lt;p&gt;I initially expected to fully automate E2E testing with a single prompt like "Test this site with E2E!" However, the process required structured steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Extract the site structure using browser-use&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Generate test scenarios for each page&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Review and refine the generated scenarios manually&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Generate test code based on the reviewed scenarios&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Execute the generated test code&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Step 1: Extracting the Site Structure
&lt;/h2&gt;

&lt;p&gt;The first step was extracting the site's structure with browser-use to create a list of pages for testing.&lt;/p&gt;

&lt;p&gt;Processing the entire site at once did not work effectively, likely due to LLM processing constraints. Handling each page separately improved stability.&lt;/p&gt;
&lt;h3&gt;
  
  
  Prompt Example
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;site_structure_task&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Analyze the website starting from &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;. Identify and output:
1. All accessible pages and subpages within the domain (&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;), including dynamically loaded content.
2. Each page&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s purpose in concise terms.
3. Include:
   - Static links
   - JavaScript-driven links
   - Form submissions
   - API endpoints (if visible)
4. Group similar structured pages (e.g., query parameters like ?id=).

## Output JSON Format:
[
  &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;path&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;path or URL&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;purpose&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;&amp;lt;brief description&amp;gt;&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;,
&lt;/span&gt;&lt;span class="gp"&gt;  ...&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="s"&gt;## Login Information
- id: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
- password: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Step 2: Generating Test Scenarios
&lt;/h2&gt;

&lt;p&gt;Once the site structure was extracted, test scenarios were generated for each page. By generating scenarios in natural language first, I achieved:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Better manual review&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;More stable test code generation&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Prompt Example
&lt;/h3&gt;

&lt;p&gt;I can read Japanese more accurately, so I set it to Japanese as the scenario_language.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;scenario_task&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Generate exhaustive test scenarios for the following page:
- Page: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;page_path&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
  Purpose: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;page_purpose&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

For this page, include all possible user actions, such as:
  - Form submissions
  - Button clicks
  - Dropdown selections
  - Interactions with modals or dynamic elements

Test both expected behaviors and edge cases for each action.
Output format:
path: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;page_path&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;,
actions:
  - test: &amp;lt;description of action&amp;gt;,
    expect: &amp;lt;expected result&amp;gt;,
  - test: &amp;lt;description of action&amp;gt;,
    expect: &amp;lt;expected result&amp;gt;,

The output must be written in &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;scenario_language&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;.

## Root URL
&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

## Login Information
- id: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
- password: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Sample Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;path: /,
actions:
&lt;span class="p"&gt;  -&lt;/span&gt; test: Enter correct username and password, then click login,
    expect: Redirect to user dashboard,
&lt;span class="p"&gt;  -&lt;/span&gt; test: Leave username blank and attempt login,
    expect: Show error message,
&lt;span class="p"&gt;  -&lt;/span&gt; test: Enter invalid username and attempt login,
    expect: Show error message,
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3: Generating Test Code
&lt;/h2&gt;

&lt;p&gt;Using the reviewed scenarios, Jest and Playwright-based test code was generated. Although running tests directly via LLM is possible, generating structured test code is more reliable and cost-effective.&lt;/p&gt;

&lt;h3&gt;
  
  
  Prompt Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;task&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Generate Jest + Playwright test code for:
- URL: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
- Scenario: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;scenario&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

Ensure the output is fully executable without modification.
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Generated Test Code Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@playwright/test&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Login Tests&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Valid login&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.saucedemo.com/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;input[name="user-name"]&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;standard_user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;input[name="password"]&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;secret_sauce&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;input[name="login-button"]&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toHaveURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.saucedemo.com/inventory.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this file, beforeEach is also created correctly&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@playwright/test&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Checkout Step One Tests&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;beforeEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.saucedemo.com/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#user-name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;standard_user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#password&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;secret_sauce&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#login-button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.saucedemo.com/checkout-step-one.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;User fills in all fields correctly and clicks the Continue button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#first-name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#last-name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Doe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#postal-code&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;12345&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#continue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toHaveURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://www.saucedemo.com/checkout-step-two.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Test Execution &amp;amp; Results
&lt;/h2&gt;

&lt;p&gt;The generated tests were executed, and &lt;strong&gt;44 tests ran, with 18 failures&lt;/strong&gt;. However, many failures were reasonable:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Incorrect Expectations (5 tests)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Example: Expected an error when entering numbers in the name field, but the site allowed it.&lt;/li&gt;
&lt;li&gt;The test scenarios were generated based on ideal behavior, but the actual behavior of the test site differed.&lt;/li&gt;
&lt;li&gt;This is not an issue with the test code itself but rather a mismatch between the expected functionality and the actual implementation of the site.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Test Runner Mismatch (12 tests)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The tests assumed Playwright’s runner, but Jest Circus was used, causing failures. This can be fixed by specifying the correct runner in the prompt.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Cost Analysis
&lt;/h2&gt;

&lt;p&gt;Using OpenAI’s GPT-4o API, I ran multiple tests, totaling &lt;strong&gt;$7&lt;/strong&gt;. However, with optimized prompts, the entire pipeline (site structure analysis → scenario generation → test code generation) costs &lt;strong&gt;under $1&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Manual E2E test writing is becoming obsolete. However, programming languages remain the best way to provide precise AI instructions—for now.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>playwright</category>
      <category>testing</category>
    </item>
    <item>
      <title>From Open Source to Open Roles: AI-Powered Recruitment Agent</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Wed, 22 Jan 2025 14:26:00 +0000</pubDate>
      <link>https://forem.com/pppp606/from-open-source-to-open-roles-ai-powered-recruitment-agent-141o</link>
      <guid>https://forem.com/pppp606/from-open-source-to-open-roles-ai-powered-recruitment-agent-141o</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://srv.buysellads.com/ads/long/x/T6EK3TDFTTTTTT6WWB6C5TTTTTTGBRAPKATTTTTTWTFVT7YTTTTTTKPPKJFH4LJNPYYNNSZL2QLCE2DPPQVCEI45GHBT" rel="noopener noreferrer"&gt;Agent.ai&lt;/a&gt; Challenge: Productivity-Pro Agent (&lt;a href="https://dev.to/challenges/agentai"&gt;See Details&lt;/a&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built GitHub Talent Matcher, an Agent designed to evaluate GitHub profiles and activity data. This Agent helps technical recruiters by analyzing a candidate's contributions, identifying key skills, estimating hiring costs, and suggesting suitable roles. The process is simple and intuitive, making it easy to gain valuable insights from GitHub data.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Input&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Criteria&lt;/strong&gt;: A free-text description of the ideal candidate, including desired skills, responsibilities, and preferences. For example:
&lt;em&gt;"Looking for a backend developer skilled in database optimization and problem-solving, who can contribute to scalable systems."&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub IDs&lt;/strong&gt;: A list of GitHub usernames (entered line by line) for evaluation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Output&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Key Skills&lt;/strong&gt;: A list of the candidate's top 3 technical abilities identified from their GitHub activity.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Suggested Position&lt;/strong&gt;: A role recommendation based on the candidate's strengths.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hiring Cost&lt;/strong&gt;: An estimated monthly hiring cost in USD based on the candidate’s experience and contributions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Alignment Score&lt;/strong&gt;: A percentage indicating how closely the candidate matches the input criteria.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Candidate Overview&lt;/strong&gt;: A brief but detailed description of the candidate’s GitHub contributions and technical highlights.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;If you're not a recruiter, don’t worry—this Agent is still fun to try! If you’ve contributed to open-source projects, enter your own GitHub ID to see how it evaluates your activity. You might be surprised by the results!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://agent.ai/agent/gitHub-talent-matcher" rel="noopener noreferrer"&gt;https://agent.ai/agent/gitHub-talent-matcher&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Input Step
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1e36z00rhtoazxkwnsy3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1e36z00rhtoazxkwnsy3.png" alt="Image description" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Result
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0zo3oc9godc3x2c43wuz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0zo3oc9godc3x2c43wuz.png" alt="Image description" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here’s a demo using my own GitHub ID! If you’re curious, feel free to consider hiring me too—although I have to warn you, my English skills might not be up to par! 😉&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional Insights for Recruiters
&lt;/h3&gt;

&lt;p&gt;While this Agent focuses on analyzing individual GitHub profiles, another powerful strategy for recruiters is leveraging GitHub follower data. By identifying and listing the followers of users already within your organization, you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Discover potential candidates who are already connected to your network.&lt;/li&gt;
&lt;li&gt;Identify individuals who may share similar interests or technical skills with your team members.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Why This Feature Isn’t Included
&lt;/h4&gt;

&lt;p&gt;Due to GitHub API permissions, analyzing follower data requires a token with organization-level access. Using such tokens in Agent.ai raised security concerns, as receiving and handling sensitive tokens directly from users might not be ideal in this context.&lt;/p&gt;

&lt;p&gt;For recruiters interested in leveraging this strategy, we recommend creating a script with the help of your engineering team or writing one yourself to generate a list of followers from your organization's GitHub users. This can be a highly effective way to discover candidates already connected to your team and expand your recruitment reach.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agent.ai Experience
&lt;/h2&gt;

&lt;p&gt;Building this Agent with Agent.ai Builder was a fun and smooth experience! The platform offers so many great features, and I was impressed by how easy it was to get started.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Key Takeaways&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  GitHub Data Retrieval:
&lt;/h4&gt;

&lt;p&gt;I decided to set up my own external API for fetching GitHub data. While the platform allows you to run scripts on AWS Lambda, I hesitated to include sensitive information like API tokens directly in the script. If Agent.ai adds a feature to securely store secrets in the future, it would make this process even more convenient!&lt;/p&gt;

&lt;h4&gt;
  
  
  Free Access to Major LLM APIs
&lt;/h4&gt;

&lt;p&gt;Being able to integrate OpenAI and other major LLMs (for free!) was such a great surprise. It made experimenting with and refining the Agent’s functionality a breeze.&lt;/p&gt;

&lt;h4&gt;
  
  
  Dynamic Referencing with Jinja
&lt;/h4&gt;

&lt;p&gt;I discovered that templates support references like &lt;code&gt;{{user.name}}&lt;/code&gt; for dynamic data manipulation. Out of curiosity, I tried &lt;code&gt;{{user.skills[1]}}&lt;/code&gt; and found that deeper indexing works as well!&lt;br&gt;&lt;br&gt;
  Additionally, I noticed an example in the if-block explanation that mentioned &lt;code&gt;Jinja Template for i.e. user_age &amp;gt; 18&lt;/code&gt;. It seems like Jinja syntax is supported, but more detailed documentation on this would be really helpful for exploring its full potential.🙌&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Wishlist for the Future&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A built-in feature for securely storing API keys or secrets would be super helpful.
&lt;/li&gt;
&lt;li&gt;Clearer documentation on advanced features like Jinja templates would make it even easier to take full advantage of the platform.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, I had a fantastic time building this Agent and exploring the platform. I’m excited to see what new features might be added in the future!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>agentaichallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>Finding the Perfect Destination in 24 Hours: My GitHub Copilot 1-Day Build Challenge Experience</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Wed, 15 Jan 2025 04:58:08 +0000</pubDate>
      <link>https://forem.com/pppp606/finding-the-perfect-destination-in-24-hours-my-github-copilot-1-day-build-challenge-experience-332i</link>
      <guid>https://forem.com/pppp606/finding-the-perfect-destination-in-24-hours-my-github-copilot-1-day-build-challenge-experience-332i</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge&lt;/a&gt;: Transitions and Transformations&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;NextCompass&lt;/strong&gt; is a web application designed to help users find their ideal relocation destination by answering a series of simple questions. Users can explore relocation options based on their preferences and even access real-time weather data and Google search suggestions for their chosen destination. This project showcases smooth transitions and dynamic user interactions, aligning perfectly with the theme of "Transitions and Transformations."&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;The app is live and fully functional! Check it out here:&lt;br&gt;&lt;br&gt;
&lt;a href="https://next-compass.vercel.app/" rel="noopener noreferrer"&gt;https://next-compass.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Top Screen&lt;/strong&gt;
The starting page of NextCompass. Users are invited to answer a series of questions to find their ideal relocation destination.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F674klmriidg9n7jblfzy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F674klmriidg9n7jblfzy.png" alt="Image description" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Questionnaire Screen&lt;/strong&gt;
A simple and intuitive interface where users can answer questions about their preferences and lifestyle.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqqckgmsm4q04s6iejctf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqqckgmsm4q04s6iejctf.png" alt="Image description" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Results Screen (City List)&lt;/strong&gt;
Based on the user's answers, a list of suggested relocation destinations is displayed. Users can click on any city to view more details.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm00rddvx4ytfehkjru0c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm00rddvx4ytfehkjru0c.png" alt="Image description" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Detail Screen (City Information)&lt;/strong&gt;
Detailed information about a selected city, including current weather conditions and related data, is displayed to help users evaluate their options.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5xbe9f8wi69bx03rr5j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff5xbe9f8wi69bx03rr5j.png" alt="Image description" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;

&lt;p&gt;Explore the source code here:&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/pppp606/next-compass" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;GitHub Copilot significantly accelerated the development process by automating a substantial portion of the code generation, especially for API integrations.&lt;/p&gt;

&lt;h3&gt;
  
  
  Highlights of Copilot Usage:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Efficient API Integration with Comments:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
I used comments to specify the API endpoints, and Copilot generated most of the required code for me. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I wrote a comment like &lt;code&gt;// https://api.unsplash.com/search/photos&lt;/code&gt; and Copilot generated the request logic, including parameter handling and response parsing.&lt;/li&gt;
&lt;li&gt;Similarly, specifying endpoints for weather data and Google search queries led to Copilot producing nearly complete implementation.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Backend Development Automation:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
For controllers and services, the initial implementation was largely auto-generated by Copilot based on endpoint comments. This allowed me to focus on testing and minor adjustments rather than writing boilerplate code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Streamlined Front-End and Back-End Workflow:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Copilot inferred the structure of APIs from comments and type definitions, enabling seamless alignment between front-end components and backend logic.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By combining my detailed project guide (&lt;a href="https://github.com/pppp606/next-compass/blob/main/ai-docs/project-guide.md" rel="noopener noreferrer"&gt;project-guide.md&lt;/a&gt;) with Copilot's powerful code generation capabilities, I was able to focus more on improving the app's user experience and functionality.&lt;/p&gt;

&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;I did not use GitHub Models for this project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This project was completed comfortably within 24 hours. I started by creating a detailed guide for AI, which proved to be extremely helpful in keeping the AI-driven development process smooth and efficient.&lt;/p&gt;

&lt;p&gt;And of course, it’s also incredibly useful for humans!&lt;/p&gt;

&lt;p&gt;What I found particularly satisfying during this project is how well AI and I complemented each other. Personally, I enjoy tasks like fine-tuning animation effects, and it worked out perfectly because Copilot doesn’t excel in those areas. It created a balance where I could focus on the parts I love most, while AI took care of the repetitive or tedious tasks.&lt;/p&gt;

&lt;p&gt;Though, let’s be honest—AI will probably surpass me in those areas soon enough. But until then, I’m enjoying this collaboration!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Pick Files from a List for Git Add and Stash Directly in Your Terminal</title>
      <dc:creator>Takuto Yuki</dc:creator>
      <pubDate>Sat, 11 Jan 2025 12:25:13 +0000</pubDate>
      <link>https://forem.com/pppp606/pick-files-from-a-list-for-git-add-and-stash-directly-in-your-terminal-3j42</link>
      <guid>https://forem.com/pppp606/pick-files-from-a-list-for-git-add-and-stash-directly-in-your-terminal-3j42</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;As developers, we often find ourselves working with Git in the terminal. While tools like VSCode or GUI-based Git clients offer file selection features, many developers prefer the simplicity and speed of the terminal.&lt;/p&gt;

&lt;p&gt;Git also provides a built-in interactive mode with &lt;code&gt;git add -i&lt;/code&gt;. Have you ever tried using it? Personally, I didn’t find it particularly user-friendly.&lt;/p&gt;

&lt;p&gt;There are powerful tools like &lt;code&gt;fzf&lt;/code&gt; or &lt;code&gt;tig&lt;/code&gt; that enhance terminal interactivity, but sometimes you just don't need all those advanced features. For me, having a lightweight tool to interactively select files for &lt;code&gt;git add&lt;/code&gt; and &lt;code&gt;git stash&lt;/code&gt; felt like the perfect solution.&lt;/p&gt;

&lt;p&gt;When selection isn't possible, the typical workflow often involves running &lt;code&gt;git status&lt;/code&gt;, copying file names, and pasting them repeatedly for &lt;code&gt;git add&lt;/code&gt; or &lt;code&gt;git stash&lt;/code&gt;. This copy-paste process can be tedious and error-prone, especially in larger repositories. &lt;/p&gt;

&lt;p&gt;To address this need, I wrote approximately 150 lines of code to create &lt;code&gt;git-select-list&lt;/code&gt;, a simple yet effective tool for developers seeking interactivity without complexity. You can find the repository here: &lt;a href="https://github.com/pppp606/git-select-list" rel="noopener noreferrer"&gt;git-select-list&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvz9smqiu7y059ktccp3f.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvz9smqiu7y059ktccp3f.gif" alt="Image git-select-list" width="1280" height="580"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Interactive UI&lt;/strong&gt;: Navigate with arrow keys, select with &lt;code&gt;a&lt;/code&gt; or &lt;code&gt;s&lt;/code&gt;, and toggle all with &lt;code&gt;u&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multiple Actions&lt;/strong&gt;: Supports &lt;code&gt;git add&lt;/code&gt;, &lt;code&gt;git stash&lt;/code&gt;, &lt;code&gt;git stash apply&lt;/code&gt;, and &lt;code&gt;git stash drop&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lightweight Setup&lt;/strong&gt;: No external dependencies, with an included setup script.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Clone the repository
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   git clone https://github.com/pppp606/git-select-list.git
   &lt;span class="nb"&gt;cd &lt;/span&gt;git-select-list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  2. Run the setup script
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   bash setup.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  3. After setup, you can use the &lt;code&gt;git ls&lt;/code&gt; command.
&lt;/h3&gt;

&lt;p&gt;The setup script configures a convenient alias using Git's built-in &lt;code&gt;alias&lt;/code&gt; feature:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   git config &lt;span class="nt"&gt;--global&lt;/span&gt; alias.ls &lt;span class="s1"&gt;'!sh $(pwd)/scripts/git-select-list.sh'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This alias allows you to execute the tool directly as &lt;code&gt;git ls&lt;/code&gt;, making it feel like a native Git command. If you haven’t explored Git’s alias functionality before, it’s a simple and powerful way to extend Git’s behavior without modifying your workflow.&lt;/p&gt;


&lt;h2&gt;
  
  
  Usage
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Command Format
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git &lt;span class="nb"&gt;ls&lt;/span&gt; &amp;lt;action&amp;gt; &lt;span class="o"&gt;[&lt;/span&gt;subaction]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  Supported Actions and Subactions
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Command&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;git ls add&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Interactively select modified files to stage.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;git ls stash&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Interactively select modified files to stash.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;git ls stash apply&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Interactively select stashes to apply.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;git ls stash drop&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Interactively select stashes to drop.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;


&lt;h3&gt;
  
  
  Key Bindings
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Arrow Keys&lt;/strong&gt;: Navigate between items.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;a&lt;/code&gt; or &lt;code&gt;s&lt;/code&gt;&lt;/strong&gt; Key: Select or deselect the current item.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;u&lt;/code&gt;&lt;/strong&gt; Key: Select or deselect all items.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;Enter&lt;/code&gt;&lt;/strong&gt; Key: Confirm the selection.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;ESC&lt;/code&gt;&lt;/strong&gt; Key: Exit without making any changes.&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Thanks for Checking It Out!
&lt;/h2&gt;

&lt;p&gt;If you find &lt;code&gt;git-select-list&lt;/code&gt; useful, feel free to use it in your projects. And if you like it, consider starring the repository on GitHub—it would make my day!&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/pppp606" rel="noopener noreferrer"&gt;
        pppp606
      &lt;/a&gt; / &lt;a href="https://github.com/pppp606/git-select-list" rel="noopener noreferrer"&gt;
        git-select-list
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;📋 Git Select List&lt;/h1&gt;
&lt;/div&gt;

&lt;p&gt;&lt;code&gt;git-select-list&lt;/code&gt; is a tool to interactively perform Git operations. It allows you to select files or stashes from a list for actions like &lt;code&gt;git add&lt;/code&gt;, &lt;code&gt;git stash&lt;/code&gt;, &lt;code&gt;git stash apply&lt;/code&gt;, and &lt;code&gt;git stash drop&lt;/code&gt;.&lt;/p&gt;


  
    

    &lt;span class="m-1"&gt;2025-01-11_20.29.54.mov&lt;/span&gt;
  

  

  


&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;✨ Features&lt;/h2&gt;

&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Interactive UI&lt;/strong&gt;: Navigate with arrow keys, select with &lt;code&gt;a&lt;/code&gt; or &lt;code&gt;s&lt;/code&gt;, and toggle all with &lt;code&gt;u&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multiple Actions&lt;/strong&gt;: Supports &lt;code&gt;git add&lt;/code&gt;, &lt;code&gt;git stash&lt;/code&gt;, &lt;code&gt;git stash apply&lt;/code&gt;, and &lt;code&gt;git stash drop&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lightweight Setup&lt;/strong&gt;: No external dependencies, with an included setup script.&lt;/li&gt;
&lt;/ul&gt;




&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;🔨 Setup&lt;/h2&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Clone this repository:&lt;/p&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;git clone https://github.com/pppp606/git-select-list.git
&lt;span class="pl-c1"&gt;cd&lt;/span&gt; git-select-list&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Run the setup script:&lt;/p&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;bash setup.sh&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;After setup, you can use the &lt;code&gt;git ls&lt;/code&gt; command.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;💻 Usage&lt;/h2&gt;

&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Command Format&lt;/h3&gt;

&lt;/div&gt;

&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;git ls &lt;span class="pl-k"&gt;&amp;lt;&lt;/span&gt;action&lt;span class="pl-k"&gt;&amp;gt;&lt;/span&gt; [subaction]&lt;/pre&gt;

&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Examples&lt;/h3&gt;

&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;Stage Files&lt;/h4&gt;

&lt;/div&gt;


&lt;ol&gt;

&lt;li&gt;Run the following command

&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;git ls add&lt;/pre&gt;

&lt;/div&gt;


&lt;/li&gt;

&lt;li&gt;Select files from the displayed list using &lt;code&gt;a&lt;/code&gt; or &lt;code&gt;u&lt;/code&gt;…&lt;/li&gt;

&lt;/ol&gt;
&lt;/div&gt;
&lt;br&gt;
  &lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/pppp606/git-select-list" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h2&gt;
  
  
  Update (2025/01/18)
&lt;/h2&gt;

&lt;p&gt;After some reflection, I decided that the original git sl alias felt slightly unnatural. To make the command more intuitive, I’ve changed the default alias from git sl to git ls. All instances of sl in this article have been updated to ls.&lt;/p&gt;

&lt;p&gt;If you’re already using the tool, feel free to set your own alias that works best for you!&lt;/p&gt;

</description>
      <category>git</category>
      <category>shell</category>
      <category>tooling</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
