Following you will find a collection of examples that demonstrate how to use the Norlax SDK in your app. You will learn how to generate data, interact with the AI, and use the generated data in your app.
Norlax can generate data for you and even format it according to a schema you specify. This is useful when you want to generate data for a specific purpose. For instance, you can generate a list of presidents and some information abut them. The format ca be specified with a zod schema.
You can use the SDK in a Next.js app and generate data on the fly. This is useful when you want to generate data based on user input.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
In this example, the Norlax SDK is used to create a chat-based AI assistant. The code demonstrates how you can use the SDK to send multiple messages in a chat and retrieve the responses. First, the code sends a message asking "Who landed on the moon first?" and waits for the response. The accessLevel parameter specifies the permission level for the chatroom. Then, the code sends a second message asking "How old was the person when he did?" and specifies the chatroomId of the previous message. This allows the SDK to link the two messages and continue the conversation in the same chatroom. Finally, the code displays the content of the responses in an ordered list. This example showcases the capability of the Norlax SDK to handle multiple messages in a chat and retrieve the corresponding answers.
import { Norlax } from "~/Norlax"
export const ChatExample = async () => {
const firstAnswer = await Norlax.default.fetch({
message: "Who landed on the moon first?",
accessLevel: "LINK_WRITE",
})
const secondAnswer = await Norlax.default.fetch({
message: "How old was the person when he did?",
chatroomId: firstAnswer.chatroom.id,
})
return (
<>
<ol className="list-decimal">
<li>{firstAnswer.message.content}</li>
<li>{secondAnswer.message.content}</li>
</ol>
</>
)
}
This example demonstrates how the Norlax SDK can be used to fetch and display the current time in a specific location, in this case, Berlin. The Norlax SDK provides a function called `fetchData` that allows you to send a message to the AI model and retrieve structured data as a response. In this case, the message is "What time is it in Berlin?". The SDK also allows you to define a schema using the `zod` library to specify the expected structure of the response data. In this example, the schema defines that the response should include properties such as `hours`, `minutes`, `dayOfWeek`, `dateWithoutYear`, and `timezone`. By using the `use` hook provided by the SDK, the response data is fetched and stored in the `answer` variable. The fetched data is also cached for 60 seconds and will be revalidated after that period. The fetched data is then displayed in a user interface, showing the day of the week, date, time (in hours and minutes), and the timezone. This example demonstrates how the Norlax SDK simplifies the process of fetching data from an AI model and integrating it into a user interface, making it easier to create AI-powered features in your applications.
import { use } from "react"
import { z } from "zod"
import { Norlax } from "~/Norlax"
export const Time = () => {
const answer = use(
Norlax.functions.fetchData({
message: "What time is it in Berlin?",
schema: z.object({
hours: z.string(),
minutes: z.string(),
dayOfWeek: z.string(),
dateWithoutYear: z.string(),
timezone: z.string(),
}),
cacheTtlSeconds: 60,
next: {
revalidate: 60,
},
})
)
return (
<>
<div className="flex flex-col items-center gap-2">
<div>
{answer.dayOfWeek}, {answer.dateWithoutYear}
</div>
<div className="text-6xl font-bold">
<span>{answer.hours}</span>
<span className="text-primary">:</span>
<span>{answer.minutes}</span>
</div>
<div>{answer.timezone}</div>
</div>
</>
)
}
### Use Case Overview: User Registration Notification This example demonstrates how the Norlax SDK can streamline user registration processes by integrating real-time notifications into web applications. This immediate feedback mechanism allows teams to stay informed about new sign-ups without manual tracking, enhancing communication and responsiveness. By leveraging the Norlax SDK's capabilities, teams can easily implement automated workflows that connect user interactions with external services, ultimately improving the efficiency and effectiveness of user onboarding processes. This highlights the SDK's potential to empower teams to build productive and responsive applications seamlessly.
import { Send } from "lucide-react"
import { Button } from "~/shadcn/components/ui/button"
import { Input } from "~/shadcn/components/ui/input"
import { Norlax } from "~/Norlax"
export const Form = async () => {
const submit = async (data: FormData) => {
"use server"
const email = data.get("email")
await Norlax.functions.fetch({
message: `Notify me via discord that a new user has signed up with email: ${email}`,
cacheTtlSeconds: 0,
})
}
return (
<>
<div className="mb-2 text-center font-bold">Register</div>
<form className="flex flex-row items-center gap-1" action={submit}>
<Input type="email" placeholder="Your Email" name="email" />
<Button type="submit" size="sm">
<Send />
</Button>
</form>
</>
)
}
You can pass custom functions to the SDK that the AI can call. In this example we pass it a function that can fetch articles from Wikipedia, but you can pass any function you want. For example you could pass a function that fetches data from your database, or a function that mutates things on your side.
import { fetchNorlaxText } from "@Norlax/sdk"
import { z } from "zod"
import { env } from "~/env.mjs"
import { fetchWikipediaArticle } from "./fetchWikipedia"
export const Wikipedia = async () => {
const answer = await fetchNorlaxText({
launchpadSlugId: env.NEXT_PUBLIC_NORLAX_DEFAULT_LAUNCHPAD_SLUG_ID,
accessLevel: "LINK_WRITE",
message:
"How did Luna 25 land on the moon? Please use Wikipedia as a source.",
customFunctions: [
{
nameForAI: "fetchWikipediaArticle",
descriptionForAI: "Fetch a Wikipedia article",
inputSchema: z.object({
articleName: z.string(),
}),
execute: async ({ input }) => {
const output = await fetchWikipediaArticle(input.articleName)
return { output }
},
},
],
})
return answer
}
For more information on how to call a function from a widget, see the custom functions widget functions.