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

Get the Project ID.

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

2. Install React and Create a New Project
npx create-react-app my-app
cd my-app
3. Install jamaibase.
npm install jamaibase
4. Create and Use the JamAI Client in your React component
Note: Exposing your API key directly in the client-side code is a security risk. For improved security, consider using a framework like Next.js or SvelteKit that allows server-side rendering.
// App.tsx
import { useEffect, useState } from "react";
import JamAI from "jamaibase";
import { PageListTableMetaResponse } from "jamaibase/resources/gen_tables/tables";
export default function Home() {
const [tableData, setTableData] = useState<PageListTableMetaResponse>();
useEffect(() => {
const fetchData = async () => {
const jamai = new JamAI({
baseURL: process.env.NEXT_PUBLIC_JAMAI_BASEURL!,
apiKey: process.env.JAMAI_API_KEY,
projectId: process.env.JAMAI_PROJECT_ID,
});
try {
const response = await jamai.listTables({
table_type: "action",
});
setTableData(response);
} catch (err: any) {
console.error(err.message);
}
fetchData();
};
}, []);
return (
<div>
<h1>List of Tables</h1>
<ul>
{tableData?.items.map((table) => (
<li key={table.id}>
<h2>Table ID: {table.id}</h2>
<h3>Columns:</h3>
<ul>
{table.cols.map((column) => (
<li key={column.id}>
<p>ID: {column.id}</p>
<p>Data Type: {column.dtype}</p>
{/* Render other properties as needed */}
</li>
))}
</ul>
</li>
))}
</ul>
</div>
);
}
5. Start the app
npm run dev
Last updated
Was this helpful?