diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index 2d25953..4b78d7b 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -11,6 +11,7 @@
 import "./sketch-tool-card-read-image";
 import "./sketch-tool-card-browser-recent-console-logs";
 import "./sketch-tool-card-browser-clear-console-logs";
+import "./sketch-tool-card-dodo-get-project-config";
 
 @customElement("sketch-tool-calls")
 export class SketchToolCalls extends SketchTailwindElement {
@@ -107,6 +108,11 @@
           .open=${open}
           .toolCall=${toolCall}
         ></sketch-tool-card-browser-clear-console-logs>`;
+      case "dodo_get_project_config":
+        return html`<sketch-tool-card-dodo-get-project-config
+          .open=${open}
+          .toolCall=${toolCall}
+        ></sketch-tool-card-dodo>`;
     }
     return html`<sketch-tool-card-generic
       .open=${open}
diff --git a/webui/src/web-components/sketch-tool-card-dodo-get-project-config.ts b/webui/src/web-components/sketch-tool-card-dodo-get-project-config.ts
new file mode 100644
index 0000000..23df1b3
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-dodo-get-project-config.ts
@@ -0,0 +1,85 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+
+type DodoOutput = {
+  config: string;
+};
+
+@customElement("sketch-tool-card-dodo-get-project-config")
+export class SketchToolCardDodoGetProjectConfig extends LitElement {
+  @property()
+  toolCall: ToolCall;
+
+  @property()
+  open: boolean;
+
+  static styles = css`
+    .summary-text {
+      font-family: monospace;
+      color: #444;
+      word-break: break-all;
+    }
+
+    .selector-input {
+      font-family: monospace;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      display: inline-block;
+      word-break: break-all;
+    }
+  `;
+
+  render() {
+    // Parse the input to get selector
+    console.log(this.toolCall);
+    let apiBaseAddress = "";
+    let projectId = "";
+    try {
+      if (this.toolCall?.input) {
+        const inp = JSON.parse(this.toolCall.input);
+        apiBaseAddress = inp.apiBaseAddress || "";
+        projectId = inp.projectId || "";
+      }
+    } catch (e) {
+      console.error("Error parsing dodo input:", e);
+    }
+
+    let output: DodoOutput | null = null;
+    try {
+      if (this.toolCall?.result_message?.tool_result) {
+        output = JSON.parse(this.toolCall.result_message.tool_result);
+      }
+    } catch (e) {
+      console.error("Error parsing dodo output:", e);
+    }
+
+    if (output == null) {
+      throw new Error("No output from dodo tool call");
+    }
+
+    return html`
+      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+        <span slot="summary" class="summary-text"> 🖱️ ${projectId} </span>
+        <div slot="input">
+          <div>
+            API Base Address: <span class="selector-input">${apiBaseAddress}</span>
+          </div>
+          <div>
+            Project ID: <span class="selector-input">${projectId}</span>
+          </div>
+        </div>
+        <div slot="result">
+          <pre>${output.config}</pre>
+        </div>
+      </sketch-tool-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-tool-card-dodo-get-project-config": SketchToolCardDodoGetProjectConfig;
+  }
+}