Non-streaming chat

Build reliable chat integrations with complete response patterns for batch processing and simple UIs

Overview

Build a chat integration that receives complete responses after processing, perfect for batch processing, simple UIs, or when you need the full response before proceeding. Ideal for integrations where real-time display isn’t essential.

What You’ll Build:

  • Simple request-response chat patterns with immediate complete responses
  • Session-based conversations that maintain context across multiple chats
  • Basic integration with predictable response timing

Prerequisites

  • Completed Chat quickstart tutorial
  • Understanding of basic HTTP requests and JSON handling
  • Familiarity with JavaScript/TypeScript promises or async/await

Scenario

We’ll build a help desk system for “TechFlow” that processes support messages through text chat and maintains conversation history using sessions.


1. Basic Non-Streaming Implementation

1

Create a simple chat function

Start with a basic non-streaming chat implementation:

Basic Non-Streaming Request
$curl -X POST https://api.vapi.ai/chat \
> -H "Authorization: Bearer YOUR_API_KEY" \
> -H "Content-Type: application/json" \
> -d '{
> "assistantId": "your-assistant-id",
> "input": "I need help resetting my password"
> }'
2

Understand the response structure

Non-streaming responses come back as complete JSON objects:

Complete Chat Response
1{
2 "id": "chat_123456",
3 "orgId": "org_789012",
4 "assistantId": "assistant_345678",
5 "name": "Password Reset Help",
6 "sessionId": "session_901234",
7 "messages": [
8 {
9 "role": "user",
10 "content": "I need help resetting my password"
11 }
12 ],
13 "output": [
14 {
15 "role": "assistant",
16 "content": "I can help you reset your password. First, let me verify your account information..."
17 }
18 ],
19 "createdAt": "2024-01-15T09:30:00Z",
20 "updatedAt": "2024-01-15T09:30:01Z"
21}
3

Implement in TypeScript

Create a reusable function for non-streaming chat:

non-streaming-chat.ts
1async function sendChatMessage(
2 message: string,
3 previousChatId?: string
4): Promise<{ chatId: string; response: string }> {
5 const response = await fetch('https://api.vapi.ai/chat', {
6 method: 'POST',
7 headers: {
8 'Authorization': 'Bearer YOUR_API_KEY',
9 'Content-Type': 'application/json'
10 },
11 body: JSON.stringify({
12 assistantId: 'your-assistant-id',
13 input: message,
14 ...(previousChatId && { previousChatId })
15 })
16 });
17
18 const chat = await response.json();
19 return {
20 chatId: chat.id,
21 response: chat.output[0].content
22 };
23}

2. Context Management with Sessions

1

Create a session for persistent context

Sessions allow multiple chats to share the same conversation context:

Create Session
$curl -X POST https://api.vapi.ai/session \
> -H "Authorization: Bearer YOUR_API_KEY" \
> -H "Content-Type: application/json" \
> -d '{
> "assistantId": "your-assistant-id"
> }'
2

Use the session across multiple chats

Once you have a session ID, use it for related conversations:

First Message with Session
$curl -X POST https://api.vapi.ai/chat \
> -H "Authorization: Bearer YOUR_API_KEY" \
> -H "Content-Type: application/json" \
> -d '{
> "sessionId": "session_abc123",
> "input": "My account is locked and I can't access the dashboard"
> }'
Follow-up in Same Session
$curl -X POST https://api.vapi.ai/chat \
> -H "Authorization: Bearer YOUR_API_KEY" \
> -H "Content-Type: application/json" \
> -d '{
> "sessionId": "session_abc123",
> "input": "I tried the suggestions but still can't get in"
> }'
3

Implement session management in TypeScript

Build a session-aware chat manager:

session-manager.ts
1async function createChatSession(assistantId: string): Promise<string> {
2 const response = await fetch('https://api.vapi.ai/session', {
3 method: 'POST',
4 headers: {
5 'Authorization': 'Bearer YOUR_API_KEY',
6 'Content-Type': 'application/json'
7 },
8 body: JSON.stringify({ assistantId })
9 });
10
11 const session = await response.json();
12 return session.id;
13}
14
15async function sendSessionMessage(
16 sessionId: string,
17 message: string
18): Promise<string> {
19 const response = await fetch('https://api.vapi.ai/chat', {
20 method: 'POST',
21 headers: {
22 'Authorization': 'Bearer YOUR_API_KEY',
23 'Content-Type': 'application/json'
24 },
25 body: JSON.stringify({
26 sessionId: sessionId,
27 input: message
28 })
29 });
30
31 const chat = await response.json();
32 return chat.output[0].content;
33}
34
35// Usage example
36const sessionId = await createChatSession('your-assistant-id');
37
38const response1 = await sendSessionMessage(sessionId, "I need help with billing");
39console.log('Response 1:', response1);
40
41const response2 = await sendSessionMessage(sessionId, "Can you explain the charges?");
42console.log('Response 2:', response2); // Will remember the billing context

3. Using previousChatId for Context


4. Custom Assistant Configuration

1

Use inline assistant configuration

Instead of pre-created assistants, define configuration per request:

Custom Assistant Request
$curl -X POST https://api.vapi.ai/chat \
> -H "Authorization: Bearer YOUR_API_KEY" \
> -H "Content-Type: application/json" \
> -d '{
> "input": "I need help with enterprise features",
> "assistant": {
> "model": {
> "provider": "openai",
> "model": "gpt-4o",
> "temperature": 0.7,
> "messages": [
> {
> "role": "system",
> "content": "You are a helpful technical support agent specializing in enterprise features."
> }
> ]
> }
> }
> }'
2

Create specialized chat handlers

Build different chat handlers for different types of requests:

specialized-handlers.ts
1async function createSpecializedChat(systemPrompt: string) {
2 return async function(userInput: string): Promise<string> {
3 const response = await fetch('https://api.vapi.ai/chat', {
4 method: 'POST',
5 headers: {
6 'Authorization': 'Bearer YOUR_API_KEY',
7 'Content-Type': 'application/json'
8 },
9 body: JSON.stringify({
10 input: userInput,
11 assistant: {
12 model: {
13 provider: 'openai',
14 model: 'gpt-4o',
15 temperature: 0.3,
16 messages: [{ role: 'system', content: systemPrompt }]
17 }
18 }
19 })
20 });
21
22 const chat = await response.json();
23 return chat.output[0].content;
24 };
25}
26
27const technicalSupport = await createSpecializedChat(
28 "You are a technical support specialist. Ask clarifying questions and provide step-by-step troubleshooting."
29);
30
31const billingSupport = await createSpecializedChat(
32 "You are a billing support specialist. Be precise about billing terms and always verify account information."
33);
34
35// Usage
36const techResponse = await technicalSupport("My API requests are returning 500 errors");
37const billingResponse = await billingSupport("I was charged twice this month");

Next Steps

Enhance your non-streaming chat system further:

Need help? Chat with the team on our Discord or mention us on X/Twitter.