@inkeep/agents-manage-ui 0.31.3 → 0.31.5

package/src/components/agent/ship/chat-ui-guide/chat-ui-guide.tsx

@@ -0,0 +1,93 @@
+import type { InkeepAIChatSettings, InkeepBaseSettings } from '@inkeep/agents-ui/types';
+import { CodeIcon, EyeIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { DocsLink, Header } from '../guide-header';
+import { ChatUICode } from './chat-ui-code';
+import { ChatUIPreview } from './chat-ui-preview';
+import { ChatUIComponent, ChatUIPreviewForm } from './chat-ui-preview-form';
+
+interface ChatUIProps {
+  component: ChatUIComponent;
+  baseSettings: InkeepBaseSettings;
+  aiChatSettings: InkeepAIChatSettings;
+  shouldEmitDataOperations: boolean;
+}
+
+export function ChatUIGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const agentUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`;
+  const form = useForm<Partial<ChatUIProps>>({
+    defaultValues: {
+      component: ChatUIComponent.EMBEDDED_CHAT,
+      baseSettings: {
+        primaryBrandColor: '#3784ff',
+      },
+      aiChatSettings: {
+        agentUrl,
+        aiAssistantAvatar: '',
+        introMessage: 'Hi! How can I help?',
+        placeholder: 'How do I get started?',
+      },
+      shouldEmitDataOperations: true,
+    },
+  });
+  const allValues = form.watch();
+  const component = (allValues.component ?? ChatUIComponent.EMBEDDED_CHAT) as ChatUIComponent;
+  const baseSettings = allValues.baseSettings ?? { primaryBrandColor: '#3784ff' };
+  const aiChatSettings = allValues.aiChatSettings ?? {
+    agentUrl,
+  };
+  const shouldEmitDataOperations = allValues.shouldEmitDataOperations ?? true;
+
+  return (
+    <Tabs defaultValue="preview">
+      <Header.Container>
+        <Header.Title title="Chat UI" />
+        <div className="flex items-center gap-2">
+          <TabsList className="h-8">
+            <TabsTrigger value="preview" className="py-0.5 px-2.5 gap-2">
+              <EyeIcon className="size-4" />
+              <span>Preview</span>
+            </TabsTrigger>
+
+            <TabsTrigger value="code" className="py-0.5 px-2.5 gap-2">
+              <CodeIcon className="size-4" />
+              <span>Code</span>
+            </TabsTrigger>
+          </TabsList>
+          {/* todo should this link change based on the react vs js toggle? */}
+          <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/react/chat-button`} />
+        </div>
+      </Header.Container>
+      <TabsContent value="preview">
+        <div className="flex flex-row gap-12 w-full">
+          <ChatUIPreviewForm form={form} />
+          <div className="flex-3/5 w-full h-[500px]">
+            <ChatUIPreview
+              component={component}
+              baseSettings={baseSettings}
+              aiChatSettings={aiChatSettings}
+              shouldEmitDataOperations={shouldEmitDataOperations}
+              // force re-render when shouldEmitDataOperations changes otherwise the headers will not be updated
+              key={shouldEmitDataOperations ? 'true' : 'false'}
+            />
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent value="code">
+        <ChatUICode
+          component={component}
+          baseSettings={{ ...baseSettings }}
+          aiChatSettings={{
+            ...aiChatSettings,
+            apiKey: 'INKEEP_AGENT_API_KEY',
+            headers: { 'x-emit-operations': shouldEmitDataOperations ? 'true' : 'false' },
+          }}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/components/agent/ship/chat-ui-guide/chat-ui-preview-form.tsx

@@ -0,0 +1,83 @@
+import { Info } from 'lucide-react';
+import { Controller, type UseFormReturn } from 'react-hook-form';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericSelect } from '@/components/form/generic-select';
+import { ColorPickerInput } from '@/components/ui/color-picker';
+import { Form, FormItem, FormLabel } from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export enum ChatUIComponent {
+  EMBEDDED_CHAT = 'Embedded Chat',
+  CHAT_BUTTON = 'Chat Button',
+  SIDEBAR_CHAT = 'Sidebar Chat',
+}
+
+interface ChatUIPreviewFormProps {
+  form: UseFormReturn<any>;
+}
+export const ChatUIPreviewForm = ({ form }: ChatUIPreviewFormProps) => {
+  return (
+    <Form {...form}>
+      <form className="space-y-8 flex-2/5">
+        <GenericSelect
+          control={form.control}
+          name="component"
+          label="Component"
+          options={Object.values(ChatUIComponent).map((component) => ({
+            value: component,
+            label: component,
+          }))}
+          selectTriggerClassName="w-full"
+        />
+        <FormItem className="relative">
+          <FormLabel>Primary brand color</FormLabel>
+          <ColorPickerInput
+            color={form.watch('baseSettings.primaryBrandColor')}
+            setColor={(color) => form.setValue('baseSettings.primaryBrandColor', color)}
+            placeholder="#000000"
+          />
+        </FormItem>
+        <GenericInput
+          control={form.control}
+          name="aiChatSettings.aiAssistantAvatar"
+          label="AI assistant avatar"
+          placeholder="https://example.com/assistant-avatar.png"
+        />
+        <GenericInput
+          control={form.control}
+          name="aiChatSettings.introMessage"
+          label="Intro message"
+          placeholder="Hi! How can I help?"
+          description="Supports markdown formatting. For example: **bold** or _italic_ or [link](https://example.com)"
+        />
+        <GenericInput
+          control={form.control}
+          name="aiChatSettings.placeholder"
+          label="Placeholder"
+          placeholder="How do I get started?"
+        />
+        <FormItem className="relative flex flex-row gap-2 items-center w-full justify-between">
+          <div className="flex flex-row gap-2 items-center">
+            <FormLabel>Show data operations</FormLabel>
+            <Tooltip>
+              <TooltipTrigger>
+                <Info className="w-3 h-3 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>
+                Controls whether data operations are included in the response stream.
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <Controller
+            control={form.control}
+            name="shouldEmitDataOperations"
+            render={({ field }) => (
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            )}
+          />
+        </FormItem>
+      </form>
+    </Form>
+  );
+};

package/src/components/agent/ship/chat-ui-guide/chat-ui-preview.tsx

@@ -0,0 +1,105 @@
+import { InkeepChatButton, InkeepEmbeddedChat, InkeepSidebarChat } from '@inkeep/agents-ui';
+import type { InkeepAIChatSettings, InkeepBaseSettings } from '@inkeep/agents-ui/types';
+import { SidebarIcon } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { ChatUIComponent } from './chat-ui-preview-form';
+
+const styleOverrides = `
+  .ikp-chat-bubble__root {
+    position: absolute;
+  }
+  .ikp-chat-button__container {
+    position: absolute;
+  }
+  .ikp-sidebar-chat__root {
+    border-radius: 0px 9px 9px 0px;
+  }
+  [data-sidebar] .ikp-ai-chat-wrapper {
+    border-radius: inherit;
+  }
+`;
+
+export interface ChatUIPreviewProps {
+  component: ChatUIComponent;
+  baseSettings: InkeepBaseSettings;
+  aiChatSettings: InkeepAIChatSettings;
+  shouldEmitDataOperations: boolean;
+}
+const componentMap = {
+  [ChatUIComponent.EMBEDDED_CHAT]: InkeepEmbeddedChat,
+  [ChatUIComponent.CHAT_BUTTON]: InkeepChatButton,
+  [ChatUIComponent.SIDEBAR_CHAT]: InkeepSidebarChat,
+};
+
+export function ChatUIPreview({
+  component,
+  baseSettings,
+  aiChatSettings,
+  shouldEmitDataOperations,
+}: ChatUIPreviewProps) {
+  const { tenantId, projectId, agentId } = useParams<{
+    tenantId: string;
+    projectId: string;
+    agentId: string;
+  }>();
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET } = useRuntimeConfig();
+
+  const Component = componentMap[component];
+
+  return (
+    <div
+      className={`relative flex flex-row gap-2 h-full w-full  ${component === ChatUIComponent.EMBEDDED_CHAT ? 'bg-background justify-center' : 'rounded-lg border bg-sidebar justify-between'}`}
+    >
+      {component === ChatUIComponent.SIDEBAR_CHAT && (
+        <div className="p-4">
+          <Button variant="outline" size="sm" data-inkeep-sidebar-chat-trigger>
+            <SidebarIcon className="size-4" />
+            Toggle sidebar
+          </Button>
+        </div>
+      )}
+      <div
+        className={`h-full ${component === ChatUIComponent.SIDEBAR_CHAT ? 'rounded-[0_9px_9px_0]' : 'w-full'} ${component === ChatUIComponent.EMBEDDED_CHAT ? 'max-w-[500px]' : ''}`}
+      >
+        <Component
+          shouldAutoFocusInput={false}
+          openSettings={{
+            defaultOpen: true,
+          }}
+          baseSettings={{
+            ...baseSettings,
+            colorMode: {
+              sync: {
+                target: document.documentElement,
+                attributes: ['class'],
+                isDarkMode: (attributes: Record<string, string | null>) =>
+                  !!attributes?.class?.includes('dark'),
+              },
+            },
+            theme: {
+              styles: [
+                {
+                  key: 'custom-styles',
+                  type: 'style',
+                  value: styleOverrides,
+                },
+              ],
+            },
+          }}
+          aiChatSettings={{
+            ...aiChatSettings,
+            headers: {
+              'x-inkeep-tenant-id': tenantId,
+              'x-inkeep-project-id': projectId,
+              'x-inkeep-agent-id': agentId,
+              Authorization: `Bearer ${PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET}`,
+              'x-emit-operations': shouldEmitDataOperations ? 'true' : 'false',
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/agent/ship/chat-ui-guide/snippets/index.ts

@@ -0,0 +1,7 @@
+export { jsChatButtonTemplate } from './js-chat-button';
+export { jsEmbeddedChatTemplate } from './js-embedded-chat';
+export { jsScriptTagSnippet } from './js-script-tag';
+export { jsSidebarChatTemplate } from './js-sidebar-chat';
+export { reactComponentTemplate } from './react-component';
+export { reactInstallSnippet } from './react-install';
+export { reactSidebarComponentTemplate } from './react-sidebar-component';

package/src/components/agent/ship/chat-ui-guide/snippets/js-chat-button.ts

@@ -0,0 +1,10 @@
+export const jsChatButtonTemplate = `Add the chat button component to your application:
+
+\`\`\`js
+const config = {
+  baseSettings: {{BASE_SETTINGS}},
+  aiChatSettings: {{AI_CHAT_SETTINGS}}
+};
+
+const chatButton = Inkeep.ChatButton(config);
+\`\`\``;

package/src/components/agent/ship/chat-ui-guide/snippets/js-embedded-chat.ts

@@ -0,0 +1,22 @@
+export const jsEmbeddedChatTemplate = `Add the embedded chat component to your application:
+
+Define an element in your page that will be the "container" for the embedded chat.
+
+\`\`\`html
+<div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);">
+  <div style="max-height: 600px; height: 100%;">
+    <div id="ikp-embedded-chat-target"></div>
+  </div>
+</div>
+\`\`\`
+
+Insert the EmbeddedChat widget by using the \`Inkeep.EmbeddedChat()\` function.
+
+\`\`\`js
+const config = {
+  baseSettings: {{BASE_SETTINGS}},
+  aiChatSettings: {{AI_CHAT_SETTINGS}}
+};
+
+const embeddedChat = Inkeep.EmbeddedChat("#ikp-embedded-chat-target", config);
+\`\`\``;

package/src/components/agent/ship/chat-ui-guide/snippets/js-script-tag.ts

@@ -0,0 +1,9 @@
+export const jsScriptTagSnippet = `Add the below script tag to the \`<head>\` or \`<body>\` of your website.
+
+\`\`\`html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js"
+  defer
+></script>
+\`\`\``;

package/src/components/agent/ship/chat-ui-guide/snippets/js-sidebar-chat.ts

@@ -0,0 +1,25 @@
+export const jsSidebarChatTemplate = `Add the sidebar chat component to your application:
+
+Define an element in your page that will be the "container" for the sidebar chat. Also add a button that will trigger the sidebar chat and give it the data attribute \`data-inkeep-sidebar-chat-trigger\`.
+
+\`\`\`html
+<div style="display: flex; flex-direction: row; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow: hidden;">
+  <div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh; padding: 0; margin: 0; overflow-y: auto; flex: 1;">
+    <!-- your app content here -->
+    <button data-inkeep-sidebar-chat-trigger="">Toggle Sidebar Chat</button>
+  </div>
+  <!-- the sidebar chat will be inserted into this div -->
+  <div id="ikp-sidebar-chat-target"></div>
+</div>
+\`\`\`
+
+Insert the SidebarChat widget by using the \`Inkeep.SidebarChat()\` function.
+
+\`\`\`js
+const config = {
+  baseSettings: {{BASE_SETTINGS}},
+  aiChatSettings: {{AI_CHAT_SETTINGS}}
+};
+
+const sidebarChat = Inkeep.SidebarChat("#ikp-sidebar-chat-target", config);
+\`\`\``;

package/src/components/agent/ship/chat-ui-guide/snippets/react-component.ts

@@ -0,0 +1,10 @@
+export const reactComponentTemplate = `import { {{COMPONENT_NAME}}, type {{COMPONENT_NAME}}Props } from "@inkeep/agents-ui";
+
+const props: {{COMPONENT_NAME}}Props = {
+  baseSettings: {{BASE_SETTINGS}},
+  aiChatSettings: {{AI_CHAT_SETTINGS}},
+};
+
+export const InkeepWidget = () => {
+  return <{{COMPONENT_NAME}} {...props} />;
+};`;

package/src/components/agent/ship/chat-ui-guide/snippets/react-install.ts

@@ -0,0 +1,5 @@
+export const reactInstallSnippet = `Install the package:
+
+\`\`\`bash
+npm install @inkeep/agents-ui
+\`\`\``;

package/src/components/agent/ship/chat-ui-guide/snippets/react-sidebar-component.ts

@@ -0,0 +1,17 @@
+export const reactSidebarComponentTemplate = `import { {{COMPONENT_NAME}}, type {{COMPONENT_NAME}}Props } from "@inkeep/agents-ui";
+
+const props: {{COMPONENT_NAME}}Props = {
+  baseSettings: {{BASE_SETTINGS}},
+  aiChatSettings: {{AI_CHAT_SETTINGS}},
+};
+
+export const InkeepWidget = () => {
+  return (
+    <>
+      <button data-inkeep-sidebar-chat-trigger>
+        Toggle sidebar
+      </button>
+      <{{COMPONENT_NAME}} {...props} />
+    </>
+  );
+};`;

package/src/components/agent/ship/guide-header.tsx

@@ -0,0 +1,30 @@
+import { BookOpen } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export const Header = {
+  Container: ({ children }: { children: React.ReactNode }) => {
+    return <div className="flex justify-between items-center mb-6">{children}</div>;
+  },
+  Title: ({ title }: { title: string }) => {
+    return <h3 className="text-md font-medium">{title}</h3>;
+  },
+  Description: ({ description }: { description: string }) => {
+    return <p className="text-sm text-muted-foreground">{description}</p>;
+  },
+};
+
+interface DocsLinkProps {
+  href: string;
+}
+
+export function DocsLink({ href }: DocsLinkProps) {
+  return (
+    <Button asChild variant="outline" size="sm">
+      <Link href={href} target="_blank" rel="noreferrer noopener">
+        <BookOpen className="size-4" />
+        View Docs
+      </Link>
+    </Button>
+  );
+}

package/src/components/agent/ship/mcp-guide/mcp-guide.tsx

@@ -0,0 +1,96 @@
+import type { LucideProps } from 'lucide-react';
+import { Streamdown } from 'streamdown';
+import { ClaudeIcon } from '@/components/icons/claude';
+import { CursorIcon } from '@/components/icons/cursor';
+import { VSCodeIcon } from '@/components/icons/vs-code';
+import { WindsurfIcon } from '@/components/icons/windsurf';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { useAgentStore } from '@/features/agent/state/use-agent-store';
+import { DocsLink, Header } from '../guide-header';
+import { replaceTemplatePlaceholders, toCamelCase } from '../utils';
+import { claudeCodeTemplate, cursorTemplate, vscodeTemplate, windsurfTemplate } from './snippets';
+
+const TAB_VALUES = {
+  CURSOR: 'cursor',
+  VS_CODE: 'vs-code',
+  WIND_SURF: 'windsurf',
+  CLAUDE_CODE: 'claude-code',
+} as const;
+
+type TabValue = (typeof TAB_VALUES)[keyof typeof TAB_VALUES];
+
+type TabItem = {
+  label: string;
+  value: TabValue;
+  content: string;
+  IconComponent?: React.ComponentType<LucideProps>;
+};
+
+const tabItems: TabItem[] = [
+  {
+    label: 'Cursor',
+    value: TAB_VALUES.CURSOR,
+    content: cursorTemplate,
+    IconComponent: CursorIcon,
+  },
+  {
+    label: 'VS Code',
+    value: TAB_VALUES.VS_CODE,
+    content: vscodeTemplate,
+    IconComponent: VSCodeIcon,
+  },
+  {
+    label: 'Windsurf',
+    value: TAB_VALUES.WIND_SURF,
+    content: windsurfTemplate,
+    IconComponent: WindsurfIcon,
+  },
+  {
+    label: 'Claude Code',
+    value: TAB_VALUES.CLAUDE_CODE,
+    content: claudeCodeTemplate,
+    IconComponent: ClaudeIcon,
+  },
+];
+
+export function McpGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const mcpServerUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/v1/mcp`;
+  const metadata = useAgentStore((state) => state.metadata);
+  const agentName = toCamelCase(metadata?.name || 'agentName');
+
+  return (
+    <div>
+      <Header.Container>
+        <Header.Title title="MCP Server" />
+        <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/mcp-server`} />
+      </Header.Container>
+      <Tabs defaultValue={TAB_VALUES.CURSOR}>
+        <TabsList className="mb-3 bg-transparent gap-3 px-0">
+          {tabItems.map((item) => (
+            <TabsTrigger
+              key={item.value}
+              value={item.value}
+              className="rounded-full border gap-2 data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:border-primary data-[state=active]:shadow-none"
+            >
+              {item.IconComponent && <item.IconComponent className="size-4" />}
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabItems.map((item) => (
+          <TabsContent key={item.value} value={item.value}>
+            <Streamdown>
+              {replaceTemplatePlaceholders(item.content, {
+                AGENT_NAME: agentName,
+                MCP_SERVER_URL: mcpServerUrl,
+              })}
+            </Streamdown>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

package/src/components/agent/ship/mcp-guide/snippets/claude-code.ts

@@ -0,0 +1,16 @@
+export const claudeCodeTemplate = `
+1. Install [Claude Code](https://claude.com/product/claude-code) by running the following command in your terminal:
+
+\`\`\`bash
+curl -fsSL https://claude.ai/install.sh | bash
+\`\`\`
+
+2. Navigate to the folder where your project is located and run the following command to add the MCP server to your Claude Code settings.
+
+\`\`\`bash
+claude mcp add --transport http --scope local {{AGENT_NAME}} {{MCP_SERVER_URL}} --header "Authorization: Bearer INKEEP_AGENT_API_KEY"
+\`\`\`
+
+3. You can verify the connection by entering the \`claude\` command and asking a question to Claude Code.
+
+`;

package/src/components/agent/ship/mcp-guide/snippets/cursor.ts

@@ -0,0 +1,27 @@
+export const cursorTemplate = `
+1. Open [Cursor](https://cursor.com/docs/context/mcp). Create a \`.cursor\` directory in your project root if there isn't one already.
+
+2. Create or open the \`mcp.json\` file in the \`.cursor\` directory.
+
+3. Add the following configuration:
+\`\`\`bash
+{
+  "mcpServers": {
+    "{{AGENT_NAME}}": {
+      "type": "mcp",
+      "url": "{{MCP_SERVER_URL}}",
+      "headers": {
+        "Authorization": "Bearer INKEEP_AGENT_API_KEY"
+      }
+    }
+  }
+}
+\`\`\`
+
+4. Save the configuration file. You may need to restart Cursor to see the changes.
+
+5. You can also add the configuration globally by opening the command palette (\`Cmd/Ctrl + Shift + P\`) and selecting **Cursor Settings > MCP > Add new global MCP server**.
+
+6. You can verify the connection by opening the composer (\`Cmd + I\`) in **agent mode** and asking a question.
+
+`;

package/src/components/agent/ship/mcp-guide/snippets/index.ts

@@ -0,0 +1,4 @@
+export { claudeCodeTemplate } from './claude-code';
+export { cursorTemplate } from './cursor';
+export { vscodeTemplate } from './vscode';
+export { windsurfTemplate } from './windsurf';

package/src/components/agent/ship/mcp-guide/snippets/vscode.ts

@@ -0,0 +1,27 @@
+export const vscodeTemplate = `
+
+1. Open [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/mcp-servers). Create a \`.vscode\` directory in your project root if there isn't one already.
+
+2. Create or open the \`mcp.json\` file in the \`.vscode\` directory.
+
+3. Add the following configuration:
+
+\`\`\`bash
+{
+  "servers": {
+    "{{AGENT_NAME}}": {
+      "type": "http",
+      "url": "{{MCP_SERVER_URL}}",
+      "headers": {
+        "Authorization": "Bearer INKEEP_AGENT_API_KEY"
+      }
+    }
+  }
+}
+\`\`\`
+
+4. Save the configuration file. You may need to restart VS Code to see the changes.
+
+5. You can verify the connection by opening the composer (\`Ctrl + Alt + I\`) in **agent mode** and asking a question.
+
+`;

package/src/components/agent/ship/mcp-guide/snippets/windsurf.ts

@@ -0,0 +1,25 @@
+export const windsurfTemplate = `
+
+1. Open [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp). Create a \`.windsurf\` directory in your project root if there isn't one already.
+
+2. Create or open the \`mcp_config.json\` file in the \`.windsurf\` directory.
+
+3. Add the following configuration:
+
+\`\`\`bash
+{
+  "mcpServers": {
+    "{{AGENT_NAME}}": {
+      "serverUrl": "{{MCP_SERVER_URL}}",
+      "headers": {
+        "Authorization": "Bearer INKEEP_AGENT_API_KEY"
+      }
+    }
+  }
+}
+\`\`\`
+
+4. Save the configuration file. You may need to restart Windsurf to see the changes.
+
+5. You can verify the connection by opening the composer (\`Cmd/Ctrl + L\`) in **code mode** and asking a question.
+`;