AI-Powered Code Generation with Claude and ChatGPT

import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

async function generateCode(prompt: string) {
  const message = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 4096,
    messages: [
      {
        role: 'user',
        content: prompt,
      },
    ],
  });

  return message.content[0].text;
}

// Usage
const code = await generateCode(`
  Create a React component that displays a user profile card with:
  - Avatar image
  - Name and email
  - Bio text
  - Follow button
  Use TypeScript and Tailwind CSS
`);

const response = await anthropic.messages.create({
  model: 'claude-3-5-sonnet-20241022',
  max_tokens: 1024,
  messages: [
    {
      role: 'user',
      content: 'Extract user info from: John Doe, john@example.com, age 30',
    },
  ],
  tools: [
    {
      name: 'extract_user_info',
      description: 'Extract structured user information',
      input_schema: {
        type: 'object',
        properties: {
          name: { type: 'string' },
          email: { type: 'string' },
          age: { type: 'number' },
        },
        required: ['name', 'email'],
      },
    },
  ],
});

async function reviewCode(code: string) {
  const prompt = `
    Review this code for:
    1. Security vulnerabilities
    2. Performance issues
    3. Best practices
    4. Potential bugs
    
    Code:
    \`\`\`typescript
    ${code}
    \`\`\`
    
    Provide specific, actionable feedback.
  `;

  const review = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 2048,
    messages: [{ role: 'user', content: prompt }],
  });

  return review.content[0].text;
}

async function generateTests(componentCode: string) {
  const prompt = `
    Generate comprehensive unit tests for this React component using Vitest and Testing Library:
    
    \`\`\`typescript
    ${componentCode}
    \`\`\`
    
    Include tests for:
    - Rendering
    - User interactions
    - Edge cases
    - Async behavior
  `;

  return await generateCode(prompt);
}

async function refactorCode(code: string, goal: string) {
  const prompt = `
    Refactor this code to ${goal}:
    
    \`\`\`typescript
    ${code}
    \`\`\`
    
    Maintain the same functionality but improve:
    - Code organization
    - Type safety
    - Performance
    - Readability
  `;

  return await generateCode(prompt);
}

const effectivePrompt = `
  Context: Building a Next.js 15 e-commerce app
  
  Task: Create a product search component
  
  Requirements:
  - TypeScript with strict mode
  - Tailwind CSS for styling
  - Debounced search input
  - Loading states
  - Error handling
  - Accessibility (ARIA labels)
  
  Technical constraints:
  - Use Server Actions for search
  - Implement with Suspense
  - Mobile-first responsive design
  
  Please provide the complete component with comments.
`;