SvelteKit
1. Setup JamAIBase project.
Create a new project.

Get the Project ID.

Create JamAI API Key at Organization > Secrets > Create API Key.

2. Create a SvelteKit app using the npm create command.
npm create svelte@latest jamai-example-app
cd jamai-example-app
npm install
3. Install the JamAI Base client library, jamaibase
jamaibase
npm install jamaibase
4. Create a .env
file at the root or your project and add the keys
.env
file at the root or your project and add the keysPUBLIC_JAMAI_BASEURL=http://api.jamaibase.com/
JAMAI_API_KEY=your_jamai_sk_api_key
JAMAI_PROJECT_ID=your_proj_id
5. Create a page
We will create a UI that will create a new action table.
Create a new file src/routes/create-table/+page.svelte
and add the following form.
<script>
<script lang="ts">
export let form;
</script>
<main>
<h1>Create Action Table</h1>
{#if form?.success}
<!-- this message is ephemeral; it exists because the page was rendered in
response to a form submission. it will vanish if the user reloads -->
<p>Successfully created the table.</p>
{/if}
{#if !form?.success}
<!-- this message is ephemeral; it exists because the page was rendered in
response to a form submission. it will vanish if the user reloads -->
<p>Sorry, something went wrong!</p>
{/if}
<form method="POST" action="/create-table">
<label>
Table ID
<input name="table_id" />
</label>
<label>
Column Name
<input name="column_name" />
</label>
<label>
Columng Data Type
<select name="column_d_type">
<option value="str">str</option>
<option value="int">int</option>
<option value="float">float</option>
<option value="bool">bool</option>
</select>
</label>
<button type="submit">Create</button>
</form>
</main>
6. Create a form action
We will utilize form action provided by sveltekit to accept the inputs from the client side. Then use jamai client to create a action table.
Create a +page.server.ts
file in the same path of the form element to accept post data from the form.
import JamAI from "jamaibase";
import { fail } from "@sveltejs/kit";
import { PUBLIC_JAMAI_URL } from "$env/static/public";
import { JAMAI_API_KEY, JAMAI_PROJECT_ID } from "$env/static/private";
const jamai = new JamAI({
baseURL: PUBLIC_JAMAI_URL,
apiKey: JAMAI_API_KEY,
projectId: JAMAI_PROJECT_ID,
});
export const actions = {
default: async ({ request }) => {
type DTypes = "float" | "int" | "bool" | "str" | undefined;
const data = await request.formData();
const tableId = data.get("table_id")?.toString();
const columnName = data.get("column_name")?.toString();
const columnDType = data.get("column_d_type")?.toString() as DTypes;
console.log("data: ", data);
try {
const response = await jamai.createActionTable({
id: tableId!,
cols: [{ id: columnName!, dtype: columnDType! }],
});
return { success: true, data: response };
} catch (error) {
console.error(error);
fail(500, { message: "Something went wrong!" });
}
},
};
7. Start the app
Start the app and go to http://localhost:5173 in a browser.
npm run dev
Last updated
Was this helpful?