Build and enhance Next.js chat applications using OpenAI's Responses API with streaming, tool calling, and MCP connectors
A skill for working with Next.js 15 applications that integrate OpenAI's Responses API with streaming, multi-turn conversations, tool calling, and Model Context Protocol (MCP) connectors.
This skill guides you through developing, debugging, and extending a Next.js TypeScript chat application that demonstrates:
1. UI builds tool list from user toggles in `useToolsStore`
2. Chat submission triggers `processMessages` in `lib/assistant.ts`, calling `/api/turn_response`
3. API route assembles OpenAI request, conditionally injects Google MCP connectors, streams SSE events
4. Client `handleTurn` parses SSE events, updates chat state, triggers local function execution
5. Tool outputs are appended and may trigger follow-up turns via recursive `processMessages()` calls
When working with this codebase, use these commands:
```bash
npm install # Install dependencies
npm run dev # Start dev server (http://localhost:3000)
npm run build # Build for production
npm start # Start production server
npm run lint # Lint code
```
**Configuration**
**Core Logic**
**State Management**
**API Routes**
**UI Components**
Follow this pattern to add custom function tools:
1. **Define schema** in `config/tools-list.ts`:
```typescript
{
type: "function" as const,
function: {
name: "my_function",
description: "What it does",
parameters: {
type: "object",
properties: {
param1: { type: "string", description: "..." }
},
required: ["param1"]
}
}
}
```
2. **Create API route** at `app/api/functions/my_function/route.ts`:
```typescript
export async function POST(request: Request) {
const { param1 } = await request.json();
// Implementation
return Response.json({ result: "..." });
}
```
3. **Add client wrapper** in `config/functions.ts`:
```typescript
async my_function(args: { param1: string }) {
const response = await fetch('/api/functions/my_function', {
method: 'POST',
body: JSON.stringify(args)
});
return response.json();
}
```
4. **Export in functionsMap** so the assistant can discover it
**CRITICAL**: Parameter names must match exactly between schema and function implementation.
To enable Google Calendar/Gmail connectors:
1. **Google Cloud Console**:
- Create OAuth 2.0 client
- Enable Google Calendar API and Gmail API
- Add redirect URI: `http://localhost:3000/api/google/callback`
2. **Environment Variables**:
```bash
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URI=http://localhost:3000/api/google/callback
```
3. **OAuth Flow**:
- User clicks "Connect Google" in tools panel
- App redirects to Google consent screen
- Callback exchanges code for tokens
- Tokens stored in `useToolsStore` for MCP connector injection
**Required**:
```bash
OPENAI_API_KEY=sk-...
```
**Optional** (for Google features):
```bash
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
GOOGLE_REDIRECT_URI=http://localhost:3000/api/google/callback
```
1. Check SSE event formatting in `app/api/turn_response/route.ts`
2. Verify `handleTurn` state machine in `lib/assistant.ts`
3. Inspect browser DevTools Network tab for SSE events
1. Use API routes in `app/api/vector_stores/*` for CRUD operations
2. Toggle file search in tools panel
3. Upload files via vector store UI
1. **Always read files before modifying** - Understand existing patterns first
2. **Test tool additions end-to-end** - Verify schema, API route, and client wrapper
3. **Handle streaming errors gracefully** - Partial JSON and connection drops are normal
4. **Keep tool descriptions clear** - OpenAI uses them to decide when to call
5. **Use TypeScript strictly** - Leverage type safety for tool arguments
6. **Follow Next.js 15 conventions** - Use App Router patterns consistently
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-openai-chat-assistant/raw