import AiModelsList from '../../components/AiModelsList';

<AiModelsList />


### Final Thoughts

The **Spark Engine** platform is designed to empower you to build intelligent, customizable, and scalable AI systems effortlessly. Whether you are building chatbots, integrating multi-agent systems, or leveraging AI models from top providers like OpenAI, Meta, or Google, Spark Engine provides you with the tools to make it happen—without writing code.

### Real-World Use Cases

Spark Engine’s flexibility extends far beyond traditional chatbot implementations. Here are a few examples of how you can leverage Spark Engine in real-world scenarios:

1. **Customer Support Bot**: Enhance your customer service by deploying a support bot that integrates seamlessly with your backend systems. Utilize real-time API integrations to provide personalized assistance, track orders, and resolve customer issues quickly, all while maintaining your brand’s visual identity.

2. **E-Commerce Assistant**: Create an engaging shopping experience by deploying a product recommendation bot. Customize the bot’s interface to reflect your store’s style, and use advanced AI models to provide users with tailored product suggestions, improving both customer satisfaction and conversion rates.

3. **Educational Tutors**: Spark Engine can also serve as an interactive learning platform. Develop educational bots that act as tutors, delivering interactive lessons, tracking student progress, and personalizing responses to engage and motivate learners effectively.

4. **Multi-Agent Systems**: Go beyond single bots by orchestrating complex, multi-agent systems that collaborate to solve problems, manage tasks, or automate workflows. Spark Engine supports multi-agent capabilities that allow for coordination and communication between agents, making it ideal for advanced automation scenarios.

5. **Enterprise Integrations**: With native support for platforms like [Zapier](https://zapier.com), [Make.com](https://www.make.com), [Hugging Face](https://huggingface.co), and [Apify](https://apify.com), Spark Engine offers limitless possibilities for integrating with other business-critical systems and applications, enabling streamlined workflows and efficient automation.

---

## Conclusion

The **Spark Engine** platform is more than just a toolkit; it’s a comprehensive ecosystem designed to turn your AI vision into reality. With its vast library of models, seamless integration capabilities, and no-code environment, Spark Engine enables you to build solutions that are scalable, efficient, and aligned with your specific needs.

Whether you are building support bots, enhancing e-commerce experiences, or creating educational tools, Spark Engine gives you the flexibility to bring your ideas to life. Experiment with different models, explore integration options with top AI and automation providers, and build dynamic AI systems that grow with your business.

If you have any questions or need assistance, our support team is here to help. You can also refer to our [detailed API documentation](/Api/javascript) for further technical guidance and examples.

Thank you for choosing Spark Engine. We can’t wait to see what you create!

**Happy Building!**

Conclusion

# SparkEngine API Documentation

The **SparkEngine API** provides a powerful and flexible way to interact with Spark Engine’s conversational AI services. This API allows you to generate chatbot completions by sending a prompt to the Spark Engine backend, which returns a response based on your custom configurations. Below you’ll find detailed information on how to set up the API and examples of how to use it.

## SparkEngine API Class

The `SparkEngineApi` class provides a simple interface to interact with the Spark Engine's completion API. You can create a completion request by sending a prompt along with a project ID, and the response will contain the generated text completion.

### Usage Example

Here’s a simple example showing how you can use the `SparkEngineApi` class to interact with the API:

```ts
import SparkEngineApi from 'sparkengine';

export default async function handler(req: any, res: any) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method Not Allowed' });
  }

  try {
    const { prompt, projectId } = req.body;

    const sparkEngine = new SparkEngineApi(process.env.SPARKENGINE_API_KEY || '');

    const response = await sparkEngine.createCompletion({
      prompt,
      project_id: projectId,
    });

    console.log(response.data);
    return res.status(200).json(response.data);
  } catch (error) {
    console.error('Error fetching the API response:', error);
    return res.status(500).json({ error: 'Internal Server Error' });
  }
}
```

In this example:
- The handler function listens for `POST` requests, retrieves the `prompt` and `projectId` from the request body, and then sends these to the Spark Engine API to generate a response.
- You need to provide your **SparkEngine API Key** using environment variables (e.g., `process.env.SPARKENGINE_API_KEY`).

## SparkEngineApi Class Methods

### `createCompletion`

The `createCompletion` method is responsible for sending a request to the Spark Engine API to generate a completion based on a prompt. The response will contain the generated text that you can display to your users.

```ts
async createCompletion({ prompt, project_id }: CompletionRequest): Promise<CompletionResponse>
```

#### Parameters

- **prompt**: The text input from the user or the current conversation context that the API will use to generate a completion.
  - Type: `string`
  - Example: `"Tell me a joke"`

- **project_id**: The ID of the project associated with your Spark Engine account. This helps to identify which project and settings to use when generating the response.
  - Type: `string`
  - Optional: If not provided, the default project ID will be used.
  - Example: `"adbfd15b-1499-4a7a-8cdc-416e8630c33c"`

#### Returns

- **Promise**: Returns a promise that resolves to an object containing the API response data.

#### Response Example

Here is an example of the response that `createCompletion` might return:

```json
{
  "data": {
    "output": "Why don't scientists trust atoms? Because they make up everything!",
    "name": "Joke Output"
  }
}
```

---

## SparkEngineApi Class Setup

The `SparkEngineApi` class constructor accepts an API key and an optional base URL for API requests. The API key is required to authenticate your requests.

### Constructor

```ts
constructor(apiKey: string, baseUrl?: string)
```

#### Parameters

- **apiKey**: The API key provided by Spark Engine. This key is required to authenticate all API requests.
  - Type: `string`
  - Example: `"your-api-key-here"`

- **baseUrl**: The base URL for the Spark Engine API. This is optional and defaults to https://sparkengine.ai/api/engine/completion but you can override this if you need to point to a different API environment (e.g., staging).
  - Type: `string`
  - Optional
  - Default: 
```ts 
  https://sparkengine.ai/api/engine/completion
```

---

## API Request Example

Here is an example of an API request using `createCompletion` in a typical use case:

### Creating a Completion

```ts
import SparkEngineApi from 'sparkengine';

async function fetchCompletion(prompt: string, projectId: string) {
  const sparkEngine = new SparkEngineApi('your-api-key-here');

  try {
    const response = await sparkEngine.createCompletion({
      prompt,
      project_id: projectId
    });

    console.log('API Response:', response.data);
    return response.data;
  } catch (error) {
    console.error('Error fetching completion:', error);
    throw error;
  }
}

fetchCompletion("Tell me a joke", "adbfd15b-1499-4a7a-8cdc-416e8630c33c");
```

In this example:
- The `fetchCompletion` function creates a new instance of the `SparkEngineApi` class, using an API key to authenticate.
- The `createCompletion` method sends a prompt (`"Tell me a joke"`) and a project ID to the API. The response will contain the completion data, which is logged in the console.

---

### Error Handling

If the request to the API fails, an error will be thrown. It’s recommended to wrap the API request in a `try-catch` block to handle potential errors gracefully.

### Error Example

```ts
try {
  const response = await sparkEngine.createCompletion({ prompt: "Tell me a joke" });
  console.log(response.data);
} catch (error) {
  console.error('Error fetching completion:', error);
}
```

The error message will contain detailed information about the issue, such as network problems, invalid API keys, or incorrect project IDs.

---

### Environment Variables

To avoid hardcoding sensitive information like your API key, it's best practice to store the API key in environment variables. Here's how you can configure this:

1. Create a `.env` file in your project root:
   ```
   SPARKENGINE_API_KEY=your-api-key-here
   ```

2. In your code, reference the environment variable like this:
   ```ts
   const sparkEngine = new SparkEngineApi(process.env.SPARKENGINE_API_KEY || '');
   ```

---

### Props

- **apiKey**: The API key used to authenticate requests to the Spark Engine API.
  - Type: `string`
  - Example: `"your-api-key-here"`

- **baseUrl**: The base URL for the Spark Engine API. Defaults to https://sparkengine.ai/api/engine/completion
  - Type: `string`
  - Optional
  - Default: 
```ts
  https://sparkengine.ai/api/engine/completion
```

---

## Conclusion

The `SparkEngineApi` class provides an easy-to-use interface for interacting with the Spark Engine's API, allowing you to generate completions based on prompts. By using this SDK, you can integrate intelligent chatbot functionality into your applications, and customize the interaction based on your specific project settings.

This API is designed to be flexible, scalable, and simple to use. You can expand upon it, modify the prompt generation, or integrate it with other services to build a robust conversational AI experience for your users.

javascript

## Spark Engine Documentation

Welcome to the documentation for **Spark Engine**, a comprehensive no-code platform for building cognitive AI and multi-agent systems. Whether you’re integrating AI models, building chatbots, or deploying multi-agent environments, Spark Engine offers the tools and integrations you need to get started quickly and efficiently.

### What is Spark Engine?

Spark Engine is a versatile platform designed to empower developers and businesses to create intelligent systems without coding. It supports integrations with leading AI and automation tools like [Zapier](https://zapier.com), [Make.com](https://www.make.com), [Hugging Face](https://huggingface.co), and [Apify](https://apify.com), allowing for seamless connection between various services and models.

With Spark Engine, you can access a library of over 100 models, including those from top providers like [OpenAI](https://www.openai.com), [Meta](https://about.meta.com), [Google](https://ai.google), [Mistral](https://mistral.ai), and many others. Additionally, Spark Engine supports advanced GPU providers such as [Groq](https://groq.com) and [Cerebras](https://www.cerebras.net), ensuring high performance and scalability for complex workloads.

### Table of Contents

1. [Introduction](/#introduction)
2. [Getting Started](/#getting-started)
3. [Platform Overview](/platform/models)
    - [Models](/platform/models)
    - [Nodes](/platform/nodes)
4. [SDK Guide](/SDK/chatbot)
    - [Chatbot Component](/SDK/chatbot)
    - [Message Component](/SDK/message)
    - [ChatInput Component](/SDK/chatinput)
    - [ChatbotWindow Component](/SDK/chatbot-window)
5. [API Reference](/Api/javascript)
6. [Conclusion](/conclusion)

---

## Introduction

**Spark Engine** is your gateway to building powerful AI-driven systems with minimal effort. Our platform is built for users of all technical levels, from beginners to advanced developers, and is particularly suited for those who want to harness the power of AI without diving into code. 

With Spark Engine, you can:

- Build intelligent chatbots, automation systems, and multi-agent frameworks.
- Integrate directly with leading platforms like **[Zapier](https://zapier.com)**, **[Make.com](https://www.make.com)**, **[Hugging Face](https://huggingface.co)**, and **[Apify](https://apify.com)**.
- Access a comprehensive library of models including offerings from **[OpenAI](https://www.openai.com)**, **[Meta](https://about.meta.com)**, **[Google](https://ai.google)**, **[Mistral](https://mistral.ai)**, and others.
- Utilize powerful GPU providers such as **[Groq](https://groq.com)** and **[Cerebras](https://www.cerebras.net)** for scalable and high-performance AI workloads.

In this documentation, you will learn how to leverage Spark Engine’s capabilities, explore various integrations, and understand how to access and deploy different models effectively.

---

## Getting Started

### Installation

To install the Spark Engine SDK, run the following command:

```bash
npm install sparkengine
```

This will install all the necessary dependencies for setting up your Spark Engine environment and getting started with building your AI solutions.

### Basic Setup

To start using the Spark Engine SDK, you’ll need to import the required components into your application and configure them as needed.

### Importing Components

Here are some of the key components you will frequently use:

- **Chatbot**: The main component that manages the chatbot's logic and state.
- **Message**: This component renders individual messages from the user and the bot.
- **ChatInput**: The input field component for sending messages and interacting with the chatbot.
- **ChatbotWindow**: This component wraps the message display area and manages the chatbot’s layout and scrolling.

By following this documentation, you will learn how to build and customize AI and multi-agent systems using Spark Engine, starting from simple integrations to more advanced setups that leverage our platform’s full potential.

getting-started

models

import NodesList from '../../components/NodesList';

### Available Nodes

<NodesList />


nodes

### Customizing Input Field

You can style the input field using the `ChatInput` component. Below is an example where we set a white background, dark text color, and custom padding:

```tsx
<ChatInput
  inputBackground="#ffffff"
  inputTextColor="#333"
  inputBorderColor="#ccc"
  inputFontSize="1.2rem"
  px="20px"
  py="10px"
  buttonColor="green"
/>
```

This creates a clean input field with a green send button, which resembles WhatsApp’s interface.

---

#### Props

- **inputBackground**: The background color for the input field.
  - Type: `string`
  - Example: `"#ffffff"`

- **inputTextColor**: The color of the text inside the input field.
  - Type: `string`
  - Example: `"#333"`

- **inputBorderColor**: The border color for the input field.
  - Type: `string`
  - Example: `"#ccc"`

- **inputFontSize**: Font size for the input text.
  - Type: `string`
  - Example: `"1.2rem"`

- **buttonColor**: The color of the send button.
  - Type: `string`
  - Example: `"green"`

chat-input

### Customizing Chatbot Window

The `ChatbotWindow` component is highly customizable, allowing you to adjust its appearance to match your app’s theme. This includes settings like the background color, padding, margin, scroll behavior, and more.

Here’s how to create a window with a blue background, custom padding, and rounded corners:

```tsx
<ChatbotWindow
  backgroundColor="blue"
  scrollbarSize={6}
  borderRadius="10px"
  boxShadow="0 2px 10px rgba(0,0,0,0.1)"
  py="15px"
  px="20px"
/>
```

#### Props

- **`backgroundColor`**: The background color of the window.
  - **Type**: `string`
  - **Example**: `"#e5ddd5"`
  
- **`scrollbarSize`**: The size of the scrollbar in the window.
  - **Type**: `number`
  - **Example**: `6`
  
- **`borderRadius`**: The border radius of the window, which controls the roundness of the corners.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`boxShadow`**: The shadow effect applied to the window.
  - **Type**: `string`
  - **Example**: `"0 2px 10px rgba(0,0,0,0.1)"`
  
- **`p`**: Shorthand for padding.
  - **Type**: `string`
  - **Example**: `"15px"`
  
- **`pt`**: Padding for the top.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`pb`**: Padding for the bottom.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`pl`**: Padding for the left side.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`pr`**: Padding for the right side.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`px`**: Horizontal padding (left and right).
  - **Type**: `string`
  - **Example**: `"20px"`
  
- **`py`**: Vertical padding (top and bottom).
  - **Type**: `string`
  - **Example**: `"15px"`
  
- **`m`**: Shorthand for margin.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`mt`**: Margin for the top.
  - **Type**: `string`
  - **Example**: `"5px"`
  
- **`mb`**: Margin for the bottom.
  - **Type**: `string`
  - **Example**: `"5px"`
  
- **`ml`**: Margin for the left side.
  - **Type**: `string`
  - **Example**: `"5px"`
  
- **`mr`**: Margin for the right side.
  - **Type**: `string`
  - **Example**: `"5px"`
  
- **`mx`**: Horizontal margin (left and right).
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`my`**: Vertical margin (top and bottom).
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`style`**: Custom CSS properties applied to the window.
  - **Type**: `React.CSSProperties`
  - **Example**: `{{ display: 'flex' }}`

---

chatbot-window

### Customizing Chatbot

The `Chatbot` component is the main container that handles conversation logic, fetching responses from APIs, and manages the state of the chatbot. It connects to your backend API and updates the interface accordingly. This section demonstrates how to quickly set up the chatbot with minimal configuration for fast integration.

### Before and After Chatbot Interaction

Below is the initial display of the chatbot window and the view of an active conversation:

**Initial Chatbot Display**:
  
  ![Initial Chatbot Display](/chatbot-1.png)

**Conversation in Progress**:

  ![Conversation in Progress](/chatbot-2.png)

### Basic Chatbot Code Example

Below is a minimal setup for a basic chatbot. This setup is perfect when you want a simple, out-of-the-box integration without major customization.

```tsx
import React from 'react';
import { Chatbot, ChatbotWindow, ChatInput, Message, SparkEngineProvider } from 'sparkengine';

const HomePage: React.FC = () => {
  return (
    <SparkEngineProvider>
      <Chatbot
        projectId="adbfd15b-1499-4a7a-8cdc-416e8630c33c"
        chatApiRoute="/api/chatbot"
        sparkEngineApiRoute="/api/complete"
        callSparkEngineWhen="Collect user's favorite color, favorite food, and workplace skills"
        width="90%"
        height="90vh"
        position="center"
        offsetY="5vh"
        conversationHistoryLength={10}
        responseIndices={[0]}
        initialBackgroundColor="#fcfcfc"
        title="Spark Engine Chatbot"
        description="Talk to our Spark Engine chatbot!"
        logo="https://sparkengine.ai/logo.png"
      >
        <ChatbotWindow
          backgroundColor="#fcfcfc"
          scrollbarSize={6}
          borderRadius="10px"
          boxShadow="0 2px 10px rgba(0,0,0,0.1)"
          px="20px"
        >
          <Message
            userColor="#007bff"
            botColor="#333"
            userBackground="#e6f2ff"
            botBackground="#ffffff"
            userFontSize="1rem"
            botFontSize="1rem"
            px="16px"
            py="8px"
            userBorderRadius="20px 20px 0 20px"
            botBorderRadius="20px 20px 20px 0"
            userBorder="2px solid #007bff"
            botBorder="1px solid #ccc"
            m="10px 0"
            my="15px"
            mx="10px"
          />
        </ChatbotWindow>
        <ChatInput />
      </Chatbot>
    </SparkEngineProvider>
  );
};

export default HomePage;
```

### Explanation of the Code

- **`SparkEngineProvider`**: This wraps the chatbot and provides the context for communication between components.
- **`Chatbot`**: The main container managing the chatbot's logic, connecting to your API, and handling the flow of conversations.
- **`ChatbotWindow`**: Displays the message history within a scrollable container. It provides the interface where the user and bot messages appear.
- **`Message`**: A component that renders individual user and bot messages within the window.
- **`ChatInput`**: A component that provides the input field for user messages.

### Example Repository on GitHub

For a complete working example of the chatbot setup, you can visit our [GitHub repository](https://github.com/spark-engine-ai/sparkengine-sdk). This repository contains the full example code and additional configurations to help you get started quickly.

---

### Chatbot Props

- **`projectId`**: The unique ID for connecting your project with the Spark Engine backend.
  - **Type**: `string`
  - **Example**: `"adbfd15b-1499-4a7a-8cdc-416e8630c33c"`
  
- **`chatApiRoute`**: The API endpoint for chatbot interaction.
  - **Type**: `string`
  - **Example**: `"/api/chatbot"`
  
- **`sparkEngineApiRoute`**: The API endpoint for communicating with Spark Engine.
  - **Type**: `string`
  - **Example**: `"/api/complete"`
  
- **`callSparkEngineWhen`**: The condition or task for triggering Spark Engine.
  - **Type**: `string`
  - **Example**: `"Collect user's favorite color, favorite food, and workplace skills"`
  
- **`title`**: The title of the chatbot, typically displayed at the top of the window.
  - **Type**: `string`
  - **Default**: `"Sparkchat SDK"`
  
- **`description`**: A brief description of the chatbot, shown when no conversation has started.
  - **Type**: `string`
  - **Default**: `"Chat with Spark Engine projects"`
  
- **`username`**: The name displayed for user messages.
  - **Type**: `string`
  - **Default**: `"You"`
  
- **`width`**: Width of the chatbot container.
  - **Type**: `string | number`
  - **Default**: `"100%"`
  
- **`height`**: Height of the chatbot container.
  - **Type**: `string | number`
  - **Default**: `"70vh"`
  
- **`position`**: Position of the chatbot on the screen.
  - **Type**: `'left' | 'center' | 'right'`
  - **Default**: `'center'`
  
- **`offsetX` / `offsetY`**: Horizontal and vertical offset for positioning the chatbot.
  - **Type**: `string | number`
  - **Default**: `0`
  
- **`conversationHistoryLength`**: Length of conversation history retained during a session.
  - **Type**: `number`
  - **Default**: `5`
  
- **`responseIndices`**: Determines which responses are displayed or processed.
  - **Type**: `number[] | 'all'`
  - **Default**: `[0]`
  
- **`userColor` / `botColor`**: Text colors for user and bot messages.
  - **Type**: `string`
  
- **`userBackground` / `botBackground`**: Background colors for user and bot messages.
  - **Type**: `string`
  
- **`initialBackgroundColor`**: Initial background color for the window before any interaction.
  - **Type**: `string`
  
- **`windowScrollbarSize`**: The size of the scrollbar for the chat window.
  - **Type**: `number`
  - **Example**: `4`
  
- **`windowBorderRadius`**: The border radius of the chat window.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`windowBoxShadow`**: Box shadow styling for the chat window.
  - **Type**: `string`
  - **Example**: `"0 4px 12px rgba(0, 0, 0, 0.1)"`
  
- **`windowPadding`**: Padding inside the chat window.
  - **Type**: `string`
  - **Example**: `"10px"`
  
- **`sx`**: Custom styles for the chatbot.
  - **Type**: `React.CSSProperties`

chatbot

### Customizing The Styling of Messages

The `Message` component is responsible for rendering each message from either the user or the bot. It can be customized using various props such as color, font size, and padding.

### Customizing Message Styling

You can easily adjust the styling of user and bot messages by modifying the props for the `Message` component. Here’s an example that customizes the background color, text color, and padding for both user and bot messages.

```tsx
<Message
  userColor="#fff"
  botColor="#333"
  userBackground="#25d366"
  botBackground="#ffffff"
  userFontSize="1rem"
  botFontSize="1rem"
  userBorderRadius="20px 20px 0 20px"
  botBorderRadius="20px 20px 20px 0"
  userBorder="none"
  botBorder="1px solid #ccc"
  px="12px"
  py="8px"
  m="10px 0"
  mx="10px"
  my="15px"
/>
```
--- 

#### Props

- **userColor**: The text color for user messages.
  - Type: `string`
  - Example: `"#fff"`

- **botColor**: The text color for bot messages.
  - Type: `string`
  - Example: `"#333"`

- **userBackground**: The background color for user messages.
  - Type: `string`
  - Example: `"#25d366"`

- **botBackground**: The background color for bot messages.
  - Type: `string`
  - Example: `"#ffffff"`

- **userFontSize**: Font size for user messages.
  - Type: `string`
  - Example: `"1rem"`

- **botFontSize**: Font size for bot messages.
  - Type: `string`
  - Example: `"1rem"`

- **userBorderRadius**: Specific border-radius for user messages.
  - Type: `string`
  - Example: `"20px 20px 0 20px"`

- **botBorderRadius**: Specific border-radius for bot messages.
  - Type: `string`
  - Example: `"20px 20px 20px 0"`

- **userBorder**: Border style for user messages.
  - Type: `string`
  - Example: `"none"`

- **botBorder**: Border style for bot messages.
  - Type: `string`
  - Example: `"1px solid #ccc"`

---

Available Providers