Project Setup Beginner

# Using Vite (recommended)
npm create vite@latest my-ai-react-app -- --template react-ts
cd my-ai-react-app
npm install

# AI SDK with React hooks
npm install ai @ai-sdk/react

# Markdown rendering for AI responses
npm install react-markdown remark-gfm

# Code syntax highlighting (optional)
npm install react-syntax-highlighter

import express from 'express';
import cors from 'cors';
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

const app = express();
app.use(cors());
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  const { messages } = req.body;

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
  });

  result.pipeDataStreamToResponse(res);
});

app.listen(3001, () => console.log('API running on port 3001'));

import { useChat } from '@ai-sdk/react';

function App() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: 'http://localhost:3001/api/chat',
  });

  return (
    <div>
      <h1>AI Chat</h1>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default App;