AgentForge logoAgentForge
Getting Started
Tutorials
PlaygroundShipFast IntegrationMulti-Agent WorkflowStreaming Responses
Features
LLMsToolsAgentsObservabilityComponents
Deployment

TutorialsShipFast Integration

If you want to build and launch your AI Agents App as fast as possible, your best friend is ShipFast. It is a NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.
šŸ™
If you havenā€™t purchased ShipFast, please use the following link. It wonā€™t cost you more, but it will help me: https://shipfa.st/?via=agent-forge
As both AgentForge and ShipFast are based on NextJS and follow a similar structure, follow the steps below to integrate AgentForge with ShipFast.

Step 1: Merge Dependencies

First, you need to merge the dependencies from both projects. This involves combining the package.json files.
  1. Open package.json in AgentForge: Copy all the dependencies listed under "dependencies" and "devDependencies".
  1. Open package.json in ShipFast: Paste the copied dependencies into the corresponding sections.
  1. Resolve Conflicts: If there are any version conflicts, choose the version you need or update to the latest compatible versions.
  1. Install Dependencies: Run npm install or yarn install to install all the dependencies.

Step 2: Merge Environment Variables

Next, merge the environment variables from both .env.local files.
  1. Open .env.local in AgentForge: Copy all the environment variable declarations.
  1. Open .env.local in ShipFast: Paste the copied variables.
  1. Resolve Conflicts: Ensure that there are no conflicting environment variable names. If there are, rename them appropriately.

Step 3: Copy the AI Folder

The AI folder contains essential configurations and files for your AI agents.
  1. Locate the AI Folder in AgentForge: Copy the entire folder.
  1. Paste the AI Folder in ShipFast: Place it in the appropriate directory in ShipFast, typically at the root level or within the src directory.

Step 4: Merge Libraries

Libraries contain shared utility functions and configurations.
  1. Open the libs Folder in AgentForge: Copy all contents.
  1. Open the libs Folder in ShipFast: Paste the copied contents.
  1. Resolve Conflicts: Ensure that there are no duplicate or conflicting files. Merge them if necessary.

Step 5: Merge APIs

The APIs are crucial for handling server-side requests and responses.
  1. Open the app/api Folder in AgentForge: Copy all contents.
  1. Open the app/api Folder in ShipFast: Paste the copied contents.
  1. Resolve Conflicts: Ensure that API endpoints do not conflict. If they do, rename or merge them appropriately.

Step 6: Merge Components

Components are the building blocks of your UI.
  1. Open the components Folder in AgentForge: Copy all contents.
  1. Open the components Folder in ShipFast: Paste the copied contents.
  1. Resolve Conflicts: Ensure that component names do not conflict. If they do, rename or merge them appropriately.

Step 7: Merge Pages

Pages are the actual web pages in your application.
  1. Copy New Pages: If you have created new pages in AgentForge, copy them to the pages or app directory in ShipFast.
  1. Protect Pages: For protected pages, update the authentication and access control logic as needed.

Example: Moving the Playground to the Dashboard

Hereā€™s how to move the Playground from AgentForge to the Dashboard of ShipFast.
  1. Copy the Playground Page:
      • Copy app/page.tsx from AgentForge to app/components/Playground.tsx in ShipFast.
  1. Update the Dashboard Page:
      • Open app/dashboard/page.tsx in ShipFast.
      • Replace its content with the following code to integrate the Playground:

1import { getServerSession } from 'next-auth';
2import { authOptions } from '@/libs/next-auth';
3import connectMongo from '@/libs/mongoose';
4import User from '@/models/User';
5import HeaderDashboard from '@/components/HeaderDashboard';
6import { Suspense } from 'react';
7import Playground from '@/components/Playground';
8import Pricing from '@/components/Pricing';
9
10export const dynamic = 'force-dynamic';
11
12export default async function Dashboard() {
13    await connectMongo();
14    const session = await getServerSession(authOptions);
15    let hasAccess = false;
16    if (session?.user) {
17        const user = await User.findById(session.user.id);
18        hasAccess = user?.hasAccess;
19    }
20
21    return (
22        <>
23            {hasAccess ? <Playground /> : <Pricing />}
24        </>
25    );
26}

Conclusion

By following these steps, you can successfully integrate AgentForge with ShipFast, leveraging the strengths of both platforms to build and launch your AI Agents App quickly and efficiently. Explore further customization and optimization to make the most of your new setup.
Happy building with AgentForge and ShipFast!
Ā