An open-source SDK to add AI agents into any webapp.

page-use

Beta — the API is still unstable. Use in production at your own risk.

Demo

Features

• Fast — page-use writes and executes JS code, not raw tool use.
• Tool Definitions Powered by Zod — Friendlier to read and write than JSON Schema.
• Inspired by WebMCP — page-use aims to be fully compatible with WebMCP.
• React Integration
  • <PageUseChat/> — component for ready-made UI
  • useAgentState() — to expose state to page-use agent.
• Fully Opensource — MIT Licensed

Packages

Package	Description	Links
@page-use/react	React hooks and chat widget	npm · docs
@page-use/client	TypeScript runtime	npm · docs
@page-use/core	Backend server	Docker Hub · docs

Quick Start

1. Start the server

First create a .env file with the following

# required
ANTHROPIC_API_KEY=sk-ant-...

# used for verification, but enter the same string as signing key
JWT_SIGNING_KEY=...

Download this docker-compose.yml file and start the server.

# DOWNLOAD docker-compose.yml
curl -s "https://raw.githubusercontent.com/page-use-people/page-use/refs/heads/main/docs/docker-compose.yml" -o docker-compose.yml

# START
docker compose up -d

2. Add to your React app

pnpm add @page-use/react @page-use/client

import {configure} from '@page-use/client';
import {SystemPrompt, useAgentState, z} from '@page-use/react';
import {PageUseChat} from '@page-use/react/ui/chat';

configure({
    serverURL: 'https://[SELF HOSTED PAGE USER CORE ADDRESS]/trpc'
});

const itemsSchema = z.array(
    z.object({
        id: z.string(),
        text: z.string(),
      
        // .describe is very important to provide the agent with context
        due: z.string()
                .regex(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)
                .describe('the date the task is due in YYYY-MM-DD format')
    })
).describe('all todo list items');

const App = () => {
    const [items, setItems] = useState([]);
    
    useAgentState('items', [items, setItems], {schema: itemsSchema});

    return (
        <>
            <SystemPrompt>
                You help the user manage a todo list.
            </SystemPrompt>
            
            <ul>
                {items.map((item) => <li key={item.id}>{item.text}</li>)}
            </ul>
            
            <PageUseChat title="Assistant" theme="dark" />
        </>
    );
};

Tip

We are importing z (zod) from @page-use/react because we expect a certain version of zod (>=4.0.0 & <5.0.0); importing from our package ensure you are using a compatible version of Zod.

Maintainers

imas234

tanvir001728

omranjamal

Community Managers

samiha-tahsin

License

MIT