digitalocean/template-app-platform-gradient-cua-chat

digitalocean/template-app-platform-gradient-cua-chat

Description: An App Platform hosted Gradient Computer Using Agent (CUA) Chat Template.

Language: TypeScript

License: Apache-2.0

Stars: 7

Forks: 11

Open issues: 21

Created: 2025-07-30T16:40:59Z

Pushed: 2026-02-07T16:18:41Z

Default branch: main

Fork: no

Archived: no

README:

DigitalOcean Gradient + Playwright MCP CUA Template


A Next.js application demonstrating DigitalOcean's AI platform capabilities, featuring:

• Gradient Integration: Chat with multiple LLM models powered by DigitalOcean's Gradient platform
• Playwright Browser Automation: Remote browser control through MCP (Model Context Protocol)
• DigitalOcean Spaces: Automatic file upload and optimization for media content
• Interactive Web Tools: Screenshot capture and browser automation capabilities

Features

Core Applications

1. AI Chat with MCP Browser Automation

• Multi-Model Support: Access to various LLMs through DigitalOcean's Gradient (requires models with tool support - see Limitations section)
• Browser Control: AI can navigate websites, take screenshots, fill forms, and interact with web pages (OpenAI models recommended)
• Visual AI: Support for vision capabilities - AI can see and understand screenshots
• PDF Processing: AI can read and process PDF documents
• Media Support: Display images, videos, audio, PDFs, and documents inline

2. Screenshotter Tool

• Multi-Browser Support: Chromium, Firefox, Safari (WebKit), and Microsoft Edge
• Device Emulation: Simulate various devices (iPhones, iPads, Android devices)
• Resolution Presets: Common desktop and mobile resolutions
• Full Page Screenshots: Capture entire scrollable pages
• High Quality Mode: Toggle between compressed and high-quality screenshots

User Interface

Chat Interface

• Responsive Design: Full-width messages with proper mobile support
• Resizable Sidebar: Drag to resize between 280px-600px
• Syntax Highlighting: Code blocks with VS Code Dark+ theme
• Message Styling:
• User messages: Blue background (#3b82f6)
• Assistant messages: Green background (#22c55e)
• Collapsible Content: Large outputs automatically collapse with expand/collapse controls

Advanced Features

• Debug Mode: Toggle to view raw message JSON for development
• Model Parameters: Adjustable temperature, max tokens, top P, and frequency penalty
• Streaming Responses: Real-time token streaming with visual indicators
• Error Handling: Graceful error display with retry capabilities

Technical Features

• Token Optimization: Replace large base64 strings with presigned URLs, automatically uploaded to DigitalOcean Spaces
• Concurrent Processing: Batch uploads with concurrency limits for performance
• MCP Protocol Support: Full implementation of Model Context Protocol for tool integration
• Streamable HTTP Transport: Real-time communication with MCP servers
• Keyboard Shortcuts:
• OS-aware shortcut display (shows ⌘ on Mac, Ctrl on others): Clear chat and start new conversation

-

Architecture

Services

1. Next.js Web App (Port 3000)

• Main application with chat and screenshotter interfaces
• Server-side API routes for AI and browser operations
• React components with TypeScript

2. Playwright Server (Port 8081)

• Headless browser instance management
• WebSocket API for browser control
• Supports Chromium, Firefox, WebKit, and Edge

3. Playwright MCP Server (Port 8080)

• Model Context Protocol implementation
• Bridges AI tools with browser automation
• Provides screenshot, navigation, and interaction capabilities

API Endpoints

• /api/chat - Main chat endpoint with streaming responses
• /api/gradient-models - Fetch available AI models
• /api/screenshot - Direct screenshot API
• /api/devices - Get device emulation profiles

Limitations and Requirements

Model Requirements

The chat interface with browser automation requires LLM models that support function calling/tools. Not all models available through Gradient support this feature.

Supported Models

The following models have been tested and confirmed to work with browser automation tools:

| Model ID | Provider | Description | Performance | |----------|----------|-------------|-------------| | openai-gpt-41 | OpenAI | GPT-4 Optimized | Best overall performance | | openai-gpt-4o | OpenAI | GPT-4 Optimized | Better than mini, but not as good as 41 | | openai-gpt-4o-mini | OpenAI | GPT-4 Optimized Mini | Cost-effective, fast | | alibaba-qwen3-32b | Alibaba | Qwen 3 32B | Excellent open model | | deepseek-r1-distill-llama-70b | DeepSeek | R1 Distilled Llama 70B | Powerful open model | | llama3.3-70b-instruct | Meta | Llama 3.3 70B Instruct | High-quality open model | | mistral-nemo-instruct-2407 | Mistral | Nemo Instruct 2407 | Efficient, good tool support |

Note: Other models that support function calling may also work but have not been fully tested.

Currently Unsupported Models

The following models have limitations with browser automation in this template:

• Anthropic Claude models (Claude 3 Opus, Sonnet, Haiku) - While these models do support tools, the current implementation uses the AI SDK's OpenAI-compatible provider which doesn't properly support tool calling for Anthropic models through Gradient
• Most open-source models without function calling support
• Text-only models without tool capabilities

Feature Limitations

1. Browser automation only works with tool-supporting models 2. Without tool support, the chat will function as a standard LLM chat without browser control 3. Screenshot tool requires Playwright servers to be running and accessible 4. File uploads require configured DigitalOcean Spaces access 5. Browser sessions are not maintained between messages - each browser action starts fresh (AI SDK limitation)

Technical Notes

• This template uses the AI SDK with an OpenAI-compatible provider to communicate with Gradient
• Tool calling implementation follows OpenAI's function calling format
• The…