fredjens/mcp-ui-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update readme

Browse Source
This commit is contained in:
Fredrik Jensen 2025-12-06 11:00:16 +01:00
parent 56a09f29e9
commit 84f757012f
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -5,7 +5,7 @@ Build interactive React UIs for MCP tools.
## Installation ## Installation
```bash ```bash
npm install @mcp-ui-kit npm install mcp-ui-kit
``` ```
## Server Usage ## Server Usage
@ -13,7 +13,7 @@ npm install @mcp-ui-kit
Create UI components that bundle on-demand: Create UI components that bundle on-demand:
```typescript ```typescript
import { createUI } from '@mcp-ui-kit/server'; import { createUI } from 'mcp-ui-kit/server';
const dashboardUI = createUI('my-dashboard', import.meta.resolve('./MyComponent.tsx')); const dashboardUI = createUI('my-dashboard', import.meta.resolve('./MyComponent.tsx'));
@ -32,7 +32,7 @@ server.registerTool('dashboard', {
Helper functions for your React components: Helper functions for your React components:
```typescript ```typescript
import { sendPrompt, callTool, useProps } from '@mcp-ui-kit/react'; import { sendPrompt, callTool, useProps } from 'mcp-ui-kit/ui';
function MyComponent() { function MyComponent() {
const { title } = useProps({ title: 'Default' }); const { title } = useProps({ title: 'Default' });
@ -53,7 +53,7 @@ function MyComponent() {
## API ## API
### Server (`@mcp-ui-kit/server`) ### Server (`mcp-ui-kit/server`)
**`createUI(name, entryUrl)`** - Creates a UI component **`createUI(name, entryUrl)`** - Creates a UI component
- `name`: Component identifier - `name`: Component identifier
@ -72,9 +72,7 @@ createUI('dashboard', require.resolve('./MyComponent.tsx'));
createUI('dashboard', path.join(__dirname, './MyComponent.tsx')); createUI('dashboard', path.join(__dirname, './MyComponent.tsx'));
``` ```
The library automatically converts `file://` URLs to file paths, so both approaches work seamlessly. ### UI (`mcp-ui-kit/ui`)
### UI (`@mcp-ui/library/ui`)
- **`useProps(defaults)`** - Get props passed from the server - **`useProps(defaults)`** - Get props passed from the server
- **`sendPrompt(message)`** - Send a message to the AI chat - **`sendPrompt(message)`** - Send a message to the AI chat

3
package.json
View File

@ -17,7 +17,8 @@
"watch:library": "npm run watch --workspace=@mcp-ui-kit", "watch:library": "npm run watch --workspace=@mcp-ui-kit",
"watch:inspector": "npm run watch --workspace=@mcp-ui-kit/inspector", "watch:inspector": "npm run watch --workspace=@mcp-ui-kit/inspector",
"inspector": "npx @modelcontextprotocol/inspector", "inspector": "npx @modelcontextprotocol/inspector",
"nanobot": "dotenv -e .env -- nanobot run ./nanobot.yaml" "nanobot": "dotenv -e .env -- nanobot run ./nanobot.yaml",
"publish:library": "npm publish --workspace=packages/library"
}, },
"devDependencies": { "devDependencies": {
"dotenv-cli": "^11.0.0", "dotenv-cli": "^11.0.0",