import { useUpshipQuery } from "@upship/sdk"

function Recipe() {
    const query = useUpshipQuery(`
        You are a helpful AI assistant.

        Give me the recipe for: {food}

        Format the response in the following way:
            <name>RECIPE NAME</name>
            <recipe>RECIPE NAME</recipe>
    `, { food: 'Tomato Soup' })

    return query.isLoading
        ? <div>creating recipe...</div>
        : <div>
            <h1>{query.artifacts.name}</h1>
            <p>{query.artifacts.recipe}</p>
        </div>
}

                                  

import { useUpshipMutation } from "@upship/sdk"

function Recipe() {
    const mutation = useUpshipMutation(`
        You are a helpful AI assistant.

        ...
    `)

    return !mutation.isFetched
        ? <button onClick={() =>
            mutation.mutate({ food: 'Tomato Soup' })
        }>
            Get Recipe
        </button>
        : mutation.isLoading
            ? <div>creating recipe...</div>
            : <div>
                <h1>{mutation.artifacts.name}</h1>
                <p>{mutation.artifacts.recipe}</p>
            </div>
}                                

import { UpshipProvider } from "@upship/sdk"

function App({ children }) {
    return <UpshipProvider value={{
        app_id: process.env.UPSHIP_APPLICATION_ID
    }}>
        {children}
    </UpshipProvider>
}
                                

import { SignedIn, SignedOut, SignInButton } from "@upship/sdk"

function Layout({ children }) {
    return <>
        <SignedOut>
            <SignInButton />
        </SignedOut>
        <SignedIn>{children}</SignedIn>
    </>
}                                

import { useUpshipTemplate, useUpshipMutation } from "@upship/sdk"

// Load a prompt template from your dashboard
const { prompt, params } = useUpshipTemplate(
    'recipe-builder'
)

// Use it with any hook
useUpshipMutation(prompt, params)

                                

import { useUpshipMutation, UpshipModels } from "@upship/sdk"

const mutation = useUpshipMutation(`
    You are a helpful AI assistant.

    ...
`, {
    model: UpshipModels.FAST,
    tags: ['recipe-building'],
    streaming: true
})