--- title: "Web Interface" description: "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..." last_updated: "2026-05-07T04:45:16.161367+00:00" canonical_url: "https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/technical/section-5/web-interface" ---
Relevant source files The following files were used as context for generating this wiki page: - [embedchain/examples/full_stack/frontend/package.json](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/package.json) - [embedchain/examples/full_stack/frontend/src/pages/index.js](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js)
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. ## Architecture and Technologies 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. ### Core Technologies The primary technologies and libraries used in the frontend are: | Technology | Version | Description | |---|---|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The `package.json` specifies the project is named "frontend" with version "0.1.0" and is marked as private. It defines standard Next.js scripts for development, building, starting, and linting. Key dependencies include `next`, `react`, `react-dom`, `tailwindcss` for styling, and `flowbite` for UI components. Development dependencies include `@svgr/webpack` for SVG handling. Sources: [embedchain/examples/full_stack/frontend/package.json](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/package.json) ### Project Structure 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](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js) ## Home Page (`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. ### Component Layout 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](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js) ### State Management and API Key Check 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. ```javascript export default function Home() { const [isKeyPresent, setIsKeyPresent] = useState(false); useEffect(() => { fetch("/api/check_key") .then((response) => response.json()) .then((data) => { if (data.status === "ok") { setIsKeyPresent(true); } }); }, []); // ... rest of the component } ``` Sources: [embedchain/examples/full_stack/frontend/src/pages/index.js:10-21](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js#L10-L21) ### Conditional Rendering 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. When `isKeyPresent` is `false`, only the `SetOpenAIKey` component is displayed, centered on the page with a `w-[50%] mx-auto` styling. ```javascript
{isKeyPresent && ( <> )}
``` Sources: [embedchain/examples/full_stack/frontend/src/pages/index.js:32-42](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js#L32-L42) ### API Key Check Flow The following sequence diagram illustrates the process of checking for the OpenAI API key when the `Home` page loads: ```mermaid sequenceDiagram participant Browser participant HomeComponent as "Home Component" participant BackendAPI as "/api/check_key" Browser->>HomeComponent: Renders Home Page HomeComponent->>HomeComponent: Initializes isKeyPresent = false HomeComponent->>HomeComponent: useEffect hook runs (on mount) HomeComponent->>BackendAPI: GET /api/check_key BackendAPI-->>HomeComponent: Response (JSON: {status: "ok"} or {status: "error"}) alt If status is "ok" HomeComponent->>HomeComponent: setIsKeyPresent(true) HomeComponent->>Browser: Rerenders with full dashboard else If status is not "ok" HomeComponent->>HomeComponent: (isKeyPresent remains false) HomeComponent->>Browser: Rerenders with SetOpenAIKey only end ``` Sources: [embedchain/examples/full_stack/frontend/src/pages/index.js:10-21](https://github.com/blade47/mem0/blob/main/embedchain/examples/full_stack/frontend/src/pages/index.js#L10-L21) ## Dashboard Components 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. ### Key Components The primary components rendered by `Home` are: | Component Name | Source File | Description ## Sitemap See the full [sitemap](https://www.doc0.dev/docs/faa36707-7c28-4f69-a18f-700ff61c704e/llms.txt) for all pages in this wiki.