Understanding Launchpads in Norlax

Launchpads are a fundamental element in integrating Norlax into your product. They serve as a collection of settings that provide instructions for the AI's behavior, its functionality, and data access.

What are Launchpads?

In Norlax, you can have multiple chats. Each chat is composed of messages and settings. These settings include the GPT version to be used, the system prompt that guides the AI's behavior, available functions, accessible documents, etc.

A launchpad is a set of these settings. When you create a new chat using a launchpad, the chat automatically adopts the settings defined in the launchpad. For instance, a launchpad with the settings "GPT-4" and "System Prompt: Keep your answers short" will create a chat with these exact settings.

Launchpads serve two main purposes:

1. They provide a template for creating new chats in the Norlax App, making the process easier and faster.
2. They are the backbone of the SDK. Whenever you fetch data from Norlax via the SDK, you need to specify a launchpad that should be used to generate your output.

Creating Your First Launchpad

Follow these steps to create your first launchpad:

1. Create a Norlax Account: If you don't have one already, register at /.
2. Create a Norlax Team: Create a team if you don't have one.
3. Access Launchpads: Click the menu on the top left and select "Launchpads".
4. Create a New Launchpad: Click on "Create Launchpad" and configure it according to your needs. (Configuring is not necessary to get started)
5. Activate the 'Public' Switch: This step allows the SDK to generate new chats from this launchpad.
6. Save Your Settings: Click "Save" at the bottom right of the page.
7. Copy the ID: After saving, an ID will appear below the "Public" switch. Copy this ID for future use. (If you don't need it right away, you can always come back to this page and copy it again)

Congratulations! You've successfully created your first launchpad. You can now use it to create new chats via the SDK.

Also checkout our Getting Started guide to setup a public launchpad step by step for an actual use case.

"use client"

import { NorlaxWidget } from "@Norlax/sdk"
import { useEffect, useState } from "react"
import { z } from "zod"
import { Button } from "~/shadcn/components/ui/button"

export const Widget = () => {
  const [color, setColor] = useState("#888888")

  useEffect(() => {
    return NorlaxWidget.registerFunction({
      nameForAI: "changeColor",
      descriptionForAI: "Change the color of the square using hex codes",
      inputSchema: z.object({
        color: z.string(),
      }),
      execute: async ({ input }) => {
        setColor(input.color)
        return {
          output: `Changed color to ${input.color}`,
        }
      },
    })
  }, [])

  return (
    <>
      <div
        className="flex h-80 w-80 items-center justify-center rounded-md border text-3xl"
        style={{
          backgroundColor: color,
        }}
      >
        {color}
      </div>

      <div className="mt-2 flex flex-row gap-2">
        <Button
          variant="outline"
          className="flex-1"
          onClick={() => {
            NorlaxWidget.sendMessage({
              message: "Make the square blue as the sky",
            })
          }}
        >
          Blue as the sky
        </Button>
        <Button
          variant="outline"
          className="flex-1"
          onClick={() => {
            NorlaxWidget.sendMessage({
              message: "Make the square red like a flower",
            })
          }}
        >
          Red like a flower
        </Button>
      </div>

      <script
        defer
        src="https:///widget.js"
        data-launchpad-slug-id={
          process.env.NEXT_PUBLIC_NORLAX_DEFAULT_LAUNCHPAD_SLUG_ID!
        }
      />
    </>
  )
}

Custom Functions: Extending LLM Capabilities

Functions are a fundamental component in Norlax, designed to enhance the capabilities of Large Language Models (LLMs) like GPT.

In many ways, functions in Norlax mirror those found in programming languages such as Python or Javascript. They accept specified inputs, process them through a series of coded instructions, and yield an output.

Consider, for instance, a function designed to perform complex mathematical calculations. Given that current versions of GPT are not particularly adept at math, this function could take a mathematical expression as an input, evaluate it, and return the computed result. In such a scenario, if the LLM needs to execute a complicated calculation, it can simply invoke this function and delegate the mathematical heavy lifting to it.

What are functions?

• Functions can be called by the AI
• AI provides inputs
• Functions return output to AI
• Example: Calculator
  • AI provides the input
    sqrt(345)
  • The Calculator function calculates the result and returns
    18.57417562100671
  • The AI uses the result to continue the conversation with
    The square root of 345 is approximately 18.57.
• Many built-in functions but extendable --> Custom Functions: Use your own code to enhance AI

Custom Functions Overview

Custom Functions are a developer-oriented feature that enables you to expand the capabilities of the AI by writing your own functions. It empowers you to personalize and fine-tune the AI functionalities according to your needs. This feature allows the AI to perform tasks that go beyond its inherent capabilities, making it a more flexible and adaptable tool.

We have multiple ways to create custom function:

HTTP Functions

Using HTTP Functions you can host custom functions on your own infrastructure, while still being able to use them within Norlax. The easiest way to implement a HTTP Function is by using the NorlaxFunctionHandler.

How to setup?

1. Goto Integrations and add a new integration
2. Select "External Functions" and enter the URL of your server
3. Click "Save"

Hosted Functions

As a TypeScript / JavaScript developer, you can leverage our Hosted Functions feature. We host your functions, allowing you to concentrate on the business logic. You have nothing todo with servers, scaling, or security. Just provide the code and we take care of the rest.

How to setup?

1. Goto Integrations and add a new integration
2. Select "Hosted Functions"tag
3. Click "Create"
4. You are redirected to our function designer

5. Enter your code (checkout the detailed walkthrough of the example code below)
6. To test simply tell the AI to call the function in the chat window on the right. Everything is set up for you!

Let's walk through an example code

We are using Deno to run your code. You can deploy either TypeScript or JavaScript code and use any package from npm or Deno. To use an external package just import them as you usually would, no need for a package.json or install commands.

The code editor automatically loads TypeScript types from esm.sh. So you can use autocomplete & type checking.

Some packages and Deno packages might not work, due to different package structures.You can still use the packages & deploy your code, but you won't get any type hints in the editor. Please let us know if this happens in our Discord so we can improve the experience.

Let's jump into the code:

import {
  NorlaxFunctionHandler,
  createNorlaxCustomFunction,
} from '@Norlax/sdk'
import { z } from 'zod'

export default NorlaxFunctionHandler({
  functions: [
    createNorlaxCustomFunction({
      nameForAI: 'apricot-courageous-worm',
      //tell the AI what this function does
      descriptionForAI: '',
      
      //nameForHuman: 'short human readable name',
      //descriptionForHuman: 'longer human readable description',
      //emoji: '👋',

      inputSchema: z.object({
        name: z.string(),
      }),
      
      execute: async ({ input }) => {
        return {
          output: `Hello ${input.name}! This is random: ${Math.random()}`,
        }
      },
    }),
  ],
})

Hosted Styled Functions

In Hosted Functions you can also take advantage of the styled property. The styled property acts as a React component that get's rendered in the chat when the function is called. This is useful for functions that return a visual output, like a chart or a table. It has access to the input and output of the function. All while being fully typed.

Let's look at an example

import {
  NorlaxFunctionHandler,
  createNorlaxCustomFunction,
} from "@Norlax/sdk"
import { z } from "zod"
import { type FC } from "react"

const fetchWeather = async (location: string) => {
  const apiKey = Deno.env.get("OPENWEATHER_API_KEY")
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}&units=metric`

  const response = await fetch(url)
  if (!response.ok) {
    throw new Error("Network response was not ok")
  }
  return response.json()
}

interface WeatherWidgetProps {
  weather?: {
    name: string
    main: {
      temp: string
    }
    weather: [
      {
        description: string
        icon: string
      }
    ]
  }
}

const WeatherWidget: FC<WeatherWidgetProps> = ({ weather }) => {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white p-5 text-black">
      <div className="text-center flex items-center justify-center flex-col">
        <div className="text-xl font-bold">{weather?.name}</div>
        <img
          src={` https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
        />
        <div className="text-lg">{`${weather?.main.temp}°C`}</div>
        <div className="capitalize">{weather?.weather[0].description}</div>
      </div>
    </div>
  )
} 

export default NorlaxFunctionHandler({
  functions: [
    createNorlaxCustomFunction({
      nameForAI: "getCurrentWeather",
      //tell the AI what this function does
      descriptionForAI: ``,

      //nameForHuman: 'short human readable name',
      //descriptionForHuman: 'longer human readable description',
      //emoji: '👋',

      inputSchema: z.object({
        location: z.string(),
      }),

      execute: async ({ input }) => {
        const weather = await fetchWeather(input.location)
        return {
          output: weather,
        }
      },
      styled: ({ output }) => {
        return (
          <>
            <script src="https://cdn.tailwindcss.com"></script>
            <WeatherWidget weather={output} />
          </>
        )
      },
    }),
  ],
})

How to use custom functions with launchpads

1. To enable your custom function in a launchpad you need to go to the launchpad's settings or create a new launchpad.

2. At the top click on the quick select button and select "Functions"

3. Search for your function and select it

4. You can now use your custom function

How to use custom functions in a chat

1. Start a new chat
2. Click the add button and select "Functions"

3. Search for your function and select it
4. Tell the AI to use the function

Fetching Norlax via API

The Norlax API currently offers one endpoint.

Here is an example on how to use the API to fetch data from Norlax.

fetch('https://norlax.app/api/rest/message', {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    launchpadSlugId: 'my-launchpad-12314513123213',
    message: 'Why is Norlax SDK awesome?',

    // Optional:
    schema: {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "no": {
            "type": "number"
          },
          "reason": {
            "type": "string"
          }
        },
        "required": [ "no", "reason" ]
      }
    }
    cacheTtlSeconds: 60 * 60 * 24 * 7, // 1 week
    chatroomId: "8ebd214b048d9354eb7afe33314d1d30" // continue chat
    accessLevel: "TEAM" // TEAM or LINK_READ or LINK_WRITE (default TEAM)
  }),
})

type Output = {
  message: {
    content: string
    data?: any // if you provided a schema, this will be the parsed data
  }
  mediaAttachments?: {
    id: string
    type: 'IMAGE' | 'AUDIO' | 'FILE
    url: string
  }[]
  usage: {
    teamTokens: number
  }
  chatroom: {
    id: string
    url: string
  }
}

Fetching Norlax via SDK

npm install @Norlax/sdk

The Norlax SDK is a wrapper around the API and makes working with it in Typescript a bit nicer.

The core of the SDK is the fetchNorlax function. This is the primary gateway to Norlax, it handles every request. Then there are 3 sub functions that provide a nicer output depending on your needs. There is fetchNorlaxData which just returns the data you requested in the specified format (specified by the schema you passed in). Then we have fetchNorlaxText which only returns the text Norlax has generated. And then there is fetchNorlaxMedia which returns the first media attachment.

So if you really only care about the generated result such as the text or the data, you can use one of the sub functions. If you care about any additional information such as the generated chatroomId or the usage, you can use the main function.

The input parameters are all the same for the main function and the sub functions.

Paramters