Rubber Duck Thursday - let's hack

Key Concepts

• Advocate Hub: An application to help developer advocates track their content.
• CORS Error: A browser security feature that blocks web pages from making requests to a different domain than the one that served the web page.
• Playwright MCP Server: A Model Context Protocol server that allows LLMs to interact with the Playwright testing framework for visual testing and UI updates.
• Model Context Protocol (MCP): A protocol that enables LLMs to connect to external services and tools.
• GitHub Copilot: An AI pair programmer that provides code suggestions and assists with development tasks.
• UI/UX Design: The process of creating user interfaces and user experiences that are both functional and aesthetically pleasing.
• Visual Testing: A type of software testing that verifies the visual appearance of an application's UI.
• LLMs (Large Language Models): AI models trained on vast amounts of text data, capable of generating human-like text and code.
• Astro: A web framework for building fast, content-focused websites.
• React: A JavaScript library for building user interfaces.
• TypeScript: A superset of JavaScript that adds static typing.
• Tailwind CSS: A utility-first CSS framework.

Advocate Hub Project

Project Overview

The Advocate Hub project aims to create a centralized application for developer advocates to track their content, including blog posts, videos, webinars, and live streams. The core functionality involves pasting a URL, which is then automatically categorized and organized.

Tech Stack

The project utilizes the following technologies:

• Astro
• React
• TypeScript
• Tailwind CSS

Core Features

The application's core features include:

• URL pasting
• Automatic content categorization
• Content organization

Current UI State

The current UI is described as basic but functional, serving as an MVP (Minimum Viable Product).

Addressing the CORS Issue

Problem

Last week's stream ended with a CORS (Cross-Origin Resource Sharing) error when attempting to unfurl URLs.

Solution

GitHub Copilot was used to address the CORS issue. It identified that the client-side URL unfurling was causing the error and proposed a server-side solution using an Astro API endpoint. The unfurl.ts API endpoint was implemented to handle URL unfurling on the server side, resolving the CORS error.

UI Design Updates with Playwright MCP Server

Initial Design Concerns

The initial UI design was considered visually unappealing. The presenter wanted to update the UI to a new design featuring cards instead of the existing stacking structure.

Using Playwright MCP Server

The Playwright MCP server was used to facilitate UI updates. The presenter aimed to use the server to check the output of Copilot's changes in real-time, ensuring pixel-perfect accuracy.

Step-by-Step Process

1. Design Mockup: A new UI design was created, featuring cards for content display.
2. Playwright MCP Server Installation: The Playwright MCP server extension was installed in VS Code.
3. Copilot Integration: Copilot was instructed to update the UI based on the new design, utilizing the Playwright MCP server to verify the changes.
4. Real-time Verification: Copilot used the Playwright MCP server to open a browser, navigate to the application, and take screenshots to compare the current UI with the design mockup.
5. Iterative Updates: The UI was updated section by section, starting with the content collection section. Copilot implemented cards for content display and used the Playwright MCP server to verify the changes.
6. Testing and Refinement: The updated UI was tested with different content types, and the Playwright MCP server was used to capture screenshots and ensure visual consistency.

Benefits of Playwright MCP Server

• Real-time visual testing
• Pixel-perfect accuracy
• Automated UI verification

Copilot Instruction Generation

Generating Instructions

GitHub Copilot was used to generate an instruction file for the project. This file provides Copilot with essential context about the project, including its overview, architecture, libraries, and commands.

Importance of Instructions

Providing Copilot with detailed instructions helps it understand the project's context and make more informed decisions when generating code or suggesting changes.

Content of Instruction File

The generated instruction file includes the following sections:

• Project overview
• Architecture pattern
• Library base
• Organization commands
• Contents
• Feature and development API integration
• Styling system

Unfurling Issue Debugging

Problem

The URL unfurling functionality was not working correctly, resulting in an "unfurl failed" message.

Debugging Attempts

The presenter attempted to debug the issue using both Claude and GPT-5. GPT-5 was used to analyze the codebase and identify potential issues with the abort signal timeout usage.

Deferred Resolution

Due to time constraints and the complexity of the issue, the debugging process was deferred to offline analysis.

Key Arguments and Perspectives

AI's Role in Development

The presenter believes that AI will increasingly support programmers, making coding faster, smarter, and more creative. This is seen as the next phase of abstraction in software development.

Importance of Fundamentals

Despite the increasing capabilities of AI tools, the presenter emphasizes the importance of understanding the fundamentals of software development. Knowing the fundamentals is crucial for effectively using and troubleshooting AI-assisted code.

Iterative Development

The presenter found that breaking down the UI update task into smaller, iterative steps yielded better results than attempting a one-shot update. This approach allowed Copilot to focus on specific sections of the UI and produce more accurate and consistent changes.

Notable Quotes

• "MCP is essentially like a connector for LLMs to connect to the outside world."
• "Think about MCP as like you know so like when you think about large language models they're only as good as the context they have and then that they're only as good as what as as the context you give to them. So P servers with MCP servers you're able to give LLMs a lot more context into additional services."
• "I believe in the future AI will support programmers even more, making coding faster, smarter, and more creative."
• "With each level of abstraction this is this has always been the argument. And while it may be it may be true for some people, but some people may still double down and learn the fundamentals because knowing the fundamentals is imperative when using um coding assistants."
• "Seeing the seeing the Playright MCP server live, like that was my first time using it. Um, that is incredible. I I love that."
• "Going step by step or going like section by section, you'll get better results because you're not overwhelming the model with context."

Technical Terms and Concepts

• CORS (Cross-Origin Resource Sharing): A browser security mechanism that restricts web pages from making requests to a different domain than the one that served the web page.
• MCP (Model Context Protocol): A protocol that enables LLMs to connect to external services and tools.
• Playwright: A Node.js library for automating web browsers.
• LLM (Large Language Model): An AI model trained on vast amounts of text data, capable of generating human-like text and code.
• API (Application Programming Interface): A set of rules and specifications that software programs can follow to communicate with each other.
• MVP (Minimum Viable Product): A version of a product with just enough features to satisfy early customers and provide feedback for future product development.

Logical Connections

The stream follows a logical progression:

1. Introduction and Project Overview: The presenter introduces the Advocate Hub project and its goals.
2. CORS Issue Resolution: The presenter addresses the CORS error from the previous stream.
3. UI Design Updates: The presenter focuses on updating the UI using the Playwright MCP server.
4. Copilot Instruction Generation: The presenter generates an instruction file for Copilot to provide context about the project.
5. Unfurling Issue Debugging: The presenter attempts to debug the URL unfurling issue.
6. Conclusion and Takeaways: The presenter summarizes the key takeaways from the stream.

Synthesis/Conclusion

The stream demonstrates the use of GitHub Copilot and the Playwright MCP server to build and update a web application. The presenter successfully addressed a CORS error, updated the UI with a new design, and generated an instruction file for Copilot. The stream highlights the benefits of using AI tools to accelerate development and improve UI testing. It also emphasizes the importance of understanding the fundamentals of software development and adopting an iterative approach to complex tasks. The Playwright MCP server is shown to be a powerful tool for visual testing and ensuring UI consistency.