back to copilotx

Studio · /actions

Author a CopilotKit action.

Describe what you want in plain English. The Director writes a real useCopilotAction for you. Try it live in the sandbox on the right, then copy the snippet straight into your project.

01 · Director

Describe an action

Plain English. The AI writes the useCopilotAction for you.

Tip: ⌘/Ctrl + Enter to submit.

Examples

02 · Generatedactions/generated.tsx
// Your generated useCopilotAction will appear here.
//
// Try the prompt on the left, e.g.:
//   "an action that books a flight given origin, destination and date"
//
// The AI will produce a full TypeScript snippet — params, handler,
// and an inline render — that you can paste into any CopilotKit app.

03 · Sandbox

Live previewmock handler

Invoke the generated action with your own arguments. The handler is mocked so the demo stays safe — your real handler runs the same way.

Generate an action on the left, hit “try it”, and a parameter form will appear here. Fill it in, send it, and you'll see exactly what your useCopilotAction handler would receive — and what it would render — in your real CopilotKit app.

Director uses useCopilotAction(generateAction) · Sandbox is a mocked invocation surface — your real handler runs in your app.