Appa Tools documentation for MCP Studio, including setup, guides, concepts, and API-related reference content.

Skip to main content

Sample apps and playground

Use the sample apps and playground to learn how MCP Studio SDK supports different context workflows. Each sample shows how a product can help users connect trusted sources, deploy MCP servers, and keep AI answers grounded.

AudienceDevelopers, sales engineers, and product teams evaluating embedded MCP Studio workflows
PrerequisitesNode.js, Git, access to the public sample repository, and an SDK account for real credentials

Public sample app repository​

GitHub repo: mcp-studio-sdk-sample-apps

This repo includes three simple Next.js fullstack concepts:

  • HelpDesk IQ: A support platform that embeds MCP Studio for docs-grounded ticket responses.
  • PolicyPilot: A compliance platform that embeds MCP Studio for policy and control retrieval.
  • KnowledgeCloud LMS: A learning platform that embeds MCP Studio for training assistants.

Each app is a complete integration rather than a snippet demo. It includes:

  • A mock API route, so the page has real product context around the embed.
  • A server-side session route that exchanges your client secret for an attribution token.
  • An embed component that receives only the public client id and that token.
  • A per-app README describing the configuration choices and the credential flow.

Running them​

The samples require your own credentials and will not render the wizard without them. That is deliberate: a client id alone produces an unverified session, so an embed that ran without a secret would be teaching the wrong integration.

git clone https://github.com/zthewriter/mcp-studio-sdk-sample-apps
cd mcp-studio-sdk-sample-apps
npm install

cd apps/helpdesk-iq
cp .env.example .env.local

Paste both values from the developer portal into .env.local:

MCP_STUDIO_CLIENT_ID=your_client_id_here
MCP_STUDIO_CLIENT_SECRET=your_client_secret_here

Then run any app from the repo root. Ports differ so you can run all three at once:

npm run dev:helpdesk    # http://localhost:3000
npm run dev:policy      # http://localhost:3001
npm run dev:lms         # http://localhost:3002

If a credential is missing or wrong, the app tells you which one instead of failing silently. Neither variable is prefixed NEXT_PUBLIC_, because Next.js inlines those into the browser bundle. See Verify embed sessions for why the secret stays on your server.

Interactive playground​

Playground URL: appatools.com/mcp-studio-sdk/playground

In the playground, you can:

  1. Start from a default HelpDesk IQ-style SDK configuration.
  2. Edit configuration JSON in the editor.
  3. Click Save changes.
  4. Review the updates in the demo app panel.

When you are ready for deeper options, continue with: