System Architecture
Core Features
Data Management
Frontend Components
Backend Systems
The following files were used as context for generating this wiki page:
The Web Interface serves as the frontend application for the Embedchain Playground, providing a user-friendly environment to interact with Embedchain functionalities. Built with Next.js, React, and Tailwind CSS, it offers a dashboard where users can manage OpenAI API keys, create and delete bots, and purge chat histories.
This interface is designed to be a "full-stack" example, demonstrating how to integrate Embedchain's capabilities within a web application. It dynamically adjusts its displayed features based on the presence of a configured OpenAI API key, guiding users through the initial setup process.
The Web Interface is a single-page application (SPA) developed using the Next.js framework, which provides server-side rendering capabilities and a structured approach to building React applications.
The application leverages a modern web development stack for a responsive and scalable user experience.
The primary technologies and libraries used in the frontend are:
The main entry point for the web interface is the index.js file located in src/pages. This file defines the Home component, which orchestrates the layout and functionality of the dashboard.
Sources: embedchain/examples/full_stack/frontend/package.json
index.js)The Home component is the central page of the Embedchain Playground web interface. It manages the display of various dashboard functionalities and dynamically renders certain components based on the presence of an OpenAI API key.
The Home component utilizes a Sidebar for navigation (though its content is not detailed in the provided sources) and a Wrapper component to structure the main content area. The main content includes a welcome message and a dynamic grid of dashboard components.
Sources: embedchain/examples/full_stack/frontend/src/pages/index.js
The Home component maintains a local state variable isKeyPresent using React's useState hook. This state determines which dashboard features are visible to the user.
Upon the initial render of the component, a useEffect hook is triggered to check for the presence of an OpenAI API key. This check is performed by making an API call to the /api/check_key endpoint.
export default function Home() {
const [isKeyPresent, setIsKeyPresent] = useState(false);
useEffect(() => {
fetch("/api/check_key")
.then((response) => response.json
Sources: embedchain/examples/full_stack/frontend/src/pages/index.js:10-21
The visibility of certain dashboard components is entirely dependent on the isKeyPresent state.
When isKeyPresent is true, the dashboard displays CreateBot, DeleteBot, and PurgeChats components in addition to SetOpenAIKey. The layout uses a grid lg:grid-cols-2 for these components.
<div
className={`pt-6 gap-y-4 gap-x-8 ${
isKeyPresent ? "grid lg:grid-cols-2" : "w-[50%] mx-auto"
}`}
>
<SetOpenAIKey setIsKeyPresent={setIsKeyPresent} />
{isKeyPresent && (
<>
<CreateBot />
<DeleteBot
Sources: embedchain/examples/full_stack/frontend/src/pages/index.js:32-42
The following sequence diagram illustrates the process of checking for the OpenAI API key when the Home page loads:
Sources: embedchain/examples/full_stack/frontend/src/pages/index.js:10-21
The Web Interface integrates several specialized components to provide core functionalities of the Embedchain Playground.
| Component Name | Purpose
The Home component is the main entry point for the web interface, presenting the Embedchain Playground dashboard. It dynamically renders features based on the presence of an OpenAI API key.
The primary components rendered by Home are:
| Component Name | Source File | Description