This project utilizes Next.js 14 and JamAI to create a personalized daily workout and meal plan based on user profiles (age, height, weight, sex, and desired body type). It leverages streaming for a better user experience.
The full source code of this project can be found on
Project setup
Create the Action Table
First we will create the fitness_planner Action table with the following input columns:
age: int
height: float
weight: float
sex: sting
preferred_body_type: string
Add workout output column with the following settings.
Prompt:
Suggest daily workout plan for a ${sex} of ${age} years old, height of ${height} centimeters and have a weight of ${weight} KG. The preferred body type is ${preferred_body_type}.
System Prompt:
You are a certified virtual gym trainer with a passion for helping people achieve their fitness goals. Your primary function is to design safe and effective personalized workout plans based on user input. Your response should consist only workout plan. The output should be in the Markdown format.
The model settings are left as default, but you can customize the parameters according to your prefference.
Add meal output column
Prompt:
suggest daily meal plan for a ${sex} of ${age} years old, height of ${height} centimeters and have a weight of ${weight} KG. The preferred body type is ${preferred_body_type}.
System Prompt:
You are an expert virtual nutritionist, you help people to plan their diet based on their age, height, weight, sex, preferred body type and so on. Your response should consist of only diet plan. The output should be in the Markdown format.
Try your prompts
Create your Next.js app
The app will have a single page with a form in the left side and 2 output box to display the output of JamAI in markdown format.
Initialize the project
Create new next.js project and move to that directory.
npx create-next-app@latest
cd (path/to/your/app)
Install JamAI SDK
npm install jamaibase
Add the secrets to .env.local file at the root of your project
Concurrent is set to true, which means the output of the both columns will be generated concurrently.
Add custom streamText function:
function streamText(
inputStream: ReadableStream<GenTableStreamChatCompletionChunk>
): ReadableStream<string> {
const reader = inputStream.getReader();
return new ReadableStream<string>({
async start(controller) {
while (true) {
const { done, value } = await reader.read();
if (done) {
controller.close();
break;
}
// Extract the text content from the chunk
const text = JSON.stringify(value);
if (text) {
// Enqueue the text content as a chunk to the new stream
controller.enqueue(text);
}
}
},
cancel() {
reader.releaseLock();
},
});
}
When sending streams, it's common for the chunks to get concentrated. So, if we want to parse them, they will fail. So, we will write a utility function to process the JSON stream on the client side.
// src/lib/utils.ts
export async function processJsonStream<T>(
reader: ReadableStreamDefaultReader<Uint8Array>,
processContent: (content: T) => void,
handleComplete?: () => void,
handleError?: (error: any) => void
) {
const decoder = new TextDecoder("utf-8");
let buffer = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
buffer += chunk;
// Split by the delimiter "}{" }
let boundary = buffer.indexOf("}{");
while (boundary !== -1) {
const jsonString = buffer.substring(0, boundary + 1);
buffer = buffer.substring(boundary + 1);
try {
const parsedChunk = JSON.parse(jsonString);
processContent(parsedChunk);
} catch (error) {
console.error("Error parsing JSON chunk:", jsonString);
handleError && handleError(error);
}
boundary = buffer.indexOf("}{");
}
// Attempt to parse whatever is left in the buffer
try {
const parsedChunk = JSON.parse(buffer);
processContent(parsedChunk);
buffer = "";
} catch (error) {
// Continue buffering since we might not have a complete JSON object yet
}
}
if (buffer.trim()) {
try {
const parsedChunk = JSON.parse(buffer.trim());
processContent(parsedChunk);
} catch (error) {
console.error("Error parsing remaining buffer:", buffer.trim());
handleError && handleError(error);
}
}
handleComplete && handleComplete();
}
Run the App
npm run dev
Conclusion
Once you get your app running, you can look at your Jamai Action table rows to review the data that you can access with your app.
Next Steps
We have demonstrated how easy it is to store data and use LLM's to update your cell values with prompts directly.
This simple example demonstrates the simple use of an Action Table here in your app. If you have related data you want to leverage and make your app smarter, you can implement the Knowledge Table to make your Action Tables smarter with Retrieval Augmented Generation (RAG).
For example, you can add your menu catalog and let meal columns recommend meals based on your menu.
Once you're happy with the results, use the JamAi in your Next.js app.
Generate API Key -> Go to and collect API Key
Collect Project ID -> Go to and copy the project id.
As the SDK/API requires API Key, we will use it on the server side for secure interaction. So, we will write a that will allow us to create custom request handlers for a given route using the Web and APIs.
The above code first create a JamAI client and then use the funtion to add a new row to the action table and get the output as stream.
Unfortunately, the StreamingTextResponse method of only accepts texts but the chunk returned by the sdk is of GenTableStreamChatCompletionChunk type. Therefore, in order to stringify the chunk, use the following function.
