Architecture Question: Best pattern for ADK Agents to dynamically create reusable Playwright components via MCP?

[Dronanaik]

Hi Everyone,

I am building an automation workflow using Google ADK and MCP. My goal is to have an Agent that takes a Manual Test Case and generates Playwright (TypeScript) scripts.

However, I want to go beyond simple script generation. I want the Agent to act like a Senior Automation Engineer who maintains the framework health.

The Requirement

• Context Awareness: The Agent must check if a reusable component (e.g., LoginPage.ts, Datepicker.ts) already exists in the framework.

• Utilization: If it exists, the Agent must import and use it.

• Creation (The Challenge): If the component does not exist, but the Agent identifies that the UI pattern is generic enough to be reusable, it should create the new component file first, and then use it in the test script.

The Proposed Workflow I am visualizing the logic flow like this. I would love feedback on whether this "Read-Decide-Write" loop is feasible within a standard MCP execution context.

Code snippet

graph TD
    A[Manual Test Step] --> B(Agent Analyzes Step)
    B --> C{Search MCP Context}
    C -- Found Component --> D[Generate Script using Component]
    C -- Not Found --> E{Is logic reusable?}
    E -- No (One-off) --> F[Generate Raw Playwright Code]
    E -- Yes --> G[**Action: Create New Component**]
    G --> H[MCP Writes new .ts file]
    H --> I[Update Context]
    I --> D

Loading

Example Scenario

Input: "User selects a date from the flight calendar."

Agent Logic:

Agent asks MCP: Do we have a CalendarWidget or DatePicker class?

MCP Response: No.

Agent Decision: Date picking is a reusable action. I should create a component.

Action: Agent calls create_component tool.

Outcome (File System Changes):

Created: src/components/CalendarWidget.ts

export class CalendarWidget {
  constructor(private page: Page) {}
  async selectDate(date: string) { ... }
}

Generated: tests/flight_booking.spec.ts

import { CalendarWidget } from '../components/CalendarWidget';
// ...
const calendar = new CalendarWidget(page);
await calendar.selectDate('2025-12-01');

Questions for the Community

• The Feedback Loop: If the Agent creates a new file (CalendarWidget.ts), how do I instantly make the MCP "aware" of this new file so it can be imported in the very next step? Does the MCP need a file-watcher or a manual "refresh context" trigger?

• Duplication Prevention: How do you prevent the Agent from creating CalendarWidget.ts in one run and DatePickerComponent.ts in another run (different names, same logic)? Is semantic search (Vector DB) on the existing codebase necessary here?

• Tool Granularity: Should create_component be a monolithic tool (Agent provides full file content) or granular (Agent defines methods and properties)?

Any insights on managing this dynamic "Read/Write" context state would be helpful!