Load external javascript with saved settings using Shopify app

Shopify Apps
1

I want to create an app that loads external script. I am using Shopify CLI to create app and I managed to take input form user and save the input as setting.

export const loader = async ({ request }) => {
  // Fetch current settings from your database
  const settings = await fetchSettingsFromDB();
  return json(settings);
};

export const action = async ({ request }) => {
  const formData = await request.formData();
  const enableChatbot = formData.get("enableChatbot") === "on";
  const chatbotId = formData.get("chatbotId");

  // Save settings to your database
  await saveSettingsToDB({ enableChatbot, chatbotId });

  return { success: true };
};
export default function App() {
  const settings = useLoaderData();
  const actionData = useActionData();

  const labelStyle = {
    display: "block",
    width: "100px",
    height: "40px",
    lineHeight: "40px",
  };

  const flex = {
    display: "flex",
    alignItems: "center",
    gap: "10px",
  };

  return (
    
  );
}

app/routes/_index.jsx

After this I want to load the script on the website the app is installed for. Here is what I am true.

export const action = async ({ request }) => {
  const { session, chatbotId } = await request.json();
  const client = new Shopify.Clients.Rest(session.shop, session.accessToken);

  try {
    const response = await client.post({
      path: "script_tags",
      data: {
        script_tag: {
          event: "onload",
          src: `https://app.thinkstack.ai/bot/thinkstackai-loader.min.js?id=${chatbotId}`,
        },
      },
      type: "application/json",
    });
    return json(response);
  } catch (error) {
    return json({ error: error.message }, { status: 500 });
  }
};

app/api/create-script.js

export const loader = async ({ request }) => {
  const url = new URL(request.url);
  const query = Object.fromEntries(url.searchParams.entries());
  const session = await Shopify.Auth.validateAuthCallback(request, query);

  const settings = await fetchSettingsFromDB();
  if (settings.enableChatbot) {
    const response = await fetch(`${url.origin}/api/create-script-tag`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ session, chatbotId: settings.chatbotId }),
    });

    if (!response.ok) {
      throw new Error("Failed to create script tag");
    }
  }

  return redirect(`https://${session.shop}/admin/apps`);
};

app/auth/callback.js

NOTE: I am new to Shopify and I am not sure what I am doing wrong.