简体中文

FormAgent WebUI

Fork Notice: This project is forked from DevAgentForge/claude-code-webui. Migrated from @anthropic-ai/claude-agent-sdk to formagent-sdk.

A practical example demonstrating how to build a web-based AI agent interface using formagent-sdk.

---

✨ What is This?

This project showcases how to use formagent-sdk to build a full-featured AI agent web application. It demonstrates:

• 🔌 formagent-sdk Integration — Session management, streaming, tool execution
• 🌐 Web-based Agent Interface — Browser-accessible AI agent with real-time interaction
• 📱 Cross-platform Support — Works on desktop, mobile, and iPad
• 🛠️ Tool Permission Control — Approve/deny tool executions with user confirmation
• 💾 Session Persistence — SQLite-backed conversation history

---

🚀 Quick Start

1. Prerequisites

Make sure you have Bun installed.

# Install Bun
curl -fsSL https://bun.sh/install | bash

2. Run FormAgent WebUI

git clone git@github.com:FormAgent/formagent-webui.git
cd formagent-webui
bun install
bun run start

Open your browser:

http://localhost:10086

Change Port (Optional)

PORT=3000 bun run start

---

🧠 formagent-sdk Usage Examples

This project demonstrates key formagent-sdk features:

Session Management

import { createSession, builtinTools } from "formagent-sdk";

const session = await createSession({
  model: "claude-sonnet-4-20250514",
  cwd: "/your/working/directory",
  tools: builtinTools,
});

Sending Messages & Receiving Streams

await session.send("Your prompt here");

for await (const event of session.receive()) {
  if (event.type === "text") {
    console.log(event.text);
  } else if (event.type === "tool_use") {
    console.log(`Tool: ${event.name}`, event.input);
  }
}

Tool Permission Hooks

const session = await createSession({
  hooks: {
    PreToolUse: [{
      matcher: ".*",
      hooks: [async (input) => {
        // Custom permission logic
        return { continue: true };
      }]
    }]
  }
});

---

🧩 Architecture Overview

Frontend

• React 19 + TypeScript
• Tailwind CSS 4
• Radix UI
• Zustand
• Markdown + syntax highlighting
• Streaming-first rendering

Backend

• Bun runtime
• Hono web framework
• WebSocket-based streaming
• SQLite (WAL mode)
• formagent-sdk

---

📂 Project Structure

src/
├── index.tsx          # Server entry (Hono + WebSocket)
├── libs/
│   ├── runner.ts      # formagent-sdk integration
│   ├── session-store.ts # SQLite session management
│   └── util.ts        # Utilities
├── components/        # React components
└── types.ts           # Type definitions

---

⚙️ Environment Variables

PORT=10086
DB_PATH=./webui.db
CORS_ORIGIN=*

API configuration:

• ANTHROPIC_AUTH_TOKEN
• ANTHROPIC_BASE_URL
• ANTHROPIC_MODEL

---

🛠 Development

# Development mode with hot reload
bun run dev

# Build for production
bun run build

# Run production server
bun run start

---

🤝 Contributing

PRs are welcome.

1. Fork this repository
2. Create your feature branch
3. Commit your changes
4. Open a Pull Request

---

📚 Related Links

• formagent-sdk on npm
• Original claude-code-webui

---

👉 Star it if it helps you.