Your own chat app with threads API and Next JS
In a chat application, the “threads” API is commonly used to manage and organize conversations.
Environment
To set up your chatbot with TuneStudio, create a .env file with the following variables:
- TUNE_API_KEY: Your Tune API key
- TUNE_MODEL: Your chosen model name (e.g. rohan/Meta-Llama-3-8B-Instruct)
Implementating Chat App Using Studio Threads API
To handle API requests and responses for the chat functionality in your ChatApp application, you need to create a file named route.ts inside the app/api/chats directory.
Start by creating a async POST request that sends a new message to a specific thread in a chat application using the Tune Studio Threads API, and then retrieves and returns the updated list of messages in the thread.
export async function POST(request: Request) {
const requestBody = await request.json();
const threadID = requestBody.threadID;
const content = requestBody.content;
const resp = await axios
.post(
`https://studio.tune.app/v1/threads/${threadID}/messages`,
{
assistantId: "",
content,
fileIds: [],
role: "user",
runId: "",
threadId: threadID,
},
{
headers: {
"Content-Type": "application/json",
"x-tune-key": process.env.TUNE_API_KEY,
},
}
)
.catch(() => {
return {
success: false,
};
})
.then(() => {
return {
success: true,
};
});
if (resp?.success) {
const response = await getModelResponse(threadID);
if (response?.success) {
const respdata = await getMessages(threadID);
return Response.json({
success: respdata?.data ? true : false,
data: respdata?.data
? respdata?.data
?.map(
(val: { role: any; content: { text: { value: any } }[] }) => {
console.log({ resp: val?.content });
if (val?.role !== "system")
return {
role: val?.role,
content: val?.content?.[0]?.text?.value || "",
};
}
)
?.filter((val: any) => val)
: [],
});
}
return Response.json({
success: false,
data: [],
});
}
return Response.json({
success: resp?.success,
data: [],
});
}
Then create a GET request that is responsible for fetching messages from a specific thread identified by the threadID parameter. It returns a JSON response containing the messages, filtered to exclude system messages, and formatted with the role and content of each message.
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const threadID = searchParams.get("threadID");
if (!threadID) return Response.json({ success: false, data: [] });
const resp = await getMessages(threadID);
return Response.json({
success: resp?.data ? true : false,
data: resp?.data
? resp?.data
?.map((val: { role: any; content: { text: { value: any } }[] }) => {
console.log({ resp: val?.content });
if (val?.role !== "system")
return {
role: val?.role,
content: val?.content?.[0]?.text?.value || "",
};
})
?.filter((val: any) => val)
: [],
});
}
To fetch a list of threads, you can use the Tune Studio Threads API. Simply make an asynchronous GET request to the API and retrieve the response data in JSON format. Don’t forget to set an upper limit for the number of threads you want to fetch.
export async function GET() {
const resp = await axios
.get("https://studio.tune.app/v1/threads?limit=1000", {
headers: {
"Content-Type": "application/json",
"x-tune-key": process.env.TUNE_API_KEY,
},
})
.catch((err: any) => {
return err;
})
.then((res: any) => {
return res?.data;
});
return Response.json({
success: resp?.data ? true : false,
data: resp?.data ? resp?.data : [],
});
}
The Threads API is used in the chat application to create a new thread by sending a POST request to the Tune Studio server. It allows the application to specify the thread’s title, dataset ID, and initial messages, and returns a JSON response indicating the success status and data of the created thread.
export async function POST(request: Request) {
const requestBody = await request.json();
const title = requestBody.title;
const resp = await axios
.post(
`https://studio.tune.app/v1/threads`,
{
datasetId: "",
messages: [],
title: title,
},
{
headers: {
"Content-Type": "application/json",
"x-tune-key": process.env.TUNE_API_KEY,
},
}
)
.catch((err: any) => {
return err;
})
.then((res: any) => {
return res?.data;
});
return Response.json({
success: resp ? true : false,
data: resp ? resp : {},
});
}
Create a async POST request sends a message to a specific thread using the Threads API.
Conclusion
This tutorial demonstrates the power of the Tune Studio Threads API in building robust and scalable chat applications. By following this tutorial, you can create your own chat application with threads and take advantage of the features and functionality provided by the Tune Studio platform.
You can find the complete code for this tutorial here
Was this page helpful?