AI Agent Playground
Try ActionKit in the AI Agent Playground, a sandbox to test chatting with an agent that has access to ActionKit tools.
Get the source on GitHub
Find the source code for AI Agent Playground on our GitHub repository.
Setup
To run the AI Agent Playground locally, you will need the following:
- Node.js ≥ v22 and
pnpmavailable in $PATH (Install instructions) - OpenAI API Key
- Paragon Project ID and Signing Key
How do I find my Project ID?
How do I find my Project ID?
You can copy your Project ID by clicking Copy Project ID under the Environment switcher:
Start by cloning the source of Playground locally:
Install the dependencies with pnpm:
Next, create a local SQLite database by running the migration script:
Then, copy the .env.example into a .env.local file:
In the .env.local file, provide your values for OPENAI_API_KEY, PARAGON_SIGNING_KEY, and NEXT_PUBLIC_PARAGON_PROJECT_ID.
Finally, run Playground:
Playground will start locally on port 3000 by default.
Using the Playground
The Playground is intended to help guide development of your own integration-enabled agents.
Try connecting integrations that will be relevant to your customers and iterating on system prompts that reflect the goals of the agents you are building.
Here’s how to start using the Playground:
1. Connect an account in the sidebar
When you click on an integration, the Connect Portal will appear. In your app, you can place the Connect Portal wherever your users will find integrations.
Note: Only Active integrations that are supported by ActionKit will appear in the sidebar.
2. Add Actions to the chat
Once you have connected an integration account, you can add Actions to a chat by expanding the integration in the sidebar and clicking the checkmark next to the action name.
In your app, you can control what Actions a chat has access to with your own application logic.
3. Customize system instructions
Write instructions for your agent in the System Instructions input at top of the conversation.
For example: “You are a sales copilot that assists users with doing research on potential prospects and allows them to update their CRM with their findings…“
4. Send a chat
Try messaging your agent. When your agent uses a tool, a row will appear to show the tool-calling status, with input and output from the ActionKit API.
To start a new chat with new context, click the top-left navigation menu and select New chat. You can also navigate a history of previous chats in the sidebar.
Troubleshooting
Error: Invalid keyData
Error: Invalid keyData
This means that your Signing Key was not correctly formatted or supplied.
Make sure that you have a .env.local file (copied from .env.example) that includes a value for PARAGON_SIGNING_KEY. The value should be on one line, separated with \n.
Integrations are not loading
Integrations are not loading
Check your browser console (Inspect Element > Console).
If you are seeing 401 responses from the Paragon API, double-check the values for your NEXT_PUBLIC_PARAGON_PROJECT_ID and PARAGON_SIGNING_KEY.
Integrations are not appearing
Integrations are not appearing
Verify that ActionKit-compatible integrations have been added to your Paragon project and are Active.
Error generating response. An unknown error occurred.
Error generating response. An unknown error occurred.
Check the shell/terminal window where you are running pnpm dev to see any possible errors.
If you are getting rate limit errors associated with your OpenAI account, the chat may stop or fail to save once the conversation reaches a certain length, or if you select too many tools at once.
- Resolution: Keep message contents smaller in size and restrict tools to only those that are necessary to a given message.