A lightweight AI chatbot template built with Spark Engine, Next.js, and Mantine UI.
Spark Engine is an autonomous solutions company with a no-code engine for making advanced multi-agent systems and early AGI systems. This project leverages the Spark Engine API to create an AI chatbot that can interact with users through a web interface built with Next.js and Mantine UI.
Follow these steps to set up and run your Spark Engine chatbot project:
- Go to Spark Engine.
- Navigate to
Account > Keys
. - Copy your API key.
-
Open the project and navigate to
/components/chatbot.tsx
. -
Find and replace the
SPARKENGINE_PROJECT_ID
with the ID of any public or personal project on Spark Engine. You can use the example provided or your own project ID.const PROJECT_ID = "your-project-id-here"; // Replace with your project ID
-
Ensure that you have set your API key in the
.env.local
file in the root of your project:SPARKENGINE_API_KEY=your-api-key
-
Install the project dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and go to
http://localhost:3000
to see your chatbot in action.
Here's a brief overview of the project structure:
- components: Contains the main React components (
chatbot.tsx
,input.tsx
,message.tsx
,markdown.tsx
,loader.tsx
,navbar.tsx
). - styles: Contains the CSS modules for styling components.
- app: Contains the API route for proxying requests to the Spark Engine API.
- .env.local: File for storing environment variables such as your Spark Engine API key.
- Chatbot Interface: Interact with your Spark Engine projects through a conversational interface.
- Loader: Shows a loading indicator while waiting for responses from the Spark Engine API.
- Responsive Design: Built with Mantine UI for a responsive and accessible design.
Spark Engine is an autonomous solutions company with a no-code engine for making advanced multi-agent systems and early AGI systems. It allows users to create complex AI-driven projects without writing code, leveraging the power of multi-agent systems to achieve sophisticated tasks.
Feel free to fork this project and contribute by submitting pull requests. Any contributions are welcome!
This project is licensed under the MIT License. See the LICENSE file for details.
For more information about Spark Engine, visit sparkengine.ai.