feat: add Vercel AI SDK chat integration

[kinwo]

Implements issue #4

Changes

• Added Vercel AI SDK dependencies (ai, @ai-sdk/openai, zod)
• Created API route for chat with OpenAI streaming at /api/chat
• Created chat page UI at /chat with real-time messaging
• Implemented chat interface with SecondOrder branding
• Added system prompt with SecondOrder context

Setup Required

Add OPENAI_API_KEY to your environment variables to enable the chat functionality.

Testing

1. Add OpenAI API key to .env.local
2. Run npm run dev
3. Navigate to /chat
4. Test the chat interface

Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
secondorder-web	Error		Jan 2, 2026 5:59am

[claude]

PR Review: Vercel AI SDK Chat Integration

Thank you for implementing the chat feature! I've reviewed the code and have the following feedback:

✅ Strengths

1. Clean Implementation: The code follows Next.js App Router conventions correctly with proper client/server separation
2. Design Consistency: UI matches the SecondOrder design system (bone, ink, fog colors, Playfair font)
3. Good UX: Loading states, empty states, and disabled states are all handled properly
4. Dependencies: Appropriate use of Vercel AI SDK v6 with OpenAI integration

🔒 Security Concerns

CRITICAL - API Key Exposure:

// app/api/chat/route.ts:6
const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

Issue: Using an empty string fallback (|| '') masks missing API keys and could cause runtime errors.

Recommendation: Add explicit validation:

const apiKey = process.env.OPENAI_API_KEY;
if (\!apiKey) {
  throw new Error('OPENAI_API_KEY is not configured');
}
const openai = createOpenAI({ apiKey });

Or return a proper error response:

export async function POST(req: Request) {
  if (\!process.env.OPENAI_API_KEY) {
    return new Response('API key not configured', { status: 500 });
  }
  // ... rest of code
}

🐛 Potential Issues

1. No Input Validation (app/api/chat/route.ts:10)

   • The messages array from req.json() is not validated
   • Could cause runtime errors if malformed data is sent
   • Recommendation: Add Zod validation since it's already a dependency:

   import { z } from 'zod';
   
   const messageSchema = z.object({
     messages: z.array(z.object({
       role: z.enum(['user', 'assistant', 'system']),
       content: z.string(),
     })),
   });
   
   const { messages } = messageSchema.parse(await req.json());

2. No Error Handling (app/api/chat/route.ts:9-29)

   • API route has no try/catch for network errors or API failures
   • Recommendation: Wrap in try/catch and return proper error responses

3. No Rate Limiting

   • Direct OpenAI API calls without rate limiting could lead to cost issues
   • Recommendation: Consider adding rate limiting middleware or use Vercel's built-in protection

⚡ Performance Considerations

1. Client Bundle Size

   • The chat page uses 'use client' which includes the AI SDK in the client bundle
   • This is expected for useChat hook, but ensure it's necessary
   • ✅ Current usage is appropriate

2. Message History

   • All messages are sent on every request (standard for AI SDK)
   • For very long conversations, consider implementing message truncation or summarization
   • Not urgent for MVP

📝 Code Quality

1. TypeScript Strictness (app/chat/page.tsx:82-88)

   • Inline styles with animationDelay bypass TypeScript checking
   • Minor: Consider using Tailwind's animation utilities or CSS classes

2. Accessibility

   • ✅ Good: Proper semantic HTML, alt text on images
   • ⚠️ Missing: No ARIA labels on the input for screen readers
   • Recommendation: Add aria-label to the input field

3. Missing Tests

   • No tests added for the new functionality
   • Recommendation: Add basic E2E tests for the chat flow (Playwright is already configured)

🔍 Missing Considerations

1. Environment Variables Documentation

   • .env.example file should be added/updated with OPENAI_API_KEY
   • Helps with deployment and local development setup

2. Error Messages to User

   • If API key is missing or API fails, user gets no feedback
   • Recommendation: Add error state handling in the UI

3. CORS/Security Headers

   • API route doesn't set security headers
   • Not critical if staying on same domain, but good practice

📚 Documentation

• ✅ PR description is clear with setup instructions
• Consider adding a note about cost implications of OpenAI API usage
• Consider documenting the system prompt design choices

Summary

This is a solid MVP implementation! The main concerns are:

1. CRITICAL: Fix API key validation (security)
2. HIGH: Add input validation with Zod (reliability)
3. MEDIUM: Add error handling and user feedback (UX)
4. LOW: Add .env.example and tests

The code quality is good and follows the project's conventions. With the security and validation fixes, this would be ready to merge.

---

Review generated by Claude Code