@skyforge-ai/agent-chat

Browser UI package for embedding the existing Skyforge Yew/WASM agent chat in React or framework-neutral apps.

This package is private for now and is separate from @skyforge-ai/sdk. @skyforge-ai/sdk is server-side only. Do not expose permanent Skyforge API tokens in browser apps, and do not call Skyforge from browser code with:

Authorization: Bearer <skyforge_api_token>

Browser Integration

External SaaS apps should use an app-owned backend proxy:

React app
  -> @skyforge-ai/agent-chat
  -> /api/skyforge-chat on your backend
  -> Skyforge using server-side credentials

The v1 browser package only exposes appProxy transport.

Node Version

This package is developed and validated with Node 24.17.0.

Using nvm:

nvm install 24.17.0
nvm use 24.17.0
node --version

Expected:

v24.17.0

This browser package is separate from the server-side @skyforge-ai/sdk and must not receive Skyforge API tokens.

Default styling

Import the package stylesheet once in your app:

import "@skyforge-ai/agent-chat/styles.css";

The stylesheet includes the default Skyforge chat Tailwind utilities, TailYew component classes, and scoped theme defaults required for the chat to match the Skyforge platform. The package applies a skyforge-agent-chat-root class to the mount element so these defaults stay scoped to the chat instead of resetting the host app.

Default rendering uses the same platform-style chat cards and input controls used inside Skyforge. If you need the simplified user-facing mode, opt into it explicitly with mode="user".

The default chat surface has a 36rem minimum height. If you want a fixed chat height, pass a host layout class or style:

<SkyforgeAgentChat
  agentBranchId="11111111-1111-1111-1111-111111111111"
  transport={{ type: "appProxy", baseUrl: "/api/skyforge-chat" }}
  className="h-[600px]"
/>

Dark mode follows the Skyforge platform convention: add a dark class on an ancestor of the chat, or pass className="dark" on the chat root.

React Usage

import { SkyforgeAgentChat } from "@skyforge-ai/agent-chat/react";
import "@skyforge-ai/agent-chat/styles.css";

export function SupportChat() {
  return (
    <SkyforgeAgentChat
      agentBranchId={import.meta.env.VITE_SKYFORGE_AGENT_BRANCH_ID}
      transport={{
        type: "appProxy",
        baseUrl: "/api/skyforge-chat",
      }}
    />
  );
}

/api/skyforge-chat is your backend proxy. The browser package does not accept Skyforge API keys or custom auth headers.

To opt into the simplified user-facing mode:

<SkyforgeAgentChat
  agentBranchId={import.meta.env.VITE_SKYFORGE_AGENT_BRANCH_ID}
  transport={{ type: "appProxy", baseUrl: "/api/skyforge-chat" }}
  mode="user"
/>

Framework-Neutral Usage

import { mountSkyforgeAgentChat } from "@skyforge-ai/agent-chat";
import "@skyforge-ai/agent-chat/styles.css";

const handle = mountSkyforgeAgentChat({
  target: document.getElementById("chat-root")!,
  agentBranchId: "11111111-1111-1111-1111-111111111111",
  transport: {
    type: "appProxy",
    baseUrl: "/api/skyforge-chat",
  },
  onError: (error) => {
    console.error(error);
  },
});

handle.unmount();

Backend Proxy Routes

Your backend proxy should forward the existing chat facade routes, including:

GET    /agent_branches/:agentBranchId/state
POST   /agent_branches/:agentBranchId/messages
POST   /human-actions/:humanActionRequestId/submit
GET    /agent_runs/:agentRunId/events
GET    /agent_branches/:agentBranchId/uploaded-files
POST   /agent_branches/:agentBranchId/uploaded-files
DELETE /agent_branches/:agentBranchId/uploaded-files/:fileContextId

The proxy can use @skyforge-ai/sdk or forward to Skyforge with credentials kept on the server.

Build And Test

cd packages/skyforge-agent-chat
npm install
npm run check:node
npm run build
npm test