Building with AI APIs

export default async function handler(req, res) {
  const { userMessage } = req.body;

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.ANTHROPIC_API_KEY,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-opus-4-6',          // the model to use
      max_tokens: 1024,                   // max response length
      system: 'You are a helpful product design assistant. Be concise.',
      messages: [
        { role: 'user', content: userMessage }
      ]
    })
  });

  const data = await response.json();
  const reply = data.content[0].text;
  res.json({ reply });
}

// In your React component or vanilla JS
async function askClaude(question) {
  const response = await fetch('/api/ask', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ userMessage: question })
  });
  const data = await response.json();
  return data.reply;
}

// For a writing feedback tool
system: `You are a UX writing expert. Review the user-submitted copy and give
concise feedback on: clarity, action orientation, tone, and length.
Format your response as 3-5 bullet points. Be direct, not fluffy.`

// For an onboarding assistant
system: `You are an onboarding guide for a project management tool.
Help new users understand features. Keep responses under 100 words.
If asked about something unrelated to project management, politely redirect.`

// For an ideas board
system: `You are a product thinking partner. The user will share a product idea.
Respond with: one strength, one potential user problem, and one next step to validate.
Keep the whole response under 80 words.`