oxios 1.12.0

Oxios Agent OS — Agent Operating System powered by oxi-sdk
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

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useMcpRegisterServer } from '@/hooks/use-mcp'

interface AddServerDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AddServerDialog({ open, onOpenChange }: AddServerDialogProps) {
  const { t } = useTranslation()
  const [name, setName] = useState('')
  const [command, setCommand] = useState('')
  const [args, setArgs] = useState('')

  const registerServer = useMcpRegisterServer()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim() || !command.trim()) return

    const parsedArgs = args.trim()
      ? args
          .split(',')
          .map((a) => a.trim())
          .filter(Boolean)
      : []

    registerServer.mutate(
      { name: name.trim(), command: command.trim(), args: parsedArgs },
      {
        onSuccess: () => {
          setName('')
          setCommand('')
          setArgs('')
          onOpenChange(false)
        },
      },
    )
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t('mcp.addServer', 'Add MCP Server')}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="mcp-name">{t('mcp.serverName', 'Server Name')}</Label>
            <Input
              id="mcp-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder={t('mcp.serverNamePlaceholder', 'e.g. filesystem')}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="mcp-command">{t('mcp.command', 'Command')}</Label>
            <Input
              id="mcp-command"
              value={command}
              onChange={(e) => setCommand(e.target.value)}
              placeholder={t(
                'mcp.commandPlaceholder',
                'e.g. npx -y @modelcontextprotocol/server-filesystem',
              )}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="mcp-args">{t('mcp.args', 'Arguments')}</Label>
            <Input
              id="mcp-args"
              value={args}
              onChange={(e) => setArgs(e.target.value)}
              placeholder={t(
                'mcp.argsPlaceholder',
                'Comma-separated, e.g. /path/to/dir, --verbose',
              )}
            />
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              {t('common.cancel', 'Cancel')}
            </Button>
            <Button
              type="submit"
              disabled={!name.trim() || !command.trim() || registerServer.isPending}
            >
              {registerServer.isPending
                ? t('common.loading', 'Loading...')
                : t('mcp.register', 'Register')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}