# Create an API and integrate it with the frontend

{% hint style="success" %}
The tool used in this guide is [MERN.AI](https://mern.ai/). You can download their free version by clicking [here](https://mern.ai/download).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=LfvdHghypY0>" %}
Create and Integrate API
{% endembed %}

## Creating Frontend and Backend Files

Let's start by creating a frontend file in the 'main-features' folder.

1. Add a new file by right clicking on 'main-features' folder.
2. Select 'Blank UI/React Component' and create a file named '`test-ui`'
3. Give the path as '`/test-ui`' in the properties tab.
4. Create a backend file using the 'Blank Backend Function' option and name the backend file as '`test`'.

> Note that the 'server.tsx' extension will be automatically appended to the file by [mern.ai](https://mern.ai/).

{% hint style="warning" %}
It's important to append the 'server.tsx' extension manually for all backend functions when using other IDEs like VS Code.
{% endhint %}

> In the backend file, you'll find a boilerplate for creating a backend function as given below:

{% code title="test.server.tsx" %}

```tsx
import { createBackendFunction, useFunctionContext } from "@magicjs.dev/backend"

export default createBackendFunction(async function () {
    const ctx = useFunctionContext(this)

    return "Message from server"
})
```

{% endcode %}

* This code defines a backend function using the `@magicjs.dev/backend` library, which, when invoked, will return the message "Message from server".

## Calling Backend Function from Frontend

Let's trigger the backend function on a button click.

> Refer the below code and update the `test-ui.tsx` file

{% code title="test-ui.tsx" %}

```tsx
import { Button } from "antd"
import React from "react"
import testServer from "./test.server"

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div>
            <h1>Backend Test</h1>
            <h1>{`Response from backend: ${msg}`}</h1>
            <Button onClick={() => testServer().then((msg) => setMsg(msg))}>
                Call Backend function
            </Button>
        </div>
    )
}
```

{% endcode %}

<details>

<summary>Expand for Tailwind styled code.</summary>

{% code title="test-ui.tsx" lineNumbers="true" %}

```tsx
import React from "react";
import testServer from "./test.server";

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div className='flex flex-col justify-center items-center min-h-screen'>
            <div className="container">
                <h1 className="text-[72px] text-[#505050] font-medium mb-[56px]">Backend Test</h1>
                <h1 className="text-[56px] text-[#000000] mb-8">
                    Response from backend: <span className="text-[#147E1D]">{msg}</span>
                </h1>
                <button
                    onClick={() => testServer().then((msg) => setMsg(msg))}
                    className='text-[25px] text-[#151515] border border-[#BFBFBF] rounded-[10px] px-[62px] py-[15px] hover:opacity-70 active:scale-95'
                >
                    Call Backend function
                </button>
            </div>
        </div>
    )
}
```

{% endcode %}

</details>

* In the above code, the button triggers a request to the backend server, and upon receiving a response, it displays the response message on the UI.

After saving the changes, test the functionality by clicking the button. You should see the message from the backend displayed on the frontend.

<figure><img src="/files/Yqa0rIaoZrSLOtTzc8OW" alt=""><figcaption><p>Tailwind Styled Output</p></figcaption></figure>

> Our backend relies on Express.js for development.

:tada: Congratulations! You've learned how to create a backend function and seamlessly integrate it into the frontend using MagicJS framework.

***

## **Tired of Doing It All Yourself?**

> *Get help from the experts behind MERN.AI IDE.*

Our Professional Services team specializes in turning your ideas into fully functional applications. Focus on what you do the best and let us handle the development.

[Click to Learn More!](https://blog.mern.ai/professional-services)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/magicjs/basic-guide/create-an-api-and-integrate-it-with-the-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.