Quick Start (npx)

The fastest way to try agent-auth-playground is with npx.

Just run:

npx agent-auth-playground

The local server starts on http://localhost:4829 and your browser opens automatically.

For advanced setup options, see the Running Agent Auth Playground Guide.

Try a Simple AgentFlow

When you launch the app, a sample AgentFlow is automatically loaded to showcase the platform’s core capabilities.

1. Configure the LLM node by selecting a provider (OpenAI, Gemini, or Anthropic) and adding your API key.
2. Add and configure an MCP client node (without OAuth2).
3. Run the flow and experiment with tool calls within the agentic loop (Without Security Standards).

Securing this Simple AgentFlow

To secure this AgentFlow, integrate authentication using Asgardeo or WSO2 Identity Server. Follow the below steps to enable authentication and protect tool access within this flow.

Prerequisites

Sign up for an account at Asgardeo, or download and set up WSO2 Identity Server from the official website.

Step 1 - Configure the AI Agent Node

1. Register an Interactive AI Agent by following this guide. Make sure to set the callback URL to http://localhost:4829 during registration.
2. Double-click the AI Agent node. In the + Add Agent Credentials section, enter the obtained Agent ID, Agent Secret, Base URL, and Agent Application Client ID, then click Save.
3. Click Test Fetching an Agent Token button to verify that the credentials are correct and a token can be fetched successfully.

Step 2 - Configure the MCP Client Node

1. Register an MCP Client application by following this guide.
2. In the Advanced tab of the MCP Client application enable App-Native Authentication.
3. Double-click the MCP Client node and enable the Use MCP OAuth2 toggle.
4. Under OAuth2 Configuration, click + Add and fill in the Name, Base URL, and Client ID of the registered MCP Client application. Scope is optional - add it if your MCP server requires specific scopes. Click Save.
5. Select the saved configuration from the dropdown.
6. Your MCP server also needs to be secured with the same identity provider. Follow this guide to set that up.
7. Click Initialize & Connect to verify that tool discovery succeeds and the connection to the MCP server is established.

Step 3 - Running the Flow

Once configured, use the Chat panel to trigger the flow. After each execution, click View Auth Flow to open the Auth Flow Inspector, which displays a sequence diagram of all authentication steps and tool calls that occurred during the AgentFlow execution.

Resources

Documentation

• Overview - An introduction to Agent Auth Playground and its core concepts
• AgentFlow Editor - Canvas controls, connections, and keyboard shortcuts
• Persistence - What is stored in your browser and how to manage it

Nodes

• Chat Trigger - Entry point of every AgentFlow
• AI Agent - Reasoning engine with tool-calling loop
• AI Service - Direct call to OpenAI, Gemini, or Anthropic
• MCP Client - Bridge to an external MCP tool server

Example Agent Flows

• Calculator Agent - A calculator agent that uses an MCP tool server protected by Asgardeo / WSO2 IS.
• Travel Agent - An travel agent that uses 5 different mcp servers for travel planning, 2 protected by Asgardeo / WSO2 IS.

Contributing

Contributions are welcome. Please open an issue to discuss what you'd like to change before submitting a pull request. For bugs, include steps to reproduce and the browser console output if relevant.

License

Apache 2.0