@gnomondigital/nebulas-kit-react

React components for A2A chat. Requires @gnomondigital/nebulas-kit-core and a server proxy.

Install

npm install @gnomondigital/nebulas-kit-react @gnomondigital/nebulas-kit-core

Usage

import { A2AChat } from "@nebulas-kit/react";

export default function ChatPage() {
  return (
    <A2AChat
      a2aEndpoint="/api/a2a"
      configEndpoint="/api/a2a/config"
      user={{ name: "John", picture: "https://..." }}
      labels={{
        placeholder: "Ask anything...",
        newChat: "New chat",
        howCanIHelp: "How can I help?",
        askAbout: "Ask me anything.",
      }}
      suggestedPrompts={[
        "Find top 5 Python developers",
        "Summarize the pipeline",
      ]}
    />
  );
}

Resource Owner Password (username/password)

import { A2AChat, useA2AAuth } from "@gnomondigital/nebulas-kit-react";

export default function ChatPage() {
  const { token, login, logout } = useA2AAuth({ authEndpoint: "/api/a2a/auth" });

  if (!token) {
    return (
      <form onSubmit={(e) => {
        e.preventDefault();
        const form = e.target as HTMLFormElement;
        login(form.username.value, form.password.value);
      }}>
        <input name="username" />
        <input name="password" type="password" />
        <button type="submit">Login</button>
      </form>
    );
  }

  return (
    <A2AChat
      a2aEndpoint="/api/a2a"
      getAuthHeaders={async () => ({ Authorization: `Bearer ${token}` })}
    />
  );
}

Requirements

• Tailwind CSS (configure in your app)
• Server proxy (Next.js or Express) - see @gnomondigital/nebulas-kit-core