mirror of
https://github.com/codeany-ai/open-agent-sdk-typescript.git
synced 2026-04-27 07:16:21 +09:00
Initial commit: Open Agent SDK (TypeScript)
Open-source Agent SDK with 30+ built-in tools, MCP integration, multi-turn sessions, subagents, and streaming support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
idoubi
@@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Open Agent SDK</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
:root{
|
||||
--bg:#f5f6f8;--surface:#fff;--border:#e5e7eb;
|
||||
--text:#1a1a1a;--text2:#6b7280;--accent:#111;
|
||||
--user-bg:#111;--user-fg:#fff;
|
||||
--tool-bg:#f3f4f6;--tool-border:#e0e1e4;
|
||||
--think-bg:#fffbeb;--think-border:#fde68a;
|
||||
--ok-bg:#ecfdf5;--ok-border:#86efac;--ok-text:#166534;
|
||||
--err-bg:#fef2f2;--err-border:#fca5a5;--err-text:#991b1b;
|
||||
--radius:16px;
|
||||
}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
|
||||
background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column}
|
||||
|
||||
/* Header */
|
||||
header{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
|
||||
header h1{font-size:16px;font-weight:600}
|
||||
header button{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
|
||||
background:var(--surface);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
|
||||
header button:hover{background:var(--bg)}
|
||||
|
||||
/* Chat */
|
||||
#chat{flex:1;overflow-y:auto;padding:24px 16px}
|
||||
#chat-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
|
||||
|
||||
/* Welcome */
|
||||
#welcome{text-align:center;padding:60px 0 30px}
|
||||
#welcome h2{font-size:22px;font-weight:600;margin-bottom:22px;color:var(--text)}
|
||||
.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;margin:0 auto}
|
||||
.suggestions button{padding:12px 16px;border:1px solid var(--border);border-radius:12px;
|
||||
background:var(--surface);cursor:pointer;text-align:left;font-size:13px;color:var(--text);transition:border-color .15s}
|
||||
.suggestions button:hover{border-color:#999}
|
||||
.suggestions span{margin-right:6px}
|
||||
|
||||
/* Message rows */
|
||||
.msg-row{display:flex}
|
||||
.msg-row.user{justify-content:flex-end}
|
||||
.msg-row.assistant{justify-content:flex-start}
|
||||
|
||||
/* Bubbles */
|
||||
.bubble-user{background:var(--user-bg);color:var(--user-fg);padding:10px 16px;
|
||||
border-radius:18px 18px 4px 18px;max-width:75%;font-size:14px;line-height:1.55;white-space:pre-wrap}
|
||||
.bubble-assistant{max-width:85%;font-size:14.5px;line-height:1.65}
|
||||
.bubble-assistant p{margin-bottom:8px}
|
||||
.bubble-assistant p:last-child{margin-bottom:0}
|
||||
.bubble-assistant strong{font-weight:600}
|
||||
.bubble-assistant code{background:#f0f1f3;padding:1px 5px;border-radius:4px;font-size:13px}
|
||||
.bubble-assistant pre{background:#1e1e1e;color:#d4d4d4;padding:14px 16px;border-radius:10px;
|
||||
overflow-x:auto;margin:8px 0;font-size:13px;line-height:1.5}
|
||||
.bubble-assistant pre code{background:none;padding:0;color:inherit}
|
||||
.bubble-assistant ul,.bubble-assistant ol{padding-left:22px;margin:6px 0}
|
||||
.bubble-assistant li{margin:3px 0}
|
||||
|
||||
/* Tool call card */
|
||||
.tool-card{background:var(--tool-bg);border:1px solid var(--tool-border);border-radius:10px;
|
||||
padding:10px 14px;margin:8px 0;font-size:13px}
|
||||
.tool-card .tool-hd{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:4px}
|
||||
.tool-card .tool-icon{font-size:15px}
|
||||
.tool-card .tool-input{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
|
||||
.tool-result{margin:4px 0 8px 12px;padding:8px 12px;border-left:3px solid var(--tool-border);
|
||||
font-size:12.5px;color:var(--text2);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
|
||||
|
||||
/* Thinking */
|
||||
.think-box{background:var(--think-bg);border:1px solid var(--think-border);border-radius:10px;
|
||||
padding:10px 14px;margin:8px 0;font-size:13px;font-style:italic;color:#92400e}
|
||||
|
||||
/* Result banner */
|
||||
.result-banner{border-radius:10px;padding:10px 16px;font-size:13px;margin:8px 0;display:flex;align-items:center;gap:8px}
|
||||
.result-banner.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text)}
|
||||
.result-banner.err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text)}
|
||||
|
||||
/* Typing indicator */
|
||||
.typing{display:flex;align-items:center;gap:4px;padding:8px 0}
|
||||
.typing span{width:7px;height:7px;background:#aaa;border-radius:50%;animation:bounce .6s infinite alternate}
|
||||
.typing span:nth-child(2){animation-delay:.15s}
|
||||
.typing span:nth-child(3){animation-delay:.3s}
|
||||
@keyframes bounce{to{transform:translateY(-6px);opacity:.4}}
|
||||
|
||||
/* Input area */
|
||||
#input-area{padding:12px 16px 16px;background:var(--surface);border-top:1px solid var(--border)}
|
||||
#input-wrap{max-width:800px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;
|
||||
border:1px solid var(--border);border-radius:26px;padding:6px 8px 6px 18px;background:var(--surface);
|
||||
transition:border-color .2s}
|
||||
#input-wrap:focus-within{border-color:#999}
|
||||
#prompt{flex:1;border:none;outline:none;font-size:14px;line-height:1.5;resize:none;
|
||||
min-height:24px;max-height:180px;font-family:inherit;background:transparent}
|
||||
#send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);
|
||||
color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
|
||||
transition:opacity .15s}
|
||||
#send-btn:disabled{opacity:.35;cursor:default}
|
||||
|
||||
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
||||
.msg-row,.tool-card,.tool-result,.think-box,.result-banner{animation:fadeIn .2s ease}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Open Agent SDK</h1>
|
||||
<button onclick="newSession()" title="New session">+</button>
|
||||
</header>
|
||||
|
||||
<div id="chat">
|
||||
<div id="chat-inner">
|
||||
<div id="welcome">
|
||||
<h2>What can I do for you?</h2>
|
||||
<div class="suggestions">
|
||||
<button onclick="useSuggestion(this)"><span>📁</span>List files in this project</button>
|
||||
<button onclick="useSuggestion(this)"><span>📄</span>Read package.json</button>
|
||||
<button onclick="useSuggestion(this)"><span>📊</span>Count lines of code</button>
|
||||
<button onclick="useSuggestion(this)"><span>💻</span>Show system info</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="input-area">
|
||||
<div id="input-wrap">
|
||||
<textarea id="prompt" rows="1" placeholder="Assign a task or ask anything" onkeydown="handleKey(event)" oninput="autoResize()"></textarea>
|
||||
<button id="send-btn" onclick="sendMessage()">↑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const chatInner = document.getElementById('chat-inner');
|
||||
const chatEl = document.getElementById('chat');
|
||||
const promptEl = document.getElementById('prompt');
|
||||
const sendBtn = document.getElementById('send-btn');
|
||||
const welcomeEl = document.getElementById('welcome');
|
||||
|
||||
let streaming = false;
|
||||
|
||||
const TOOL_ICONS = {
|
||||
Bash:'🛠',Read:'📄',Write:'📝',Edit:'✎',
|
||||
Glob:'🔍',Grep:'🔎',WebFetch:'🌐',WebSearch:'🔍',
|
||||
Agent:'🤖',NotebookEdit:'📓',TaskCreate:'📋',
|
||||
};
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}
|
||||
|
||||
function renderMarkdown(raw){
|
||||
let h = esc(raw);
|
||||
// code blocks
|
||||
h = h.replace(/```(\w*)\n([\s\S]*?)```/g, (_,lang,code) =>
|
||||
`<pre><code class="lang-${lang}">${code.trim()}</code></pre>`);
|
||||
// inline code
|
||||
h = h.replace(/`([^`\n]+)`/g, '<code>$1</code>');
|
||||
// bold
|
||||
h = h.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
// unordered lists
|
||||
h = h.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
|
||||
h = h.replace(/(<li>.*<\/li>\n?)+/g, m => '<ul>'+m+'</ul>');
|
||||
// ordered lists
|
||||
h = h.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
|
||||
// paragraphs
|
||||
h = h.replace(/\n{2,}/g, '</p><p>');
|
||||
h = h.replace(/\n/g, '<br>');
|
||||
return '<p>'+h+'</p>';
|
||||
}
|
||||
|
||||
function scrollToBottom(){
|
||||
requestAnimationFrame(()=>{ chatEl.scrollTop = chatEl.scrollHeight; });
|
||||
}
|
||||
|
||||
function autoResize(){
|
||||
promptEl.style.height = 'auto';
|
||||
promptEl.style.height = Math.min(promptEl.scrollHeight, 180)+'px';
|
||||
}
|
||||
|
||||
/* ---- actions ---- */
|
||||
function handleKey(e){
|
||||
if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendMessage(); }
|
||||
}
|
||||
|
||||
function useSuggestion(btn){
|
||||
const text = btn.textContent.replace(/^.\s*/u,'');
|
||||
promptEl.value = text;
|
||||
sendMessage();
|
||||
}
|
||||
|
||||
async function newSession(){
|
||||
await fetch('/api/new',{method:'POST'});
|
||||
chatInner.innerHTML = '';
|
||||
chatInner.appendChild(welcomeEl);
|
||||
welcomeEl.style.display = '';
|
||||
}
|
||||
|
||||
async function sendMessage(){
|
||||
const text = promptEl.value.trim();
|
||||
if(!text || streaming) return;
|
||||
streaming = true;
|
||||
sendBtn.disabled = true;
|
||||
promptEl.value = '';
|
||||
autoResize();
|
||||
|
||||
// hide welcome
|
||||
welcomeEl.style.display = 'none';
|
||||
|
||||
// user bubble
|
||||
const uRow = document.createElement('div');
|
||||
uRow.className = 'msg-row user';
|
||||
uRow.innerHTML = `<div class="bubble-user">${esc(text)}</div>`;
|
||||
chatInner.appendChild(uRow);
|
||||
scrollToBottom();
|
||||
|
||||
// typing indicator
|
||||
const typingEl = document.createElement('div');
|
||||
typingEl.className = 'msg-row assistant';
|
||||
typingEl.innerHTML = '<div class="typing"><span></span><span></span><span></span></div>';
|
||||
chatInner.appendChild(typingEl);
|
||||
scrollToBottom();
|
||||
|
||||
// assistant wrapper
|
||||
const aRow = document.createElement('div');
|
||||
aRow.className = 'msg-row assistant';
|
||||
const aBubble = document.createElement('div');
|
||||
aBubble.className = 'bubble-assistant';
|
||||
aRow.appendChild(aBubble);
|
||||
|
||||
let textAcc = '';
|
||||
let textEl = null;
|
||||
let typingRemoved = false;
|
||||
|
||||
function ensureTextEl(){
|
||||
if(!textEl){
|
||||
textEl = document.createElement('div');
|
||||
aBubble.appendChild(textEl);
|
||||
}
|
||||
}
|
||||
|
||||
try{
|
||||
const resp = await fetch('/api/chat',{
|
||||
method:'POST',
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({message:text}),
|
||||
});
|
||||
|
||||
if(!resp.ok){
|
||||
throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);
|
||||
}
|
||||
|
||||
// Two code paths: streaming (ReadableStream) or fallback (text)
|
||||
if(resp.body && typeof resp.body.getReader === 'function'){
|
||||
// --- Streaming path ---
|
||||
const reader = resp.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buf = '';
|
||||
|
||||
while(true){
|
||||
const {done,value} = await reader.read();
|
||||
if(done) break;
|
||||
buf += decoder.decode(value, {stream:true});
|
||||
processSSEBuffer();
|
||||
}
|
||||
// flush remaining
|
||||
if(buf.trim()) processSSEBuffer();
|
||||
|
||||
function processSSEBuffer(){
|
||||
const lines = buf.split('\n');
|
||||
buf = lines.pop() || '';
|
||||
for(const line of lines) handleSSELine(line);
|
||||
}
|
||||
} else {
|
||||
// --- Fallback: read full text at once (proxy/polyfill environments) ---
|
||||
const fullText = await resp.text();
|
||||
for(const line of fullText.split('\n')) handleSSELine(line);
|
||||
}
|
||||
|
||||
function handleSSELine(line){
|
||||
const trimmed = line.trim();
|
||||
if(!trimmed.startsWith('data: ')) return;
|
||||
let parsed;
|
||||
try{ parsed = JSON.parse(trimmed.slice(6)); } catch{ return; }
|
||||
const {event, data} = parsed;
|
||||
if(!event || !data) return;
|
||||
|
||||
// remove typing on first real event
|
||||
if(!typingRemoved){ typingRemoved = true; typingEl.remove(); chatInner.appendChild(aRow); }
|
||||
|
||||
switch(event){
|
||||
case 'text':
|
||||
textAcc += data.text;
|
||||
ensureTextEl();
|
||||
textEl.innerHTML = renderMarkdown(textAcc);
|
||||
scrollToBottom();
|
||||
break;
|
||||
|
||||
case 'tool_use':{
|
||||
textAcc = ''; textEl = null;
|
||||
const icon = TOOL_ICONS[data.name] || '🔧';
|
||||
const inputStr = typeof data.input === 'string' ? data.input : JSON.stringify(data.input);
|
||||
const card = document.createElement('div');
|
||||
card.className = 'tool-card';
|
||||
card.id = 'tool-'+data.id;
|
||||
card.innerHTML = `<div class="tool-hd"><span class="tool-icon">${icon}</span>${esc(data.name)}</div>`
|
||||
+ `<div class="tool-input">${esc(inputStr).slice(0,200)}</div>`;
|
||||
aBubble.appendChild(card);
|
||||
scrollToBottom();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'tool_result':{
|
||||
const card = document.getElementById('tool-'+data.tool_use_id);
|
||||
const rd = document.createElement('div');
|
||||
rd.className = 'tool-result';
|
||||
rd.textContent = (data.content||'').slice(0,3000);
|
||||
if(card) card.after(rd); else aBubble.appendChild(rd);
|
||||
scrollToBottom();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'thinking':{
|
||||
textAcc = ''; textEl = null;
|
||||
const tb = document.createElement('div');
|
||||
tb.className = 'think-box';
|
||||
tb.textContent = data.thinking.slice(0,1000);
|
||||
aBubble.appendChild(tb);
|
||||
scrollToBottom();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'result':{
|
||||
const b = document.createElement('div');
|
||||
b.className = 'result-banner ok';
|
||||
b.innerHTML = `✅ Done · $${(data.cost||0).toFixed(2)} · ${((data.duration_ms||0)/1000).toFixed(1)}s · ${(data.input_tokens||0)+(data.output_tokens||0)} tokens`;
|
||||
aBubble.appendChild(b);
|
||||
scrollToBottom();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'error':{
|
||||
const b = document.createElement('div');
|
||||
b.className = 'result-banner err';
|
||||
b.innerHTML = `❌ Error: ${esc(data.message||'unknown')}`;
|
||||
aBubble.appendChild(b);
|
||||
scrollToBottom();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
if(!typingRemoved){ typingEl.remove(); chatInner.appendChild(aRow); }
|
||||
const b = document.createElement('div');
|
||||
b.className = 'result-banner err';
|
||||
b.textContent = 'Network error: '+err.message;
|
||||
aBubble.appendChild(b);
|
||||
}
|
||||
|
||||
streaming = false;
|
||||
sendBtn.disabled = false;
|
||||
promptEl.focus();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user