Skip to main content
Prerequisites: A React app using Next.js 14+, Remix v2, or TanStack Start, and a ModifyWithAI account.
1

Get Your Credentials

Go to modifywithai.com/dashboard, create a new app or select an existing one, and copy your App ID and API Key.
2

Run the Integration Agent

In your dashboard, click “Copy Integration Prompt”. Paste this into an AI coding assistant:
claude
# Then paste the prompt
The agent will scan your codebase, discover actions, generate definitions, create the token endpoint, and build the assistant UI.
The agent aims to discover 20-50+ actions. More actions means a more capable assistant.
3

Review and Test

Start your dev server, open the page with the Assistant component, and try a natural language request like “create a new item called Test”. Verify the correct action fires in your onAction handler.

​
What Gets Created

FilePurpose
app/api/mwai/token/route.tsToken endpoint (Next.js)
components/assistant.tsxAssistant UI with actions
.env.localAPI key configuration
For a pre-built UI instead of generating a custom one, use better-cmdk — an open-source command palette that works with useAssistant() out of the box. See the manual setup guide for details.

​
What Your Users Get

Once integrated, your users can interact with the assistant in three ways:

Execute Actions

“Create a new project” triggers your defined functions

Get Help from Docs

“How do I export data?” searches your documentation

Escalate Issues

Unresolved problems get routed to you with full context
The assistant handles all three paths automatically.

​
Next Steps

Understanding Actions

Learn how to define and handle actions

Manual Setup

If you prefer step-by-step control