CopilotForXcode/Core/Sources/HostApp/MCPSettings/MCPIntroView.swift at d3cd006e3c7b366fec801e18a9ce5167a4f7da65 · davido7-sudo/CopilotForXcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import Client
import Foundation
import Logger
import SharedUIComponents
import SwiftUI
import Toast

struct MCPIntroView: View {
    var exampleConfig: String {
        """
        {
            "servers": {
                "my-mcp-server": {
                    "type": "stdio",
                    "command": "my-command",
                    "args": [],
                    "env": {
                        "TOKEN": "my_token"
                    }
                }
            }
        }
        """
    }

    @State private var isExpanded = true

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            GroupBox(
                label: Text("Model Context Protocol (MCP) Configuration")
                    .fontWeight(.bold)
            ) {
                Text(
                    "MCP is an open standard that connects AI models to external tools. In Xcode, it enhances GitHub Copilot's agent mode by connecting to any MCP server and integrating its tools into your workflow. [Learn More](https://modelcontextprotocol.io/introduction)"
                )
            }.groupBoxStyle(CardGroupBoxStyle())

            DisclosureGroup(isExpanded: $isExpanded) {
                exampleConfigView()
            } label: {
                sectionHeader()
            }
            .padding(.horizontal, 0)
            .padding(.vertical, 10)

            Button {
                openConfigFile()
            } label: {
                HStack(spacing: 0) {
                    Image(systemName: "square.and.pencil")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 12, height: 12, alignment: .center)
                        .padding(4)
                    Text("Edit Config")
                }
                .conditionalFontWeight(.semibold)
            }
            .buttonStyle(.borderedProminentWhite)
            .help("Configure your MCP server")
        }
    }

    @ViewBuilder
    private func exampleConfigView() -> some View {
        Text(exampleConfig)
            .font(.system(.body, design: .monospaced))
            .padding(.horizontal, 16)
            .padding(.top, 8)
            .padding(.bottom, 6)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(
                Color(nsColor: .textBackgroundColor).opacity(0.5)
            )
            .textSelection(.enabled)
            .cornerRadius(4)
            .overlay(
                RoundedRectangle(cornerRadius: 4)
                .inset(by: 0.5)
                .stroke(Color("GroupBoxStrokeColor"), lineWidth: 1)
            )
    }

    @ViewBuilder
    private func sectionHeader() -> some View {
        HStack(spacing: 8) {
            Text("Example Configuration").foregroundColor(.primary.opacity(0.85))

            CopyButton(
                copy:  {
                    NSPasteboard.general.clearContents()
                    NSPasteboard.general.setString(exampleConfig, forType: .string)
                },
                foregroundColor: .primary.opacity(0.85),
                fontWeight: .semibold
            )
            .frame(width: 10, height: 10)
        }
        .padding(.leading, 4)
    }

    private func openConfigFile() {
        let url = URL(fileURLWithPath: mcpConfigFilePath)
        NSWorkspace.shared.open(url)
    }
}

#Preview {
    MCPIntroView()
        .frame(width: 800)
}