@formmy.app/chat

AI agents that sell, support, and convert. RAG + Voice + Chat — drop-in React SDK.

Installation

npm install @formmy.app/chat react ai @ai-sdk/react

Quick Start

import { FormmyProvider, ChatBubble } from "@formmy.app/chat/react";

function App() {
  return (
    <FormmyProvider publishableKey="formmy_pk_live_xxx">
      <YourApp />
      <ChatBubble agentId="agent_xxx" />
    </FormmyProvider>
  );
}

Keys

| Key | Prefix | Use | |-----|--------|-----| | Secret | formmy_sk_live_ | Backend — full API access | | Publishable | formmy_pk_live_ | Frontend — chat & voice only |

Get your keys at formmy.app/dashboard/api-keys.

Documentation

• Getting Started — installation, auth, chat widget & headless hook
• Voice API — real-time voice conversations over WebSocket

API Reference

Backend Client

import { Formmy } from "@formmy.app/chat";

const formmy = new Formmy({ secretKey: "formmy_sk_live_xxx" });

formmy.agents.list();
formmy.agents.get(agentId);
formmy.agents.create({ name, instructions, welcomeMessage?, model? });
formmy.agents.update(agentId, { name?, instructions?, model? });
formmy.agents.delete(agentId);

formmy.chat.stream({ agentId, message, conversationId? }); // streaming Response
formmy.chat.send({ agentId, message, conversationId? });  // complete response

formmy.conversations.list(agentId, { limit?, cursor? });
formmy.conversations.get(agentId, conversationId);

// Documents (RAG Knowledge Base)
formmy.documents.create(agentId, { title, content, metadata? });
formmy.documents.list(agentId, { limit?, cursor? });
formmy.documents.get(agentId, documentId);
formmy.documents.update(agentId, documentId, { title?, content, metadata? });
formmy.documents.delete(agentId, documentId);
formmy.documents.bulkCreate(agentId, documents[]); // max 20
formmy.documents.search(agentId, query, { topK?, contextType? });

React Components

<FormmyProvider publishableKey="formmy_pk_live_xxx">
  <ChatBubble
    agentId="agent_xxx"
    position="bottom-right"   // bottom-right | bottom-left
    theme="light"             // light | dark
    welcomeMessage="Hello!"   // optional override
  />
</FormmyProvider>

Headless Hook

const { messages, input, setInput, handleSubmit, isLoading, error, reload, stop } =
  useFormmyChat({ agentId });

TypeScript

import type { Message, Agent, FormmyConfig } from "@formmy.app/chat";

License

MIT