React Component Refactoring & Accessibility Agent

import Groq from 'groq-sdk';

const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });

async function runPrompt(variables: Record<string, string>) {
  let promptText = `Refactor the following React component for performance and accessibility.

Code Snippet:
{{code_snippet}}

Focus Areas:
- Eliminate unnecessary re-renders
- Improve clean hook usage (useState, useEffect, useMemo)
- Ensure ARIA roles and keyboard navigation (WCAG 2.1)`;
  Object.entries(variables).forEach(([key, val]) => {
    promptText = promptText.replace(new RegExp(`{{\\s*${key}\\s*}}`, 'g'), val);
  });

  const completion = await groq.chat.completions.create({
    messages: [
      { role: 'system', content: `You are a Principal Frontend Architect specializing in React performance and accessibility design systems.` },
      { role: 'user', content: promptText }
    ],
    model: 'llama-3.3-70b-versatile',
    temperature: 0.7,
  });

  return completion.choices[0]?.message?.content;
}