Getting Started

Welcome to the Agent8 project setup guide. This documentation will walk you through creating a new project, installing necessary dependencies, setting up the server, and integrating server functions within your client application.

Create a New Project

Agent8 is built on a Vite-based React TypeScript project, providing a fast and efficient development environment.

To initialize a new project, run one of the following commands based on your package manager:

npm create vite@latest my-app -- --template react-ts

yarn create vite my-app --template react-ts

pnpm create vite my-app --template react-ts

Install Dependencies

After creating your project, navigate to the project directory and install the necessary Agent8 packages:

npm install @agent8/gameserver

yarn add @agent8/gameserver

pnpm add @agent8/gameserver

These packages include the Agent8 React client for interacting with the server and the Agent8 CLI for deployment and server management.

Create a server.js

Next, set up your server by creating a server.js file in the root directory of your project. This file will contain the server-side logic and define functions that the client can call.

Create the server.js file and add the following code:

class Server {
  add(a, b) {
    return a + b;
  }
}

This simple add function on the server takes two numerical inputs and returns their sum. You can define additional server-side functions following this pattern to extend your application’s capabilities.

Deploy server.js

With your server code in place, deploy it using the Agent8 CLI. Run the following command in your terminal:

npx -y @agent8/deploy

Upon successful deployment, a VITE_AGENT8_VERSE environment variable will be created in your .env file. This variable is essential for both client and server operations, facilitating secure communication and function calls.

Testing the Deployment

You can test your deployed server function by invoking it directly from the terminal:

npx -y @agent8/cli call add '[1, 2]'

This command calls the add function with the arguments 1 and 2, and you should see the result 3 printed in your terminal.

Call the Server from the Client

Now, let’s integrate the server function into your client application, enabling your React components to communicate with the server.

1. Update Client Code

   You can interact with the server using either React hooks or direct class instantiation:

import React from "react";
import { useGameServer } from "@agent8/gameserver";
 
export default function App() {
const { connected, server } = useGameServer();
 
  if (!connected) return 'Connecting...'
 
  const handleCallServer = async () => {
    const result = await server.remoteFunction("add", [1, 2]);
    console.log("Result from server:", result);
  };
 
  return (
    <div>
      <h1>Agent8 Server Communication</h1>
      <button onClick={handleCallServer}>Call Server</button>
    </div>
  );
 
}
 

2. Run the Project

   Start your development server by running:

npm run dev

yarn dev

pnpm dev

Open your browser and navigate to the local development server. Click the “Call Server” button to execute the add function on the server. The result should be logged in the browser’s console.

Conclusion

You have successfully set up an Agent8 project, deployed server-side functions, and integrated them into your client application. This setup enables you to store user data, perform server-side computations, and facilitate real-time communication between users seamlessly.

For more advanced features and further customization, please refer to the Agent8 documentation.

Note: Agent8 manages all server operations and maintenance, allowing you to focus on developing your application’s unique features without worrying about backend infrastructure.