[Feat] UI - Add Allowed MCPs to Creating/Editing Organizations (#11893)

* Add MCP Org controls to UI

* Add allowed MCPs for Orgs
This commit is contained in:
Ishaan Jaff 2025-06-19 12:50:09 -07:00 • committed by GitHub
parent b30bd155d3
commit c975355d47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 69 additions and 6 deletions

View file

@ -30,6 +30,7 @@ import UserSearchModal from "../common_components/user_search_modal";
import MemberModal from "../team/edit_membership";
import ObjectPermissionsView from "../object_permissions_view";
import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
interface OrganizationInfoProps {
organizationId: string;
@ -155,10 +156,11 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
};
// Handle object_permission updates
if (values.vector_stores !== undefined) {
if (values.vector_stores !== undefined || values.mcp_servers !== undefined) {
updateData.object_permission = {
...orgData?.object_permission,
vector_stores: values.vector_stores || []
vector_stores: values.vector_stores || [],
mcp_servers: values.mcp_servers || []
};
}
@ -362,7 +364,8 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
max_budget: orgData.litellm_budget_table.max_budget,
budget_duration: orgData.litellm_budget_table.budget_duration,
metadata: orgData.metadata ? JSON.stringify(orgData.metadata, null, 2) : "",
vector_stores: orgData.object_permission?.vector_stores || []
vector_stores: orgData.object_permission?.vector_stores || [],
mcp_servers: orgData.object_permission?.mcp_servers || []
}}
layout="vertical"
>
@ -419,6 +422,15 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
/>
</Form.Item>
<Form.Item label="MCP Servers" name="mcp_servers">
<MCPServerSelector
onChange={(values) => form.setFieldValue('mcp_servers', values)}
value={form.getFieldValue('mcp_servers')}
accessToken={accessToken || ""}
placeholder="Select MCP servers"
/>
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} />
</Form.Item>

View file

@ -30,6 +30,7 @@ import { message } from 'antd';
import OrganizationInfoView from './organization/organization_view';
import { Organization, organizationListCall, organizationCreateCall, organizationDeleteCall } from './networking';
import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
import MCPServerSelector from "./mcp_server_management/MCPServerSelector";
interface OrganizationsTableProps {
organizations: Organization[];
@ -117,6 +118,15 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
delete values.allowed_vector_store_ids;
}
// Transform allowed_mcp_server_ids into object_permission
if (values.allowed_mcp_server_ids && values.allowed_mcp_server_ids.length > 0) {
if (!values.object_permission) {
values.object_permission = {};
}
values.object_permission.mcp_servers = values.allowed_mcp_server_ids;
delete values.allowed_mcp_server_ids;
}
await organizationCreateCall(accessToken, values);
setIsOrgModalVisible(false);
form.resetFields();
@ -237,13 +247,34 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
className="mt-4"
help="Select vector stores this organization can access. Leave empty for access to all vector stores"
>
<VectorStoreSelector
<VectorStoreSelector
onChange={(values) => form.setFieldValue('allowed_vector_store_ids', values)}
value={form.getFieldValue('allowed_vector_store_ids')}
accessToken={accessToken || ''}
placeholder="Select vector stores (optional)"
/>
</Form.Item>
/>
</Form.Item>
<Form.Item
label={
<span>
Allowed MCP Servers{' '}
<Tooltip title="Select which MCP servers this organization can access by default. Leave empty for access to all MCP servers">
<InfoCircleOutlined style={{ marginLeft: '4px' }} />
</Tooltip>
</span>
}
name="allowed_mcp_server_ids"
className="mt-4"
help="Select MCP servers this organization can access. Leave empty for access to all MCP servers"
>
<MCPServerSelector
onChange={(values) => form.setFieldValue('allowed_mcp_server_ids', values)}
value={form.getFieldValue('allowed_mcp_server_ids')}
accessToken={accessToken || ''}
placeholder="Select MCP servers (optional)"
/>
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} />
@ -533,6 +564,26 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
placeholder="Select vector stores (optional)"
/>
</Form.Item>
<Form.Item
label={
<span>
Allowed MCP Servers{' '}
<Tooltip title="Select which MCP servers this organization can access by default. Leave empty for access to all MCP servers">
<InfoCircleOutlined style={{ marginLeft: '4px' }} />
</Tooltip>
</span>
}
name="allowed_mcp_server_ids"
className="mt-4"
help="Select MCP servers this organization can access. Leave empty for access to all MCP servers"
>
<MCPServerSelector
onChange={(values) => form.setFieldValue('allowed_vector_store_ids', values)}
value={form.getFieldValue('allowed_vector_store_ids')}
accessToken={accessToken || ''}
placeholder="Select vector stores (optional)"
/>
</Form.Item>
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={4} />