index.html

<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>jamaibase - v0.4.0</title><meta name="description" content="Documentation for jamaibase"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">jamaibase - v0.4.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h2>jamaibase - v0.4.0</h2></div><div class="tsd-panel tsd-typography"><p align="center">
  <img width="70" src="https://i.ibb.co/CzpJcYG/jamai-logo.png" alt="jamai-logo">
</p>

<h1 align="center">JamAI</h1>

<p align="center">
  <a href="https://www.jamaibase.com">www.jamaibase.com</a>
</p>

<h2 align="center">This is a TS/JS Client Library for JamAIBase.</h2>

<p align="center">
  <a href="https://github.com/EmbeddedLLM/JamAIBase/tree/release/clients/typescript">GitHub</a> |
  <a href="https://docs.jamaibase.com/">Documentation</a> |
  <a href="https://embeddedllm.github.io/jamaibase-ts-docs/">TS/JS API Documentation</a> |
  <a href="https://github.com/EmbeddedLLM/JamAIBase/issues">Issues</a> |
  <a href="https://www.npmjs.com/package/jamaibase">NPM Package</a>
</p>

<a id="md:jamai-base" class="tsd-anchor"></a><h1><a href="#md:jamai-base">JamAI Base</a></h1><p align="center">
  <img src="https://embeddedllm.github.io/jamaibase-ts-docs/JamAI_Base_Cover.png" alt="JamAI Base Cover">
</p>

<a id="md:overview" class="tsd-anchor"></a><h2><a href="#md:overview">Overview</a></h2><p>Welcome to JamAI Base – the real-time database that orchestrates Large Language Models (LLMs) for you. Designed to simplify AI integration, JamAI Base offers a Backend as a Service (BaaS) platform with an intuitive, spreadsheet-like interface. Focus on defining your data requirements through natural language prompts, and let us handle the complexities of RAG, LLMOps, conversation histories, and LLM orchestration.</p>
<a id="md:key-benefits" class="tsd-anchor"></a><h2><a href="#md:key-benefits">Key Benefits</a></h2><a id="md:ease-of-use" class="tsd-anchor"></a><h3><a href="#md:ease-of-use">Ease of Use</a></h3><ul>
<li><strong>Interface</strong>: Simple, intuitive spreadsheet-like interface.</li>
<li><strong>Focus</strong>: Define data requirements through natural language prompts.</li>
</ul>
<a id="md:scalability" class="tsd-anchor"></a><h3><a href="#md:scalability">Scalability</a></h3><ul>
<li><strong>Foundation</strong>: Built on LanceDB, an open-source vector database designed for AI workloads.</li>
<li><strong>Performance</strong>: Serverless design ensures optimal performance and seamless scalability.</li>
</ul>
<a id="md:flexibility" class="tsd-anchor"></a><h3><a href="#md:flexibility">Flexibility</a></h3><ul>
<li><strong>LLM Support</strong>: Supports any LLMs, including OpenAI GPT-4, Anthropic Claude 3, and Meta Llama3.</li>
<li><strong>Capabilities</strong>: Leverage state-of-the-art AI capabilities effortlessly.</li>
</ul>
<a id="md:declarative-paradigm" class="tsd-anchor"></a><h3><a href="#md:declarative-paradigm">Declarative Paradigm</a></h3><ul>
<li><strong>Approach</strong>: Define the &quot;what&quot; rather than the &quot;how.&quot;</li>
<li><strong>Simplification</strong>: Simplifies complex data operations, making them accessible to users with varying levels of technical expertise.</li>
</ul>
<a id="md:innovative-rag-techniques" class="tsd-anchor"></a><h3><a href="#md:innovative-rag-techniques">Innovative RAG Techniques</a></h3><ul>
<li><strong>Effortless RAG</strong>: Built-in RAG features, no need to build the RAG pipeline yourself.</li>
<li><strong>Query Rewriting</strong>: Boosts the accuracy and relevance of your search queries.</li>
<li><strong>Hybrid Search &amp; Reranking</strong>: Combines keyword-based search, structured search, and vector search for the best results.</li>
<li><strong>Structured RAG Content Management</strong>: Organizes and manages your structured content seamlessly.</li>
<li><strong>Adaptive Chunking</strong>: Automatically determines the best way to chunk your data.</li>
<li><strong>BGE M3-Embedding</strong>: Leverages multi-lingual, multi-functional, and multi-granular text embeddings for free.</li>
</ul>
<a id="md:key-features" class="tsd-anchor"></a><h2><a href="#md:key-features">Key Features</a></h2><a id="md:generative-tables" class="tsd-anchor"></a><h3><a href="#md:generative-tables">Generative Tables</a></h3><p>Transform static database tables into dynamic, AI-enhanced entities.</p>
<ul>
<li><strong>Dynamic Data Generation</strong>: Automatically populate columns with relevant data generated by LLMs.</li>
<li><strong>Built-in REST API Endpoint</strong>: Streamline the process of integrating AI capabilities into applications.</li>
</ul>
<a id="md:action-tables" class="tsd-anchor"></a><h3><a href="#md:action-tables">Action Tables</a></h3><p>Facilitate real-time interactions between the application frontend and the LLM backend.</p>
<ul>
<li><strong>Real-Time Responsiveness</strong>: Provide a responsive AI interaction layer for applications.</li>
<li><strong>Automated Backend Management</strong>: Eliminate the need for manual backend management of user inputs and outputs.</li>
<li><strong>Complex Workflow Orchestration</strong>: Enable the creation of sophisticated LLM workflows.</li>
</ul>
<a id="md:knowledge-tables" class="tsd-anchor"></a><h3><a href="#md:knowledge-tables">Knowledge Tables</a></h3><p>Act as repositories for structured data and documents, enhancing the LLM’s contextual understanding.</p>
<ul>
<li><strong>Rich Contextual Backdrop</strong>: Provide a rich contextual backdrop for LLM operations.</li>
<li><strong>Enhanced Data Retrieval</strong>: Support other generative tables by supplying detailed, structured contextual information.</li>
<li><strong>Efficient Document Management</strong>: Enable uploading and synchronization of documents and data.</li>
</ul>
<a id="md:chat-tables" class="tsd-anchor"></a><h3><a href="#md:chat-tables">Chat Tables</a></h3><p>Simplify the creation and management of intelligent chatbot applications.</p>
<ul>
<li><strong>Intelligent Chatbot Development</strong>: Simplify the development and operational management of chatbots.</li>
<li><strong>Context-Aware Interactions</strong>: Enhance user engagement through intelligent and context-aware interactions.</li>
<li><strong>Seamless Integration</strong>: Integrate with Retrieval-Augmented Generation (RAG) to utilize content from any Knowledge Table.</li>
</ul>
<a id="md:lancedb-integration" class="tsd-anchor"></a><h3><a href="#md:lancedb-integration">LanceDB Integration</a></h3><p>Efficient management and querying of large-scale multi-modal data.</p>
<ul>
<li><strong>Optimized Data Handling</strong>: Store, manage, query, and retrieve embeddings on large-scale multi-modal data efficiently.</li>
<li><strong>Scalability</strong>: Ensure optimal performance and seamless scalability.</li>
</ul>
<a id="md:declarative-paradigm-1" class="tsd-anchor"></a><h3><a href="#md:declarative-paradigm-1">Declarative Paradigm</a></h3><p>Focus on defining &quot;what&quot; you want to achieve rather than &quot;how&quot; to achieve it.</p>
<ul>
<li><strong>Simplified Development</strong>: Allow users to define relationships and desired outcomes.</li>
<li><strong>Non-Procedural Approach</strong>: Eliminate the need to write procedures.</li>
<li><strong>Functional Flexibility</strong>: Support functional programming through LLMs.</li>
</ul>
<a id="md:installation" class="tsd-anchor"></a><h2><a href="#md:installation">Installation</a></h2><pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">jamaibase@latest</span>
</code><button>Copy</button></pre>
<a id="md:usage" class="tsd-anchor"></a><h2><a href="#md:usage">Usage</a></h2><a id="md:create-api-client" class="tsd-anchor"></a><h3><a href="#md:create-api-client">Create API Client</a></h3><p>Create an API client with baseURL:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({ </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-2">&quot;http://localhost:5173/&quot;</span><span class="hl-1"> });</span>
</code><button>Copy</button></pre>
<p>Create an API client with api key and project id:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({ </span><span class="hl-4">token:</span><span class="hl-1"> </span><span class="hl-2">&quot;jamai_pat&quot;</span><span class="hl-1">, </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-2">&quot;proj_id&quot;</span><span class="hl-1"> });</span>
</code><button>Copy</button></pre>
<p>Create an API client with custom HTTP client:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">axios</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;axios&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">username</span><span class="hl-1"> = </span><span class="hl-2">&quot;user&quot;</span><span class="hl-1">;</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">password</span><span class="hl-1"> = </span><span class="hl-2">&quot;password&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">credentials</span><span class="hl-1"> = </span><span class="hl-4">Buffer</span><span class="hl-1">.</span><span class="hl-0">from</span><span class="hl-1">(</span><span class="hl-2">`</span><span class="hl-5">${</span><span class="hl-4">username</span><span class="hl-5">}</span><span class="hl-2">:</span><span class="hl-5">${</span><span class="hl-4">password</span><span class="hl-5">}</span><span class="hl-2">`</span><span class="hl-1">).</span><span class="hl-0">toString</span><span class="hl-1">(</span><span class="hl-2">&quot;base64&quot;</span><span class="hl-1">);</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">httpClient</span><span class="hl-1"> = </span><span class="hl-4">axios</span><span class="hl-1">.</span><span class="hl-0">create</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">headers:</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-4">Authorization:</span><span class="hl-1"> </span><span class="hl-2">`Basic </span><span class="hl-5">${</span><span class="hl-4">credentials</span><span class="hl-5">}</span><span class="hl-2">`</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-2">&quot;Content-Type&quot;</span><span class="hl-4">:</span><span class="hl-1"> </span><span class="hl-2">&quot;application/json&quot;</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-2">&quot;https://api.jamaibase.com&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">httpClient:</span><span class="hl-1"> </span><span class="hl-4">httpClient</span><br/><span class="hl-1">});</span>
</code><button>Copy</button></pre>
<p>Create an API client with maxretry and timeout:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-2">&quot;https://api.jamaibase.com&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">maxRetries:</span><span class="hl-1"> </span><span class="hl-7">3</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">timeout:</span><span class="hl-1"> </span><span class="hl-7">500</span><br/><span class="hl-1">});</span>
</code><button>Copy</button></pre>
<p>Configure httpAgent/ httpsAgent:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-2">&quot;https://api.jamaibase.com&quot;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-0">setHttpagentConfig</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">maxSockets:</span><span class="hl-1"> </span><span class="hl-7">100</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">maxFreeSockets:</span><span class="hl-1"> </span><span class="hl-7">10</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">freeSocketTimeout:</span><span class="hl-1"> </span><span class="hl-7">30000</span><span class="hl-1"> </span><span class="hl-8">// free socket keepalive for 30 seconds</span><br/><span class="hl-1">});</span>
</code><button>Copy</button></pre>
<a id="md:types" class="tsd-anchor"></a><h3><a href="#md:types">Types</a></h3><p>Types can be imported from resources:</p>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">ChatRequest</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase/resources/llm/chat&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-4">response</span><span class="hl-1">: </span><span class="hl-9">ChatRequest</span><span class="hl-1">;</span>
</code><button>Copy</button></pre>
<a id="md:use-client-object-to-call-the-methods" class="tsd-anchor"></a><h3><a href="#md:use-client-object-to-call-the-methods">Use client object to call the methods</a></h3><p>Example of adding a row to action table:</p>
<pre><code class="language-javascript"><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">response</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">addRow</span><span class="hl-1">({</span><br/><span class="hl-1">        </span><span class="hl-4">table_type:</span><span class="hl-1"> </span><span class="hl-2">&quot;action&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">table_id:</span><span class="hl-1"> </span><span class="hl-2">&quot;workout-suggestion&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">data:</span><span class="hl-1"> [</span><br/><span class="hl-1">            {</span><br/><span class="hl-1">                </span><span class="hl-4">age:</span><span class="hl-1"> </span><span class="hl-7">30</span><span class="hl-1">,</span><br/><span class="hl-1">                </span><span class="hl-4">height_in_centimeters:</span><span class="hl-1"> </span><span class="hl-7">170</span><span class="hl-1">,</span><br/><span class="hl-1">                </span><span class="hl-4">weight_in_kg:</span><span class="hl-1"> </span><span class="hl-7">60</span><br/><span class="hl-1">            }</span><br/><span class="hl-1">        ],</span><br/><span class="hl-1">        </span><span class="hl-4">reindex:</span><span class="hl-1"> </span><span class="hl-5">null</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">concurrent:</span><span class="hl-1"> </span><span class="hl-5">false</span><br/><span class="hl-1">    });</span><br/><span class="hl-1">    </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-2">&quot;response: &quot;</span><span class="hl-1">, </span><span class="hl-4">response</span><span class="hl-1">);</span><br/><span class="hl-1">} </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">err</span><span class="hl-1">) {</span><br/><span class="hl-1">    </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-4">err</span><span class="hl-1">.</span><span class="hl-4">message</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<p>Example of adding row with streaming output</p>
<pre><code class="language-javascript"><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">addRowStream</span><span class="hl-1">({</span><br/><span class="hl-1">        </span><span class="hl-4">table_type:</span><span class="hl-1"> </span><span class="hl-2">&quot;action&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">table_id:</span><span class="hl-1"> </span><span class="hl-2">&quot;action-table-example-1&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">data:</span><span class="hl-1"> [</span><br/><span class="hl-1">            {</span><br/><span class="hl-1">                </span><span class="hl-4">Name:</span><span class="hl-1"> </span><span class="hl-2">&quot;Albert Eistein&quot;</span><br/><span class="hl-1">            }</span><br/><span class="hl-1">        ],</span><br/><span class="hl-1">        </span><span class="hl-4">reindex:</span><span class="hl-1"> </span><span class="hl-5">null</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-4">concurrent:</span><span class="hl-1"> </span><span class="hl-5">false</span><br/><span class="hl-1">    });</span><br/><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">reader</span><span class="hl-1"> = </span><span class="hl-4">stream</span><span class="hl-1">.</span><span class="hl-0">getReader</span><span class="hl-1">();</span><br/><br/><span class="hl-1">    </span><span class="hl-3">while</span><span class="hl-1"> (</span><span class="hl-5">true</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> { </span><span class="hl-6">done</span><span class="hl-1">, </span><span class="hl-6">value</span><span class="hl-1"> } = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">reader</span><span class="hl-1">.</span><span class="hl-0">read</span><span class="hl-1">();</span><br/><span class="hl-1">        </span><span class="hl-3">if</span><span class="hl-1"> (</span><span class="hl-4">done</span><span class="hl-1">) {</span><br/><span class="hl-1">            </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-2">&quot;Done&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">            </span><span class="hl-3">break</span><span class="hl-1">;</span><br/><span class="hl-1">        }</span><br/><span class="hl-1">        </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-4">value</span><span class="hl-1">);</span><br/><span class="hl-1">        </span><span class="hl-3">if</span><span class="hl-1"> (</span><span class="hl-4">value</span><span class="hl-1">) {</span><br/><span class="hl-1">            </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-4">value</span><span class="hl-1">?.</span><span class="hl-4">choices</span><span class="hl-1">[</span><span class="hl-7">0</span><span class="hl-1">]?.</span><span class="hl-4">message</span><span class="hl-1">.</span><span class="hl-4">content</span><span class="hl-1">);</span><br/><span class="hl-1">        }</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">} </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">err</span><span class="hl-1">) {}</span>
</code><button>Copy</button></pre>
<a id="md:constructor-parameters-for-apiclient-configuration" class="tsd-anchor"></a><h2><a href="#md:constructor-parameters-for-apiclient-configuration">Constructor Parameters for APIClient Configuration</a></h2><table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
<th>Default Value</th>
<th>Required / Optional</th>
</tr>
</thead>
<tbody><tr>
<td><code>baseURL</code></td>
<td><code>string</code></td>
<td>Base URL for the API requests.</td>
<td><code>https://api.jamaibase.com</code></td>
<td>optional</td>
</tr>
<tr>
<td><code>maxRetries</code></td>
<td><code>number</code></td>
<td>Maximum number of retries for failed requests.</td>
<td>0</td>
<td>Optional</td>
</tr>
<tr>
<td><code>httpClient</code></td>
<td><code>AxiosInstance</code></td>
<td>Axios instance for making HTTP requests.</td>
<td><code>AxiosInstance</code></td>
<td>Optional</td>
</tr>
<tr>
<td><code>timeout</code></td>
<td><code>number | undefined</code></td>
<td>Timeout for the requests.</td>
<td><code>undefined</code></td>
<td>Optional</td>
</tr>
<tr>
<td><code>apiKey</code></td>
<td><code>string | undefined</code></td>
<td>apiKey.</td>
<td><code>undefined</code></td>
<td>Rqruired if accessing cloud</td>
</tr>
<tr>
<td><code>projectId</code></td>
<td><code>string | undefined</code></td>
<td>projectId.</td>
<td><code>undefined</code></td>
<td>Optional if accessing cloud</td>
</tr>
<tr>
<td><code>dangerouslyAllowBrowser</code></td>
<td><code>boolean</code></td>
<td>Allowing the insecure usage of JamAI API Key on client side.</td>
<td><code>false</code></td>
<td>Optional if accessing cloud</td>
</tr>
</tbody></table>
<a id="md:quick-start-guide" class="tsd-anchor"></a><h2><a href="#md:quick-start-guide">Quick Start Guide</a></h2><a id="md:react-js" class="tsd-anchor"></a><h3><a href="#md:react-js">React JS</a></h3><p>To integrate JamAI into a React application, follow these steps:</p>
<ol start="2">
<li>Install React and Create a New Project</li>
</ol>
<pre><code class="language-bash"><span class="hl-1">    </span><span class="hl-0">npx</span><span class="hl-1"> </span><span class="hl-2">create-react-app</span><span class="hl-1"> </span><span class="hl-2">my-app</span><br/><span class="hl-1">    </span><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">my-app</span>
</code><button>Copy</button></pre>
<ol start="2">
<li>Install jamai</li>
</ol>
<pre><code class="language-bash"><span class="hl-1">    </span><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">jamaibase</span>
</code><button>Copy</button></pre>
<ol start="3">
<li>Create and Use the JamAI Client in your React component</li>
</ol>
<pre><code class="language-javascript"><span class="hl-8">// App.tsx</span><br/><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">useEffect</span><span class="hl-1">, </span><span class="hl-4">useState</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;react&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">PageListTableMetaResponse</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase/resources/gen_tables/tables&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-3">default</span><span class="hl-1"> </span><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-0">Home</span><span class="hl-1">() {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> [</span><span class="hl-6">tableData</span><span class="hl-1">, </span><span class="hl-6">setTableData</span><span class="hl-1">] = </span><span class="hl-0">useState</span><span class="hl-1">&lt;</span><span class="hl-9">PageListTableMetaResponse</span><span class="hl-1">&gt;();</span><br/><br/><span class="hl-1">    </span><span class="hl-0">useEffect</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-0">fetchData</span><span class="hl-1"> = </span><span class="hl-5">async</span><span class="hl-1"> () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">            </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">                </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">NEXT_PUBLIC_JAMAI_BASEURL</span><span class="hl-1">!,</span><br/><span class="hl-1">                </span><span class="hl-4">apiKey:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">                </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">,</span><br/><span class="hl-1">            });</span><br/><span class="hl-1">            </span><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">                </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">response</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">listTables</span><span class="hl-1">({</span><br/><span class="hl-1">                    </span><span class="hl-4">table_type:</span><span class="hl-1"> </span><span class="hl-2">&quot;action&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">                });</span><br/><span class="hl-1">                </span><span class="hl-0">setTableData</span><span class="hl-1">(</span><span class="hl-4">response</span><span class="hl-1">);</span><br/><span class="hl-1">            } </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">err</span><span class="hl-1">: </span><span class="hl-9">any</span><span class="hl-1">) {</span><br/><span class="hl-1">                </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-4">err</span><span class="hl-1">.</span><span class="hl-4">message</span><span class="hl-1">);</span><br/><span class="hl-1">            }</span><br/><span class="hl-1">            </span><span class="hl-0">fetchData</span><span class="hl-1">();</span><br/><span class="hl-1">        };</span><br/><span class="hl-1">    }, []);</span><br/><br/><span class="hl-1">    </span><span class="hl-3">return</span><span class="hl-1"> (</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><span class="hl-1">List of Tables</span><span class="hl-10">&lt;/</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-5">{</span><span class="hl-4">tableData</span><span class="hl-12">?.</span><span class="hl-4">items</span><span class="hl-12">.</span><span class="hl-0">map</span><span class="hl-12">((</span><span class="hl-4">table</span><span class="hl-12">) </span><span class="hl-5">=&gt;</span><span class="hl-12"> (</span><br/><span class="hl-12">                    </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-12"> </span><span class="hl-13">key</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                        </span><span class="hl-10">&lt;</span><span class="hl-11">h2</span><span class="hl-10">&gt;</span><span class="hl-12">Table ID: </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&lt;/</span><span class="hl-11">h2</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                        </span><span class="hl-10">&lt;</span><span class="hl-11">h3</span><span class="hl-10">&gt;</span><span class="hl-12">Columns:</span><span class="hl-10">&lt;/</span><span class="hl-11">h3</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                        </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                            </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">cols</span><span class="hl-12">.</span><span class="hl-0">map</span><span class="hl-12">((</span><span class="hl-4">column</span><span class="hl-12">) </span><span class="hl-5">=&gt;</span><span class="hl-12"> (</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-12"> </span><span class="hl-13">key</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-12">ID: </span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-12">Data Type: </span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">dtype</span><span class="hl-5">}</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-5">{</span><span class="hl-8">/* Render other properties as needed */</span><span class="hl-5">}</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                            ))</span><span class="hl-5">}</span><br/><span class="hl-12">                        </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                    </span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                ))</span><span class="hl-5">}</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    );</span><br/><span class="hl-1">}</span><br/>
</code><button>Copy</button></pre>
<a id="md:next-js" class="tsd-anchor"></a><h3><a href="#md:next-js">Next JS</a></h3><p>To integrate JamAI into a Next.js application, follow these steps:</p>
<ol>
<li>Install Next.js and Create a New Project</li>
</ol>
<pre><code class="language-bash"><span class="hl-1">    </span><span class="hl-0">npx</span><span class="hl-1"> </span><span class="hl-2">create-next-app@latest</span><br/><span class="hl-1">    </span><span class="hl-0">cd</span><span class="hl-1"> (path/to/your/app)</span>
</code><button>Copy</button></pre>
<ol start="2">
<li>Install jamaibase</li>
</ol>
<pre><code class="language-bash"><span class="hl-1">    </span><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">jamaibase</span>
</code><button>Copy</button></pre>
<ol start="3">
<li><p>Generate API Key -&gt; Go to <a href="https://cloud.jamaibase.com/organization/secrets">cloud.jamaibase.com/organization/secrets</a> and collect API Key</p>
</li>
<li><p>Collect Project ID -&gt; Go to <a href="https://cloud.jamaibase.com/project">cloud.jamaibase.com/project</a> and copy the project id.</p>
</li>
<li><p>Create <code>.env.local</code> file at the root of your project and add the keys:</p>
</li>
</ol>
<pre><code class="language-javascript"><span class="hl-6">NEXT_PUBLIC_JAMAI_BASEURL</span><span class="hl-1">=</span><span class="hl-14">http</span><span class="hl-1">:</span><span class="hl-8">//api.jamaibase.com/</span><br/><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">=</span><span class="hl-4">your_jamai_sk_api_key</span><br/><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">=</span><span class="hl-4">your_proj_id</span>
</code><button>Copy</button></pre>
<ol start="6">
<li>Create a route handler to fetch data.</li>
</ol>
<pre><code class="language-javascript"><span class="hl-8">// src/app/api/list-tables/route.ts</span><br/><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-4">PageListTableMetaResponse</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">TableTypes</span><span class="hl-1">,</span><br/><span class="hl-1">} </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase/resources/gen_tables/tables&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">NextRequest</span><span class="hl-1">, </span><span class="hl-4">NextResponse</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;next/server&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">NEXT_PUBLIC_JAMAI_BASEURL</span><span class="hl-1">!,</span><br/><span class="hl-1">    </span><span class="hl-4">apiKey:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-5">async</span><span class="hl-1"> </span><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-0">GET</span><span class="hl-1">(</span><span class="hl-4">request</span><span class="hl-1">: </span><span class="hl-9">NextRequest</span><span class="hl-1">) {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">searchParams</span><span class="hl-1"> = </span><span class="hl-4">request</span><span class="hl-1">.</span><span class="hl-4">nextUrl</span><span class="hl-1">.</span><span class="hl-4">searchParams</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">tableType</span><span class="hl-1"> = (</span><span class="hl-4">searchParams</span><span class="hl-1">.</span><span class="hl-0">get</span><span class="hl-1">(</span><span class="hl-2">&quot;type&quot;</span><span class="hl-1">) || </span><span class="hl-2">&quot;action&quot;</span><span class="hl-1">) </span><span class="hl-3">as</span><span class="hl-1"> </span><span class="hl-9">TableTypes</span><span class="hl-1">;</span><br/><br/><span class="hl-1">    </span><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-4">data</span><span class="hl-1">: </span><span class="hl-9">PageListTableMetaResponse</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">listTables</span><span class="hl-1">({</span><br/><span class="hl-1">            </span><span class="hl-4">table_type:</span><span class="hl-1"> </span><span class="hl-4">tableType</span><span class="hl-1">,</span><br/><span class="hl-1">        });</span><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-4">NextResponse</span><span class="hl-1">.</span><span class="hl-0">json</span><span class="hl-1">(</span><span class="hl-4">data</span><span class="hl-1">);</span><br/><span class="hl-1">    } </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">error</span><span class="hl-1">: </span><span class="hl-9">any</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-2">&quot;Error fetching tables:&quot;</span><span class="hl-1">, </span><span class="hl-4">error</span><span class="hl-1">.</span><span class="hl-4">response</span><span class="hl-1">);</span><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-4">NextResponse</span><span class="hl-1">.</span><span class="hl-0">json</span><span class="hl-1">(</span><br/><span class="hl-1">            { </span><span class="hl-4">message:</span><span class="hl-1"> </span><span class="hl-2">&quot;Internal server error&quot;</span><span class="hl-1"> },</span><br/><span class="hl-1">            { </span><span class="hl-4">status:</span><span class="hl-1"> </span><span class="hl-7">500</span><span class="hl-1"> }</span><br/><span class="hl-1">        );</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">}</span><br/>
</code><button>Copy</button></pre>
<ol start="7">
<li>Then, in your Next.js component, you can fetch this data from the API route and render it:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-8">// src/app/page.tsx</span><br/><br/><span class="hl-2">&quot;use client&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">PageListTableMetaResponse</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase/resources/gen_tables/tables&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">ChangeEvent</span><span class="hl-1">, </span><span class="hl-4">useEffect</span><span class="hl-1">, </span><span class="hl-4">useState</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;react&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-3">default</span><span class="hl-1"> </span><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-0">Home</span><span class="hl-1">() {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> [</span><span class="hl-6">tableData</span><span class="hl-1">, </span><span class="hl-6">setTableData</span><span class="hl-1">] = </span><span class="hl-0">useState</span><span class="hl-1">&lt;</span><span class="hl-9">PageListTableMetaResponse</span><span class="hl-1">&gt;();</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> [</span><span class="hl-6">tableType</span><span class="hl-1">, </span><span class="hl-6">setTableType</span><span class="hl-1">] = </span><span class="hl-0">useState</span><span class="hl-1">(</span><span class="hl-2">&quot;action&quot;</span><span class="hl-1">);</span><br/><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-0">handleTableTypeChange</span><span class="hl-1"> = (</span><span class="hl-4">e</span><span class="hl-1">: </span><span class="hl-9">ChangeEvent</span><span class="hl-1">&lt;</span><span class="hl-9">HTMLSelectElement</span><span class="hl-1">&gt;) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-0">setTableType</span><span class="hl-1">(</span><span class="hl-4">e</span><span class="hl-1">.</span><span class="hl-4">target</span><span class="hl-1">.</span><span class="hl-4">value</span><span class="hl-1">);</span><br/><span class="hl-1">    };</span><br/><br/><span class="hl-1">    </span><span class="hl-0">useEffect</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-0">fetchData</span><span class="hl-1"> = </span><span class="hl-5">async</span><span class="hl-1"> () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">            </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-2">&quot;fetch data&quot;</span><span class="hl-1">);</span><br/><span class="hl-1">            </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">response</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-0">fetch</span><span class="hl-1">(</span><span class="hl-2">`/api/list-tables?type=</span><span class="hl-5">${</span><span class="hl-4">tableType</span><span class="hl-5">}</span><span class="hl-2">`</span><span class="hl-1">);</span><br/><span class="hl-1">            </span><span class="hl-3">if</span><span class="hl-1"> (</span><span class="hl-4">response</span><span class="hl-1">.</span><span class="hl-4">ok</span><span class="hl-1">) {</span><br/><span class="hl-1">                </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">data</span><span class="hl-1">: </span><span class="hl-9">PageListTableMetaResponse</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">response</span><span class="hl-1">.</span><span class="hl-0">json</span><span class="hl-1">();</span><br/><span class="hl-1">                </span><span class="hl-0">setTableData</span><span class="hl-1">(</span><span class="hl-4">data</span><span class="hl-1">);</span><br/><span class="hl-1">            } </span><span class="hl-3">else</span><span class="hl-1"> {</span><br/><span class="hl-1">                </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-2">&quot;Failed to fetch data:&quot;</span><span class="hl-1">, </span><span class="hl-4">response</span><span class="hl-1">.</span><span class="hl-4">statusText</span><span class="hl-1">);</span><br/><span class="hl-1">            }</span><br/><span class="hl-1">        };</span><br/><span class="hl-1">        </span><span class="hl-0">fetchData</span><span class="hl-1">();</span><br/><span class="hl-1">    }, [</span><span class="hl-4">tableType</span><span class="hl-1">]);</span><br/><span class="hl-1">    </span><span class="hl-3">return</span><span class="hl-1"> (</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">main</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;flex min-h-screen flex-col  p-24&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;max-w-sm mx-auto my-10 p-5 bg-white rounded-lg shadow-md&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;block text-sm font-medium text-gray-700 mb-2&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    Choose Table Type:</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">select</span><br/><span class="hl-1">                    </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">tableType</span><span class="hl-5">}</span><br/><span class="hl-1">                    </span><span class="hl-13">onChange</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">handleTableTypeChange</span><span class="hl-5">}</span><br/><span class="hl-1">                    </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-black&quot;</span><br/><span class="hl-1">                </span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;action&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Action</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;chat&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Chat</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;knowledge&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Knowledge</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">select</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;space-y-6&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">h1</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;text-4xl&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">List of Tables</span><span class="hl-10">&lt;/</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">table</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;min-w-full divide-y divide-gray-200&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">thead</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;bg-gray-50&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                Table ID</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                Columns</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                Column Type</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                Number of Rows</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;/</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;/</span><span class="hl-11">thead</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">tbody</span><span class="hl-1"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;bg-white divide-y divide-gray-300 text-black&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-5">{</span><span class="hl-4">tableData</span><span class="hl-12">?.</span><span class="hl-4">items</span><span class="hl-12">.</span><span class="hl-0">map</span><span class="hl-12">((</span><span class="hl-4">table</span><span class="hl-12">) </span><span class="hl-5">=&gt;</span><span class="hl-12"> (</span><br/><span class="hl-12">                            </span><span class="hl-10">&lt;</span><span class="hl-11">tr</span><span class="hl-12"> </span><span class="hl-13">key</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-4 whitespace-nowrap&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-4 whitespace-nowrap&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;space-y-2&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                        </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">cols</span><span class="hl-12">.</span><span class="hl-0">map</span><span class="hl-12">((</span><span class="hl-4">column</span><span class="hl-12">) </span><span class="hl-5">=&gt;</span><span class="hl-12"> (</span><br/><span class="hl-12">                                            </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;&quot;</span><span class="hl-12"> </span><span class="hl-13">key</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                                </span><span class="hl-10">&lt;</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-12">: </span><span class="hl-10">&lt;/</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                                </span><span class="hl-10">&lt;</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">dtype</span><span class="hl-5">}</span><span class="hl-10">&lt;/</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                            </span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                        ))</span><span class="hl-5">}</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-4 whitespace-nowrap&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;space-y-2&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                        </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">cols</span><span class="hl-12">.</span><span class="hl-0">map</span><span class="hl-12">((</span><span class="hl-4">column</span><span class="hl-12">) </span><span class="hl-5">=&gt;</span><span class="hl-12"> (</span><br/><span class="hl-12">                                            </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;&quot;</span><span class="hl-12"> </span><span class="hl-13">key</span><span class="hl-1">=</span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">id</span><span class="hl-5">}</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                                </span><span class="hl-10">&lt;</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                                    </span><span class="hl-5">{</span><span class="hl-4">column</span><span class="hl-12">.</span><span class="hl-4">gen_config</span><br/><span class="hl-12">                                                        </span><span class="hl-1">?</span><span class="hl-12"> </span><span class="hl-2">&quot;Output&quot;</span><br/><span class="hl-12">                                                        </span><span class="hl-1">:</span><span class="hl-12"> </span><span class="hl-2">&quot;Input&quot;</span><span class="hl-5">}</span><br/><span class="hl-12">                                                </span><span class="hl-10">&lt;/</span><span class="hl-11">span</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                            </span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                        ))</span><span class="hl-5">}</span><br/><span class="hl-12">                                    </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-12"> </span><span class="hl-13">className</span><span class="hl-1">=</span><span class="hl-2">&quot;px-6 py-4 whitespace-nowrap&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                                    </span><span class="hl-5">{</span><span class="hl-4">table</span><span class="hl-12">.</span><span class="hl-4">num_rows</span><span class="hl-5">}</span><br/><span class="hl-12">                                </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-12">                        ))</span><span class="hl-5">}</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;/</span><span class="hl-11">tbody</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">table</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    );</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<ol start="8">
<li>Start the app</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev</span>
</code><button>Copy</button></pre>
<a id="md:sveltekit" class="tsd-anchor"></a><h3><a href="#md:sveltekit">SvelteKit</a></h3><ol>
<li>Setup SvelteKit Project</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">create</span><span class="hl-1"> </span><span class="hl-2">svelte@latest</span><span class="hl-1"> </span><span class="hl-2">jamai-example-app</span><br/><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">jamai-example-app</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span>
</code><button>Copy</button></pre>
<ol start="2">
<li>Install JamAI</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">jamaibase</span>
</code><button>Copy</button></pre>
<ol start="3">
<li><p>Generate API Key -&gt; Go to <a href="https://cloud.jamaibase.com/organization/secrets">cloud.jamaibase.com/organization/secrets</a> and collect API Key</p>
</li>
<li><p>Collect Project ID -&gt; Go to <a href="https://cloud.jamaibase.com/project">cloud.jamaibase.com/project</a> and copy the project id.</p>
</li>
<li><p>Create <code>.env</code> file at the root of your project and add the keys:</p>
</li>
</ol>
<pre><code class="language-javascript"><span class="hl-6">PUBLIC_JAMAI_BASEURL</span><span class="hl-1">=</span><span class="hl-14">http</span><span class="hl-1">:</span><span class="hl-8">//api.jamaibase.com/</span><br/><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">=</span><span class="hl-4">your_jamai_sk_api_key</span><br/><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">=</span><span class="hl-4">your_proj_id</span>
</code><button>Copy</button></pre>
<ol start="6">
<li>reate a new file src/routes/create-table/+page.svelte and add the following code:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-10">&lt;</span><span class="hl-11">script</span><span class="hl-10">&gt;</span><br/><span class="hl-1">   </span><span class="hl-10">&lt;</span><span class="hl-11">script</span><span class="hl-1"> </span><span class="hl-13">lang</span><span class="hl-1">=</span><span class="hl-2">&quot;ts&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    export let form;</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">script</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-10">&lt;</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><span class="hl-1">Create Action Table</span><span class="hl-10">&lt;/</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-1">    </span><span class="hl-5">{</span><span class="hl-12">#</span><span class="hl-4">if</span><span class="hl-12"> </span><span class="hl-4">form</span><span class="hl-12">?.</span><span class="hl-4">success</span><span class="hl-5">}</span><br/><span class="hl-1">        &lt;!-- this message is ephemeral; it exists because the page was rendered in</span><br/><span class="hl-1">           response to a form submission. it will vanish if the user reloads --&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-1">Successfully created the table.</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-5">{</span><span class="hl-1">/</span><span class="hl-4">if</span><span class="hl-5">}</span><br/><span class="hl-1">    </span><span class="hl-5">{</span><span class="hl-12">#</span><span class="hl-4">if</span><span class="hl-12"> </span><span class="hl-1">!</span><span class="hl-4">form</span><span class="hl-12">?.</span><span class="hl-4">success</span><span class="hl-5">}</span><br/><span class="hl-1">        &lt;!-- this message is ephemeral; it exists because the page was rendered in</span><br/><span class="hl-1">           response to a form submission. it will vanish if the user reloads --&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-1">Sorry, something went wrong!</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-5">{</span><span class="hl-1">/</span><span class="hl-4">if</span><span class="hl-5">}</span><br/><br/><span class="hl-1">    </span><span class="hl-10">&lt;</span><span class="hl-11">form</span><span class="hl-1"> </span><span class="hl-13">method</span><span class="hl-1">=</span><span class="hl-2">&quot;POST&quot;</span><span class="hl-1"> </span><span class="hl-13">action</span><span class="hl-1">=</span><span class="hl-2">&quot;/create-table&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            Table ID</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">input</span><span class="hl-1"> </span><span class="hl-13">name</span><span class="hl-1">=</span><span class="hl-2">&quot;table_id&quot;</span><span class="hl-1"> </span><span class="hl-10">/&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            Column Name</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">input</span><span class="hl-1"> </span><span class="hl-13">name</span><span class="hl-1">=</span><span class="hl-2">&quot;column_name&quot;</span><span class="hl-1"> </span><span class="hl-10">/&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            Columng Data Type</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">select</span><span class="hl-1"> </span><span class="hl-13">name</span><span class="hl-1">=</span><span class="hl-2">&quot;column_d_type&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;str&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">str</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;int&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">int</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;float&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">float</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-2">&quot;bool&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">bool</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">select</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">button</span><span class="hl-1"> </span><span class="hl-13">type</span><span class="hl-1">=</span><span class="hl-2">&quot;submit&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Create</span><span class="hl-10">&lt;/</span><span class="hl-11">button</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;/</span><span class="hl-11">form</span><span class="hl-10">&gt;</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">main</span><span class="hl-10">&gt;</span>
</code><button>Copy</button></pre>
<ol start="7">
<li>Create a <a href="https://kit.svelte.dev/docs/form-actions">form action</a> in the <code>+page.server.ts</code> file in the same path to accept post data from the form.</li>
</ol>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">fail</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;@sveltejs/kit&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">PUBLIC_JAMAI_URL</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;$env/static/public&quot;</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">JAMAI_API_KEY</span><span class="hl-1">, </span><span class="hl-4">JAMAI_PROJECT_ID</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;$env/static/private&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-6">PUBLIC_JAMAI_URL</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">apiKey:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">actions</span><span class="hl-1"> = {</span><br/><span class="hl-1">    </span><span class="hl-0">default</span><span class="hl-4">:</span><span class="hl-1"> </span><span class="hl-5">async</span><span class="hl-1"> ({ </span><span class="hl-4">request</span><span class="hl-1"> }) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><br/><span class="hl-1">        </span><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-9">DTypes</span><span class="hl-1"> = </span><span class="hl-2">&quot;float&quot;</span><span class="hl-1"> | </span><span class="hl-2">&quot;int&quot;</span><span class="hl-1"> | </span><span class="hl-2">&quot;bool&quot;</span><span class="hl-1"> | </span><span class="hl-2">&quot;str&quot;</span><span class="hl-1"> | </span><span class="hl-9">undefined</span><span class="hl-1">;</span><br/><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">data</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">request</span><span class="hl-1">.</span><span class="hl-0">formData</span><span class="hl-1">();</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">tableId</span><span class="hl-1"> = </span><span class="hl-4">data</span><span class="hl-1">.</span><span class="hl-0">get</span><span class="hl-1">(</span><span class="hl-2">&quot;table_id&quot;</span><span class="hl-1">)?.</span><span class="hl-0">toString</span><span class="hl-1">();</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">columnName</span><span class="hl-1"> = </span><span class="hl-4">data</span><span class="hl-1">.</span><span class="hl-0">get</span><span class="hl-1">(</span><span class="hl-2">&quot;column_name&quot;</span><span class="hl-1">)?.</span><span class="hl-0">toString</span><span class="hl-1">();</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">columnDType</span><span class="hl-1"> = </span><span class="hl-4">data</span><span class="hl-1">.</span><span class="hl-0">get</span><span class="hl-1">(</span><span class="hl-2">&quot;column_d_type&quot;</span><span class="hl-1">)?.</span><span class="hl-0">toString</span><span class="hl-1">() </span><span class="hl-3">as</span><span class="hl-1"> </span><span class="hl-9">DTypes</span><span class="hl-1">;</span><br/><br/><span class="hl-1">        </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-2">&quot;data: &quot;</span><span class="hl-1">, </span><span class="hl-4">data</span><span class="hl-1">);</span><br/><span class="hl-1">        </span><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">            </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">response</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">createActionTable</span><span class="hl-1">({</span><br/><span class="hl-1">                </span><span class="hl-4">id:</span><span class="hl-1"> </span><span class="hl-4">tableId</span><span class="hl-1">!,</span><br/><span class="hl-1">                </span><span class="hl-4">cols:</span><span class="hl-1"> [{ </span><span class="hl-4">id:</span><span class="hl-1"> </span><span class="hl-4">columnName</span><span class="hl-1">!, </span><span class="hl-4">dtype:</span><span class="hl-1"> </span><span class="hl-4">columnDType</span><span class="hl-1">! }],</span><br/><span class="hl-1">            });</span><br/><br/><span class="hl-1">            </span><span class="hl-3">return</span><span class="hl-1"> { </span><span class="hl-4">success:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-4">data:</span><span class="hl-1"> </span><span class="hl-4">response</span><span class="hl-1"> };</span><br/><span class="hl-1">        } </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">error</span><span class="hl-1">) {</span><br/><span class="hl-1">            </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-4">error</span><span class="hl-1">);</span><br/><span class="hl-1">            </span><span class="hl-0">fail</span><span class="hl-1">(</span><span class="hl-7">500</span><span class="hl-1">, { </span><span class="hl-4">message:</span><span class="hl-1"> </span><span class="hl-2">&quot;Something went wrong!&quot;</span><span class="hl-1"> });</span><br/><span class="hl-1">        }</span><br/><span class="hl-1">    },</span><br/><span class="hl-1">};</span>
</code><button>Copy</button></pre>
<ol start="8">
<li>Start the app</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev</span>
</code><button>Copy</button></pre>
<a id="md:nuxt" class="tsd-anchor"></a><h3><a href="#md:nuxt">Nuxt</a></h3><ol>
<li>Setup Nuxt Project</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npx</span><span class="hl-1"> </span><span class="hl-2">nuxi</span><span class="hl-1"> </span><span class="hl-2">init</span><span class="hl-1"> </span><span class="hl-2">jamai-example-app</span><br/><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">jamai-example-app</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span>
</code><button>Copy</button></pre>
<ol start="2">
<li>Install JamAI</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">i</span><span class="hl-1"> </span><span class="hl-2">jamaibase</span>
</code><button>Copy</button></pre>
<ol start="3">
<li>Collect the secrets:</li>
</ol>
<ul>
<li><p>Generate API Key -&gt; Go to <a href="https://cloud.jamaibase.com/organization/secrets">cloud.jamaibase.com/organization/secrets</a> and collect API Key</p>
</li>
<li><p>Collect Project ID -&gt; Go to <a href="https://cloud.jamaibase.com/project">cloud.jamaibase.com/project</a> and copy the project id.</p>
</li>
</ul>
<ol start="4">
<li>Create <code>.env</code> file at the root of your project and add the keys:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-6">PUBLIC_JAMAI_BASEURL</span><span class="hl-1">=</span><span class="hl-14">http</span><span class="hl-1">:</span><span class="hl-8">//api.jamaibase.com/</span><br/><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">=</span><span class="hl-4">your_jamai_sk_api_key</span><br/><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">=</span><span class="hl-4">your_proj_id</span>
</code><button>Copy</button></pre>
<ol start="5">
<li>In the <code>nuxt.config.ts</code> file, add runtimeConfig to use the environment variables:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-14">runtimeConfig</span><span class="hl-1">: {</span><br/><span class="hl-1">        </span><span class="hl-14">JAMAI_API_KEY</span><span class="hl-1">: </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-14">public</span><span class="hl-1">: {</span><br/><span class="hl-1">            </span><span class="hl-14">JAMAI_BASEURL</span><span class="hl-1">: </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_BASEURL</span><span class="hl-1">,</span><br/><span class="hl-1">            </span><span class="hl-14">JAMAI_PROJECT_ID</span><span class="hl-1">: </span><span class="hl-4">process</span><span class="hl-1">.</span><span class="hl-4">env</span><span class="hl-1">.</span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1">,</span><br/><span class="hl-1">        },</span><br/><span class="hl-1">    },</span>
</code><button>Copy</button></pre>
<ol start="6">
<li>create a new file /pages/index.vue and add the following code:</li>
</ol>
<pre><code class="language-html"><span class="hl-10">&lt;</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">class</span><span class="hl-1">=</span><span class="hl-15">&quot;container&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><span class="hl-1">Choose Table Type:</span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">select</span><span class="hl-1"> </span><span class="hl-13">v-model</span><span class="hl-1">=</span><span class="hl-15">&quot;tableType&quot;</span><span class="hl-1"> </span><span class="hl-13">@change</span><span class="hl-1">=</span><span class="hl-15">&quot;fetchTables&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;action&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Action</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;chat&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Chat</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;knowledge&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Knowledge</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">select</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">class</span><span class="hl-1">=</span><span class="hl-15">&quot;container&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><span class="hl-1">List of Tables</span><span class="hl-10">&lt;/</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">table</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">thead</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><span class="hl-1">Table ID</span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><span class="hl-1">Columns</span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><span class="hl-1">Column Type</span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><span class="hl-1">Number of Rows</span><span class="hl-10">&lt;/</span><span class="hl-11">th</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;/</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">thead</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">tbody</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">tr</span><span class="hl-1"> </span><span class="hl-13">v-for</span><span class="hl-1">=</span><span class="hl-15">&quot;table in tableData.items&quot;</span><span class="hl-1"> </span><span class="hl-13">:key</span><span class="hl-1">=</span><span class="hl-15">&quot;table.id&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><span class="hl-1">{{ table.id }}</span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-1"> </span><span class="hl-13">v-for</span><span class="hl-1">=</span><span class="hl-15">&quot;column in table.cols&quot;</span><span class="hl-1"> </span><span class="hl-13">:key</span><span class="hl-1">=</span><span class="hl-15">&quot;column.id&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">{{ column.id }}: {{ column.dtype }}</span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                                </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-1"> </span><span class="hl-13">v-for</span><span class="hl-1">=</span><span class="hl-15">&quot;column in table.cols&quot;</span><span class="hl-1"> </span><span class="hl-13">:key</span><span class="hl-1">=</span><span class="hl-15">&quot;column.id&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">{{ column.gen_config ? &quot;Output&quot; : &quot;Input&quot; }}</span><span class="hl-10">&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                            </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                        </span><span class="hl-10">&lt;</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><span class="hl-1">{{ table.num_rows }}</span><span class="hl-10">&lt;/</span><span class="hl-11">td</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;/</span><span class="hl-11">tr</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">tbody</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">table</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;/</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-10">&lt;</span><span class="hl-11">script</span><span class="hl-12"> </span><span class="hl-13">setup</span><span class="hl-10">&gt;</span><br/><span class="hl-12">    </span><span class="hl-3">import</span><span class="hl-12"> { </span><span class="hl-4">ref</span><span class="hl-12">, </span><span class="hl-4">onMounted</span><span class="hl-12"> } </span><span class="hl-3">from</span><span class="hl-12"> </span><span class="hl-2">&quot;vue&quot;</span><span class="hl-12">;</span><br/><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">tableType</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">(</span><span class="hl-2">&quot;action&quot;</span><span class="hl-12">);</span><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">tableData</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">({ </span><span class="hl-4">items:</span><span class="hl-12"> [] });</span><br/><br/><span class="hl-12">    </span><span class="hl-5">async</span><span class="hl-12"> </span><span class="hl-5">function</span><span class="hl-12"> </span><span class="hl-0">fetchTables</span><span class="hl-12">() {</span><br/><span class="hl-12">        </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">response</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-3">await</span><span class="hl-12"> </span><span class="hl-0">$fetch</span><span class="hl-12">(</span><span class="hl-2">`/api/list-tables?type=</span><span class="hl-5">${</span><span class="hl-4">tableType</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-5">}</span><span class="hl-2">`</span><span class="hl-12">);</span><br/><br/><span class="hl-12">        </span><span class="hl-3">if</span><span class="hl-12"> (</span><span class="hl-4">response</span><span class="hl-12">.</span><span class="hl-4">success</span><span class="hl-12">) {</span><br/><span class="hl-12">            </span><span class="hl-4">tableData</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-4">response</span><span class="hl-12">.</span><span class="hl-4">data</span><span class="hl-12">;</span><br/><span class="hl-12">        } </span><span class="hl-3">else</span><span class="hl-12"> {</span><br/><span class="hl-12">            </span><span class="hl-4">console</span><span class="hl-12">.</span><span class="hl-0">error</span><span class="hl-12">(</span><span class="hl-2">&quot;Failed to fetch data&quot;</span><span class="hl-12">);</span><br/><span class="hl-12">        }</span><br/><span class="hl-12">    }</span><br/><br/><span class="hl-12">    </span><span class="hl-0">onMounted</span><span class="hl-12">(() </span><span class="hl-5">=&gt;</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-0">fetchTables</span><span class="hl-12">();</span><br/><span class="hl-12">    });</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">script</span><span class="hl-10">&gt;</span>
</code><button>Copy</button></pre>
<ol start="7">
<li>Add the following CSS to make the table look better:</li>
</ol>
<pre><code class="language-css"><br/><span class="hl-1">&lt;</span><span class="hl-16">style</span><span class="hl-1"> scoped&gt;</span><br/><span class="hl-8">/* Main layout styling */</span><br/><span class="hl-16">main</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">display</span><span class="hl-1">: </span><span class="hl-17">flex</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">flex-direction</span><span class="hl-1">: </span><span class="hl-17">column</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">min-height</span><span class="hl-1">: </span><span class="hl-7">100vh</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">24px</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">/* Container styling */</span><br/><span class="hl-16">.container</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">max-width</span><span class="hl-1">: </span><span class="hl-7">600px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">margin</span><span class="hl-1">: </span><span class="hl-7">40px</span><span class="hl-1"> </span><span class="hl-17">auto</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">20px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">background-color</span><span class="hl-1">: </span><span class="hl-17">#fff</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">border-radius</span><span class="hl-1">: </span><span class="hl-7">8px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">box-shadow</span><span class="hl-1">: </span><span class="hl-7">0</span><span class="hl-1"> </span><span class="hl-7">4px</span><span class="hl-1"> </span><span class="hl-7">8px</span><span class="hl-1"> </span><span class="hl-0">rgba</span><span class="hl-1">(</span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-7">0.1</span><span class="hl-1">);</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">/* Label and select input styling */</span><br/><span class="hl-16">label</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">display</span><span class="hl-1">: </span><span class="hl-17">block</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">margin-bottom</span><span class="hl-1">: </span><span class="hl-7">8px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">font-size</span><span class="hl-1">: </span><span class="hl-7">14px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">font-weight</span><span class="hl-1">: </span><span class="hl-7">500</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">color</span><span class="hl-1">: </span><span class="hl-17">#333</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-16">select</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">display</span><span class="hl-1">: </span><span class="hl-17">block</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">width</span><span class="hl-1">: </span><span class="hl-7">100%</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">8px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">border</span><span class="hl-1">: </span><span class="hl-7">1px</span><span class="hl-1"> </span><span class="hl-17">solid</span><span class="hl-1"> </span><span class="hl-17">#ccc</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">border-radius</span><span class="hl-1">: </span><span class="hl-7">4px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">background-color</span><span class="hl-1">: </span><span class="hl-17">#fff</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">margin-bottom</span><span class="hl-1">: </span><span class="hl-7">20px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">font-size</span><span class="hl-1">: </span><span class="hl-7">14px</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">/* Table styling */</span><br/><span class="hl-16">table</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">width</span><span class="hl-1">: </span><span class="hl-7">100%</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">border-collapse</span><span class="hl-1">: </span><span class="hl-17">collapse</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">margin-top</span><span class="hl-1">: </span><span class="hl-7">20px</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-16">th</span><span class="hl-1">,</span><br/><span class="hl-16">td</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">12px</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">border</span><span class="hl-1">: </span><span class="hl-7">1px</span><span class="hl-1"> </span><span class="hl-17">solid</span><span class="hl-1"> </span><span class="hl-17">#ddd</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">text-align</span><span class="hl-1">: </span><span class="hl-17">left</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-16">th</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">background-color</span><span class="hl-1">: </span><span class="hl-17">#f4f4f4</span><span class="hl-1">;</span><br/><span class="hl-1">    </span><span class="hl-13">font-weight</span><span class="hl-1">: </span><span class="hl-7">600</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-16">tr:nth-child</span><span class="hl-1">(even) {</span><br/><span class="hl-1">    </span><span class="hl-13">background-color</span><span class="hl-1">: </span><span class="hl-17">#f9f9f9</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-16">tr:hover</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-13">background-color</span><span class="hl-1">: </span><span class="hl-17">#f1f1f1</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">/* Responsive styling */</span><br/><span class="hl-3">@media</span><span class="hl-1"> (</span><span class="hl-13">max-width</span><span class="hl-1">: </span><span class="hl-7">600px</span><span class="hl-1">) {</span><br/><span class="hl-1">    </span><span class="hl-16">.container</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">10px</span><span class="hl-1">;</span><br/><span class="hl-1">    }</span><br/><br/><span class="hl-1">    </span><span class="hl-16">table</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-16">th</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-16">td</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-13">font-size</span><span class="hl-1">: </span><span class="hl-7">12px</span><span class="hl-1">;</span><br/><span class="hl-1">    }</span><br/><br/><span class="hl-1">    </span><span class="hl-16">th</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-16">td</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-13">padding</span><span class="hl-1">: </span><span class="hl-7">8px</span><span class="hl-1">;</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">}</span><br/><span class="hl-1">&lt;/</span><span class="hl-16">style</span><span class="hl-1">&gt;</span>
</code><button>Copy</button></pre>
<ol start="8">
<li>create a server handler at <code>server/api/list-tables.js</code> and add the following code:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">public</span><span class="hl-1">: { </span><span class="hl-6">JAMAI_BASEURL</span><span class="hl-1">, </span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1"> }</span><br/><span class="hl-1">} = </span><span class="hl-0">useRuntimeConfig</span><span class="hl-1">();</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_BASEURL</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">apiKey:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_PROJECT_ID</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-3">default</span><span class="hl-1"> </span><span class="hl-0">defineEventHandler</span><span class="hl-1">(</span><span class="hl-5">async</span><span class="hl-1"> (</span><span class="hl-4">event</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> { </span><span class="hl-6">type</span><span class="hl-1"> = </span><span class="hl-2">&quot;action&quot;</span><span class="hl-1"> } = </span><span class="hl-0">getQuery</span><span class="hl-1">(</span><span class="hl-4">event</span><span class="hl-1">);</span><br/><br/><span class="hl-1">    </span><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">data</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">listTables</span><span class="hl-1">({ </span><span class="hl-4">table_type:</span><span class="hl-1"> </span><span class="hl-4">type</span><span class="hl-1"> });</span><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> { </span><span class="hl-4">success:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-4">data:</span><span class="hl-1"> </span><span class="hl-4">data</span><span class="hl-1"> };</span><br/><span class="hl-1">    } </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">error</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-2">&quot;Error fetching tables:&quot;</span><span class="hl-1">, </span><span class="hl-4">error</span><span class="hl-1">);</span><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> { </span><span class="hl-4">success:</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1">, </span><span class="hl-4">data:</span><span class="hl-1"> </span><span class="hl-2">&quot;Something went wrong&quot;</span><span class="hl-1"> };</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">});</span>
</code><button>Copy</button></pre>
<ol start="9">
<li>Now, create another page (<code>server/api/create-table.js</code>) to create new action table:</li>
</ol>
<pre><code class="language-html"><span class="hl-10">&lt;</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><span class="hl-1">Create Action Table</span><span class="hl-10">&lt;/</span><span class="hl-11">h1</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">v-if</span><span class="hl-1">=</span><span class="hl-15">&quot;form.success&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-1">Successfully created the table.</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-1"> </span><span class="hl-13">v-else-if</span><span class="hl-1">=</span><span class="hl-15">&quot;form.error&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><span class="hl-1">Sorry, something went wrong!</span><span class="hl-10">&lt;/</span><span class="hl-11">p</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">form</span><span class="hl-1"> </span><span class="hl-13">@submit.prevent</span><span class="hl-1">=</span><span class="hl-15">&quot;submitForm&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                Table ID</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">input</span><span class="hl-1"> </span><span class="hl-13">v-model</span><span class="hl-1">=</span><span class="hl-15">&quot;tableId&quot;</span><span class="hl-1"> </span><span class="hl-10">/&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                Column Name</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">input</span><span class="hl-1"> </span><span class="hl-13">v-model</span><span class="hl-1">=</span><span class="hl-15">&quot;columnName&quot;</span><span class="hl-1"> </span><span class="hl-10">/&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                Column Data Type</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">select</span><span class="hl-1"> </span><span class="hl-13">v-model</span><span class="hl-1">=</span><span class="hl-15">&quot;columnDType&quot;</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;str&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">str</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;int&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">int</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;float&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">float</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                    </span><span class="hl-10">&lt;</span><span class="hl-11">option</span><span class="hl-1"> </span><span class="hl-13">value</span><span class="hl-1">=</span><span class="hl-15">&quot;bool&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">bool</span><span class="hl-10">&lt;/</span><span class="hl-11">option</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;/</span><span class="hl-11">select</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">label</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">button</span><span class="hl-1"> </span><span class="hl-13">type</span><span class="hl-1">=</span><span class="hl-15">&quot;submit&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Create</span><span class="hl-10">&lt;/</span><span class="hl-11">button</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">form</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;/</span><span class="hl-11">main</span><span class="hl-10">&gt;</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-10">&lt;</span><span class="hl-11">script</span><span class="hl-12"> </span><span class="hl-13">setup</span><span class="hl-10">&gt;</span><br/><span class="hl-12">    </span><span class="hl-3">import</span><span class="hl-12"> { </span><span class="hl-4">ref</span><span class="hl-12"> } </span><span class="hl-3">from</span><span class="hl-12"> </span><span class="hl-2">&quot;vue&quot;</span><span class="hl-12">;</span><br/><span class="hl-12">    </span><span class="hl-3">import</span><span class="hl-12"> { </span><span class="hl-4">useRouter</span><span class="hl-12"> } </span><span class="hl-3">from</span><span class="hl-12"> </span><span class="hl-2">&quot;vue-router&quot;</span><span class="hl-12">;</span><br/><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">tableId</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">(</span><span class="hl-2">&quot;&quot;</span><span class="hl-12">);</span><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">columnName</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">(</span><span class="hl-2">&quot;&quot;</span><span class="hl-12">);</span><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">columnDType</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">(</span><span class="hl-2">&quot;str&quot;</span><span class="hl-12">);</span><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">form</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">ref</span><span class="hl-12">({ </span><span class="hl-4">success:</span><span class="hl-12"> </span><span class="hl-5">false</span><span class="hl-12">, </span><span class="hl-4">error:</span><span class="hl-12"> </span><span class="hl-5">false</span><span class="hl-12"> });</span><br/><span class="hl-12">    </span><span class="hl-5">const</span><span class="hl-12"> </span><span class="hl-6">router</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">useRouter</span><span class="hl-12">();</span><br/><br/><span class="hl-12">    </span><span class="hl-5">async</span><span class="hl-12"> </span><span class="hl-5">function</span><span class="hl-12"> </span><span class="hl-0">submitForm</span><span class="hl-12">() {</span><br/><span class="hl-12">        </span><span class="hl-5">const</span><span class="hl-12"> { </span><span class="hl-6">data</span><span class="hl-12"> } </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-0">useFetch</span><span class="hl-12">(</span><span class="hl-2">&quot;/api/create-table&quot;</span><span class="hl-12">, {</span><br/><span class="hl-12">            </span><span class="hl-4">method:</span><span class="hl-12"> </span><span class="hl-2">&quot;post&quot;</span><span class="hl-12">,</span><br/><span class="hl-12">            </span><span class="hl-4">headers:</span><span class="hl-12"> {</span><br/><span class="hl-12">                </span><span class="hl-2">&quot;Content-Type&quot;</span><span class="hl-4">:</span><span class="hl-12"> </span><span class="hl-2">&quot;application/json&quot;</span><br/><span class="hl-12">            },</span><br/><span class="hl-12">            </span><span class="hl-4">body:</span><span class="hl-12"> {</span><br/><span class="hl-12">                </span><span class="hl-4">table_id:</span><span class="hl-12"> </span><span class="hl-4">tableId</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">,</span><br/><span class="hl-12">                </span><span class="hl-4">column_name:</span><span class="hl-12"> </span><span class="hl-4">columnName</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">,</span><br/><span class="hl-12">                </span><span class="hl-4">column_d_type:</span><span class="hl-12"> </span><span class="hl-4">columnDType</span><span class="hl-12">.</span><span class="hl-4">value</span><br/><span class="hl-12">            }</span><br/><span class="hl-12">        });</span><br/><br/><span class="hl-12">        </span><span class="hl-3">if</span><span class="hl-12"> (</span><span class="hl-4">data</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">?.</span><span class="hl-4">success</span><span class="hl-12">) {</span><br/><span class="hl-12">            </span><span class="hl-4">form</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">.</span><span class="hl-4">success</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-5">true</span><span class="hl-12">;</span><br/><span class="hl-12">            </span><span class="hl-4">form</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">.</span><span class="hl-4">error</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-5">false</span><span class="hl-12">;</span><br/><span class="hl-12">        } </span><span class="hl-3">else</span><span class="hl-12"> {</span><br/><span class="hl-12">            </span><span class="hl-4">form</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">.</span><span class="hl-4">success</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-5">false</span><span class="hl-12">;</span><br/><span class="hl-12">            </span><span class="hl-4">form</span><span class="hl-12">.</span><span class="hl-4">value</span><span class="hl-12">.</span><span class="hl-4">error</span><span class="hl-12"> </span><span class="hl-1">=</span><span class="hl-12"> </span><span class="hl-5">true</span><span class="hl-12">;</span><br/><span class="hl-12">        }</span><br/><span class="hl-12">    }</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">script</span><span class="hl-10">&gt;</span>
</code><button>Copy</button></pre>
<ol start="10">
<li>Create a server handler at <code>server/api/create-table.js</code> to accept the request and create a new table:</li>
</ol>
<pre><code class="language-javascript"><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-4">JamAI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">&quot;jamaibase&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">public</span><span class="hl-1">: { </span><span class="hl-6">JAMAI_BASEURL</span><span class="hl-1">, </span><span class="hl-6">JAMAI_PROJECT_ID</span><span class="hl-1"> }</span><br/><span class="hl-1">} = </span><span class="hl-0">useRuntimeConfig</span><span class="hl-1">();</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">jamai</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-0">JamAI</span><span class="hl-1">({</span><br/><span class="hl-1">    </span><span class="hl-4">baseURL:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_BASEURL</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">apiKey:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_API_KEY</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-4">projectId:</span><span class="hl-1"> </span><span class="hl-6">JAMAI_PROJECT_ID</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-3">default</span><span class="hl-1"> </span><span class="hl-0">defineEventHandler</span><span class="hl-1">(</span><span class="hl-5">async</span><span class="hl-1"> (</span><span class="hl-4">event</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1">    </span><span class="hl-5">const</span><span class="hl-1"> { </span><span class="hl-6">table_id</span><span class="hl-1">, </span><span class="hl-6">column_name</span><span class="hl-1">, </span><span class="hl-6">column_d_type</span><span class="hl-1"> } = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-0">readBody</span><span class="hl-1">(</span><span class="hl-4">event</span><span class="hl-1">);</span><br/><br/><span class="hl-1">    </span><span class="hl-3">try</span><span class="hl-1"> {</span><br/><span class="hl-1">        </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">response</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">jamai</span><span class="hl-1">.</span><span class="hl-4">table</span><span class="hl-1">.</span><span class="hl-0">createActionTable</span><span class="hl-1">({</span><br/><span class="hl-1">            </span><span class="hl-4">id:</span><span class="hl-1"> </span><span class="hl-4">table_id</span><span class="hl-1">,</span><br/><span class="hl-1">            </span><span class="hl-4">cols:</span><span class="hl-1"> [{ </span><span class="hl-4">id:</span><span class="hl-1"> </span><span class="hl-4">column_name</span><span class="hl-1">, </span><span class="hl-4">dtype:</span><span class="hl-1"> </span><span class="hl-4">column_d_type</span><span class="hl-1"> }]</span><br/><span class="hl-1">        });</span><br/><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> { </span><span class="hl-4">success:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-4">data:</span><span class="hl-1"> </span><span class="hl-4">response</span><span class="hl-1"> };</span><br/><span class="hl-1">    } </span><span class="hl-3">catch</span><span class="hl-1"> (</span><span class="hl-4">error</span><span class="hl-1">) {</span><br/><span class="hl-1">        </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-2">&quot;error: &quot;</span><span class="hl-1">, </span><span class="hl-4">error</span><span class="hl-1">.</span><span class="hl-4">response</span><span class="hl-1">);</span><br/><span class="hl-1">        </span><span class="hl-3">return</span><span class="hl-1"> { </span><span class="hl-4">success:</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1">, </span><span class="hl-4">message:</span><span class="hl-1"> </span><span class="hl-2">&quot;Something went wrong!&quot;</span><span class="hl-1"> };</span><br/><span class="hl-1">    }</span><br/><span class="hl-1">});</span>
</code><button>Copy</button></pre>
<ol start="11">
<li>Finally, create a defalut layout (<code>layouts/defalut.vue</code>) to navigate between pages:</li>
</ol>
<pre><code class="language-html"><span class="hl-10">&lt;</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">nav</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-10">&gt;&lt;</span><span class="hl-18">NuxtLink</span><span class="hl-1"> </span><span class="hl-13">to</span><span class="hl-1">=</span><span class="hl-15">&quot;/&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Home</span><span class="hl-10">&lt;/</span><span class="hl-18">NuxtLink</span><span class="hl-10">&gt;&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-1">                </span><span class="hl-10">&lt;</span><span class="hl-11">li</span><span class="hl-10">&gt;&lt;</span><span class="hl-18">NuxtLink</span><span class="hl-1"> </span><span class="hl-13">to</span><span class="hl-1">=</span><span class="hl-15">&quot;/create-table&quot;</span><span class="hl-10">&gt;</span><span class="hl-1">Create Table</span><span class="hl-10">&lt;/</span><span class="hl-18">NuxtLink</span><span class="hl-10">&gt;&lt;/</span><span class="hl-11">li</span><span class="hl-10">&gt;</span><br/><span class="hl-1">            </span><span class="hl-10">&lt;/</span><span class="hl-11">ul</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;/</span><span class="hl-11">nav</span><span class="hl-10">&gt;</span><br/><span class="hl-1">        </span><span class="hl-10">&lt;</span><span class="hl-11">slot</span><span class="hl-1"> </span><span class="hl-18">/</span><span class="hl-10">&gt;</span><br/><span class="hl-1">    </span><span class="hl-10">&lt;/</span><span class="hl-11">div</span><span class="hl-10">&gt;</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">template</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-10">&lt;</span><span class="hl-11">script</span><span class="hl-12"> </span><span class="hl-13">setup</span><span class="hl-10">&gt;&lt;/</span><span class="hl-11">script</span><span class="hl-10">&gt;</span><br/><br/><span class="hl-10">&lt;</span><span class="hl-11">style</span><span class="hl-12"> </span><span class="hl-13">scoped</span><span class="hl-10">&gt;</span><br/><span class="hl-12">    </span><span class="hl-16">nav</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-13">background-color</span><span class="hl-12">: </span><span class="hl-17">#f8f9fa</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">padding</span><span class="hl-12">: </span><span class="hl-7">10px</span><span class="hl-12">;</span><br/><span class="hl-12">    }</span><br/><br/><span class="hl-12">    </span><span class="hl-16">nav</span><span class="hl-12"> </span><span class="hl-16">ul</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-13">list-style</span><span class="hl-12">: </span><span class="hl-17">none</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">padding</span><span class="hl-12">: </span><span class="hl-7">0</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">margin</span><span class="hl-12">: </span><span class="hl-7">0</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">display</span><span class="hl-12">: </span><span class="hl-17">flex</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">gap</span><span class="hl-12">: </span><span class="hl-7">20px</span><span class="hl-12">;</span><br/><span class="hl-12">    }</span><br/><br/><span class="hl-12">    </span><span class="hl-16">nav</span><span class="hl-12"> </span><span class="hl-16">ul</span><span class="hl-12"> </span><span class="hl-16">li</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-13">display</span><span class="hl-12">: </span><span class="hl-17">inline</span><span class="hl-12">;</span><br/><span class="hl-12">    }</span><br/><br/><span class="hl-12">    </span><span class="hl-16">nav</span><span class="hl-12"> </span><span class="hl-16">a</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-13">text-decoration</span><span class="hl-12">: </span><span class="hl-17">none</span><span class="hl-12">;</span><br/><span class="hl-12">        </span><span class="hl-13">color</span><span class="hl-12">: </span><span class="hl-17">#007bff</span><span class="hl-12">;</span><br/><span class="hl-12">    }</span><br/><br/><span class="hl-12">    </span><span class="hl-16">nav</span><span class="hl-12"> </span><span class="hl-16">a:hover</span><span class="hl-12"> {</span><br/><span class="hl-12">        </span><span class="hl-13">text-decoration</span><span class="hl-12">: </span><span class="hl-17">underline</span><span class="hl-12">;</span><br/><span class="hl-12">    }</span><br/><span class="hl-10">&lt;/</span><span class="hl-11">style</span><span class="hl-10">&gt;</span>
</code><button>Copy</button></pre>
<ol start="12">
<li>Start the app</li>
</ol>
<pre><code class="language-bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev</span>
</code><button>Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:jamai-base"><span>JamAI <wbr/>Base</span></a><ul><li><a href="#md:overview"><span>Overview</span></a></li><li><a href="#md:key-benefits"><span>Key <wbr/>Benefits</span></a></li><li><ul><li><a href="#md:ease-of-use"><span>Ease of <wbr/>Use</span></a></li><li><a href="#md:scalability"><span>Scalability</span></a></li><li><a href="#md:flexibility"><span>Flexibility</span></a></li><li><a href="#md:declarative-paradigm"><span>Declarative <wbr/>Paradigm</span></a></li><li><a href="#md:innovative-rag-techniques"><span>Innovative RAG <wbr/>Techniques</span></a></li></ul></li><li><a href="#md:key-features"><span>Key <wbr/>Features</span></a></li><li><ul><li><a href="#md:generative-tables"><span>Generative <wbr/>Tables</span></a></li><li><a href="#md:action-tables"><span>Action <wbr/>Tables</span></a></li><li><a href="#md:knowledge-tables"><span>Knowledge <wbr/>Tables</span></a></li><li><a href="#md:chat-tables"><span>Chat <wbr/>Tables</span></a></li><li><a href="#md:lancedb-integration"><span>LanceDB <wbr/>Integration</span></a></li><li><a href="#md:declarative-paradigm-1"><span>Declarative <wbr/>Paradigm</span></a></li></ul></li><li><a href="#md:installation"><span>Installation</span></a></li><li><a href="#md:usage"><span>Usage</span></a></li><li><ul><li><a href="#md:create-api-client"><span>Create API <wbr/>Client</span></a></li><li><a href="#md:types"><span>Types</span></a></li><li><a href="#md:use-client-object-to-call-the-methods"><span>Use client object to call the methods</span></a></li></ul></li><li><a href="#md:constructor-parameters-for-apiclient-configuration"><span>Constructor <wbr/>Parameters for APIClient <wbr/>Configuration</span></a></li><li><a href="#md:quick-start-guide"><span>Quick <wbr/>Start <wbr/>Guide</span></a></li><li><ul><li><a href="#md:react-js"><span>React JS</span></a></li><li><a href="#md:next-js"><span>Next JS</span></a></li><li><a href="#md:sveltekit"><span>Svelte<wbr/>Kit</span></a></li><li><a href="#md:nuxt"><span>Nuxt</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="index.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>jamaibase - v0.4.0</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>