Get the source on GitHub

Find the source code for ActionKit Playground on our GitHub repository.

​
Setup

To run the ActionKit Playground locally, you will need the following:

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

​
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

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

Verify that ActionKit-compatible integrations have been added to your Paragon project and are Active.

​
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.