@modelnex/sdk

React SDK for natural language control of web apps. Register actions and context; an AI agent executes actions in response to user commands.

Install

npm install @modelnex/sdk react zod

Quick Start

import { ModelNexProvider, ModelNexChatBubble } from "@modelnex/sdk";

function App() {
  const [items, setItems] = React.useState([]);

  return (
    <div>
      <ModelNexChatBubble placeholder="Add item, list all..." />
      <ul>{items.map(i => <li key={i.id}>{i.title}</li>)}</ul>
    </div>
  );
}

// Wrap your app (serverUrl defaults to http://localhost:3002)
export default () => (
  <ModelNexProvider>
    <App />
  </ModelNexProvider>
);

Exports

| Export | Purpose | |--------|---------| | ModelNexProvider | Wraps app, connects to agent server | | useRunCommand | Run commands programmatically (for custom UI) | | UIStateProvider | Holds UI state synced to agent | | useUIState | Read/update UI state | | useViewportTrack | Track element visibility | | useVisibleIds | Get visible element IDs | | useAgentViewport | Register visible IDs with agent | | ModelNexChatBubble | Optional chat bubble UI |

Custom UI

Use useRunCommand instead of ModelNexChatBubble for your own command UI:

const runCommand = useRunCommand();

<button onClick={() => runCommand("Add a new card")}>Run</button>

Peer Dependencies

• react >= 17
• zod >= 3

License

MIT