Skip to main content

AI for app development

  • How-to guide
  • 8-min read

The App Development MCP (Model Context Protocol) server connects your AI assistant to the latest Dynatrace app development resources. Combined with custom instructions, your AI assistant receives additional context about your project structure, conventions, and development practices.

You can configure custom instructions in a file in the root of your project. The file name depends on the AI tool you use: CLAUDE.md for Claude Code, or AGENTS.md for other tools such as OpenAI Codex. In this document we use CLAUDE.md, as Claude Code is our recommended tool for AI-assisted app development.

With this integration, your AI assistant can:

  • Understand the Dynatrace platform architecture and patterns.
  • Build user interfaces with Strato Design System building blocks, including Strato React components and design tokens.
  • Align app experiences with Dynatrace Experience Standards.
  • Explore SDKs.
  • Build DQL queries.
  • Execute commands from the Dynatrace App Toolkit.
Note

Use the Dynatrace MCP server when you want your AI assistant to interact with a Dynatrace environment, for example, query and inspect telemetry like metrics, logs, and traces, or help with incident investigation and troubleshooting.

Prerequisites​

Before setting up AI assistance for app development:

  • Complete the "Before you begin" steps outlined in the Getting started documentation.
  • Install an AI development tool that supports MCP. We recommend Claude Code.
  • Optionally—only if you plan to use an AI tool inside Visual Studio Code—make sure you have Visual Studio Code 1.102 or higher, which is required for MCP support.

Setup instructions​

Step 1: Add the instructions file​

  • For new apps—the Dynatrace App Toolkit version 1.10 or higher automatically places the CLAUDE.md instructions file in the root of your project.

  • For existing apps—create a CLAUDE.md file in the root of your app project repository and copy the contents from the AGENTS.md template into it.

Step 2: Configure your AI tool​

According to your development setup, follow the instructions for the AI tool you're using.

Claude Code​

Add the MCP server to your project by running:

claude mcp add dt-app-mcp -- npx -y dt-app-mcp

Verify the server is active by entering /mcp within a Claude Code session. Make sure the server and all its tools are listed as active.

Visual Studio Code (with the Dynatrace Apps extension)​

Add the Dynatrace Apps extension to your Visual Studio Code. The extension registers the MCP server automatically via npx—no manual setup required.

Other AI tools​

Most AI tools support MCP servers via a JSON configuration file. Add an entry to your tool's MCP configuration with command: "npx" and args: ["-y", "dt-app-mcp"], then restart the tool for the changes to take effect. Refer to your AI tool's documentation for the exact configuration format and file location.

Step 3: Confirm that the dt-app-mcp MCP server is working correctly​

Test the setup by asking your AI assistant:

  • Which Strato component can I use to display a numeric return value of a DQL query?
  • How can I query all logs with ERROR status?

Your AI assistant should invoke tools from the MCP server before providing its response.

Available tools​

The App Development MCP server exposes these tools:

  • strato_search—searches Strato components by name or keyword.
  • strato_get_component—gets Strato component docs (props, TypeScript types, examples, imports).
  • strato_get_usecase_details—gets code for Strato component example use cases.
  • get_exp_standard—gets the latest Dynatrace Experience Standards to help ensure your app follows approved experience patterns.
  • dql_search—searches the DQL knowledge base for syntax, functions, examples, and best practices.
  • sdk_search—lists available Dynatrace SDK documentation packages.
  • sdk_get_doc—gets the full documentation for a Dynatrace SDK package (API reference, parameters, return types, examples).

Start vibe coding​

Tip

When using AI to generate code, use a capable model, such as Claude Sonnet or Opus.

Once the dt-app-mcp MCP server is set up, running, and CLAUDE.md is in place, you can start vibe coding a Dynatrace app.

Based on an empty app created with the npx dt-app create logs-viewer command, use AI to display a table of logs.

With Claude Sonnet or Opus, the MCP server and CLAUDE.md file provide enough context for the AI to produce a working app from a simple prompt:

Fetch all the logs from the past 24 hours and display the timestamp and content in a paginated table.

As it works, the AI agent calls MCP server tools—such as strato_get_component, dql_search, sdk_get_doc, and strato_get_usecase_details—to understand how to implement it properly.

Tip

AI output is non-deterministic. You should get a working app, but the exact implementation might vary between runs. Always review AI-produced code.

Example result​

ui/app/pages/Home.tsx
import React, { useMemo } from 'react';

import { Flex } from '@dynatrace/strato-components/layouts';
import { Heading } from '@dynatrace/strato-components/typography';
import { DataTable, type DataTableColumnDef } from '@dynatrace/strato-components/tables';
import { useDql } from '@dynatrace-sdk/react-hooks';

type LogRecord = {
  timestamp: string;
  content: string;
};

export const Home = () => {
  // Fetch logs from the past 24 hours
  const { data, isLoading } = useDql<LogRecord>({
    query: 'fetch logs, from: now() - 24h | fields timestamp, content',
  });

  // Define columns for the DataTable
  const columns = useMemo<DataTableColumnDef<LogRecord>[]>(
    () => [
      {
        header: 'Timestamp',
        accessor: 'timestamp',
        id: 'timestamp',
        columnType: 'date',
        width: 'content',
      },
      {
        header: 'Content',
        accessor: 'content',
        id: 'content',
        columnType: 'log-content',
      },
    ],
    [],
  );

  // Memoize the data to avoid unnecessary re-renders
  const logsData = useMemo(() => data?.records || [], [data?.records]);

  return (
    <Flex flexDirection="column" padding={32} gap={16}>
      <Heading>Logs from the Past 24 Hours</Heading>

      <DataTable columns={columns} data={logsData} loading={isLoading} fullWidth>
        <DataTable.Pagination defaultPageSize={10} defaultPageIndex={0} />
      </DataTable>
    </Flex>
  );
};

The example code is correct and works well, but you must always review AI-produced code. Here are some improvements you can apply to the code produced by the AI agent:

  • Extract the DQL query into a constant instead of passing it inline.
  • The memoization shown is not necessary.
  • The default page index is 0; you don’t need to set it.

Preview your app​

To preview your app, run the following command:

npx dt-app dev

Once the preview builds, you should see a paginated logs table.

Still have questions?
Find answers in the Dynatrace Community