Skip to main content
Get the source on GitHubFind the source code for AI Agent Playground on our GitHub repository.

​
Setup

To run the AI Agent Playground locally, you will need the following:
You can copy your Project ID by clicking Copy Project ID under the Environment switcher:
Start by cloning the source of Playground locally: 
git clone [email protected]:useparagon/actionkit-playground.git && cd actionkit-playground
Install the dependencies with pnpm: 
pnpm install
Next, create a local SQLite database by running the migration script: 
pnpm migrate
Then, copy the .env.example into a .env.local file: 
cp .env.example .env.local
In the .env.local file, provide your values for OPENAI_API_KEY, PARAGON_SIGNING_KEY, and NEXT_PUBLIC_PARAGON_PROJECT_ID. Finally, run Playground: 
pnpm dev
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

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.
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.
Verify that ActionKit-compatible integrations have been added to your Paragon project and are Active.
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.
⌘I