Authorize Anthropic
Anthropic (Claude Platform) by anthropics wants to access your tanvir-k account.
{[
['Repository contents','Read code, metadata, and file contents in selected repositories.','Read'],
['Pull requests','Create branches, commit files, and open pull requests.','Write'],
['Metadata','Read repository metadata (language, topics, visibility).','Read'],
['Account email','See your primary verified email address.','Read']
].map(([t,d,scope],i)=>(
))}
You’ll pick which repositories Anthropic can access on the next step. You can change or revoke this anytime in GitHub Settings .
Cancel
Authorize Anthropic
);
}
/* ---------- Shared console chrome ---------- */
function ConsoleChrome({stepLabel, children, tweaks}){
const navItems=[{icon:HomeIcon2,label:'Home',active:true},{icon:BookIcon2,label:'Workbench'},{icon:KeyIcon2,label:'API keys'},{icon:UsageIcon2,label:'Usage'},{icon:CreditIcon2,label:'Billing'},{icon:SettingsIcon2,label:'Settings'}];
return (
Claude Platform
/
Tanvir’s workspace
{navItems.map(({icon:Icon,label,active})=>(
{label}
))}
Credit balance
$0.00
Add credits
{children}
);
}
/* ---------- STEP 4: Pick a repo ---------- */
function Idea2PickRepo({onPick, onBack}){
const [search,setSearch] = useState2('');
const [hovered,setHovered] = useState2(null);
const filtered = FAKE_REPOS.filter(r=>r.name.toLowerCase().includes(search.toLowerCase())||r.desc.toLowerCase().includes(search.toLowerCase()));
const suggested = FAKE_REPOS.find(r=>r.match);
return (
← Back
Which repo should Claude work in?
Claude will create a new branch, add the integration, and open a PR for you to review. Nothing merges automatically.
{/* Suggested */}
{suggested && (
Suggested · looks like a good match
{suggested.owner}/{suggested.name}
{suggested.visibility}
{suggested.desc}
{suggested.lang}
{suggested.stars} Updated {suggested.updated}
Detected {suggested.detected.framework}
Manifest {suggested.detected.manifest}
Use case {suggested.detected.useCase}
onPick(suggested)} style={{padding:'10px 16px',borderRadius:10,background:'#D97757',color:'#fff',fontSize:14,fontWeight:500,border:'none',cursor:'pointer',fontFamily:'var(--font-sans)',display:'flex',alignItems:'center',gap:8,whiteSpace:'nowrap',flexShrink:0,marginTop:4}}>
Use this repo
)}
{/* Search */}
{filtered.length} of {FAKE_REPOS.length}
{/* Repo list */}
{filtered.map((r,i)=>(
onPick(r)} onMouseEnter={()=>setHovered(r.name)} onMouseLeave={()=>setHovered(null)}
style={{display:'flex',alignItems:'center',gap:14,padding:'14px 16px',borderBottom:i
{r.owner}/{r.name}
{r.visibility}
{r.desc}
{r.lang}
{r.updated}
))}
Don’t see your repo? Configure GitHub access →
);
}
/* ---------- STEP 5: Analyzing / Generating ---------- */
function Idea2Analyzing({repo, prStretch, onDone}){
const steps = prStretch ? [
'Cloning ' + repo.owner + '/' + repo.name,
'Reading package.json and scanning imports',
'Detected Next.js 14 · TypeScript',
'Matching to quickstart: basic support chat',
'Creating branch claude/add-support-chat',
'Writing app/api/chat/route.ts',
'Writing components/SupportChat.tsx',
'Installing @anthropic-ai/sdk',
'Adding ANTHROPIC_API_KEY to .env.example',
'Opening pull request'
] : [
'Cloning ' + repo.owner + '/' + repo.name,
'Reading package.json and scanning imports',
'Detected Next.js 14 · TypeScript',
'Generating setup instructions',
'Preparing your workspace'
];
const [done,setDone] = useState2(0);
useEffect2(()=>{
if(done>=steps.length){ const t = setTimeout(onDone, 600); return ()=>clearTimeout(t); }
const t = setTimeout(()=>setDone(d=>d+1), done===0?400:420 + Math.random()*200);
return ()=>clearTimeout(t);
},[done]);
return (
Working
Claude is {prStretch?'building your integration':'analyzing your repo'}
{steps.map((s,i)=>{
const state = i < done ? 'done' : i === done ? 'active' : 'pending';
return (
{state==='done' && }
{state==='pending' &&
{s}
);
})}
This usually takes about 30 seconds. You can step away — we’ll email you when it’s ready.
);
}
/* ---------- STEP 6: Dashboard w/ PR card ---------- */
function Idea2Dashboard({repo, prStretch, apiKey, onViewPR}){
return (
{prStretch && (
Claude opened a pull request
Add Claude-powered support chat
Repository
{repo.owner}/{repo.name}
Branch
claude/add-support-chat
What’s in this PR
{[
['app/api/chat/route.ts','new','+42'],
['components/SupportChat.tsx','new','+128'],
['package.json','modified','+3 −1'],
['.env.example','modified','+2']
].map(([f,tag,diff])=>(
{f}
{tag}
{diff}
))}
)}
{/* Getting started grid */}
{/* API key */}
Ready
API key generated
Already added to your {repo.name} environment as ANTHROPIC_API_KEY.
sk-ant-••••••••••••{apiKey.slice(-4)}
{/* Credits */}
Next step
Add credits to go live
Your PR runs once you fund your workspace. Start with $5 in free trial credits.
Add credits
{/* Next steps */}
Explore Claude
{[
['Workbench','Try prompts against the models in a playground.',BookIcon2],
['Usage dashboard','See requests and token usage in real time.',UsageIcon2],
['API reference','Full docs for Messages, Tools, Files, and more.',KeyIcon2]
].map(([t,d,Icon])=>(
))}
);
}
/* ---------- Main Idea 2 App w/ stepper ---------- */
const IDEA2_TWEAK_DEFAULTS = /*IDEA2MODE-BEGIN*/{
"prStretch": true,
"copyVariant": "A"
}/*IDEA2MODE-END*/;
function Idea2App({tweaks, setTweak, showTweaks}){
const [step,setStep] = useState2(()=>{
const s = localStorage.getItem('idea2_step');
return (s && s!=='signin') ? s : 'welcome';
});
const [repo,setRepo] = useState2(null);
useEffect2(()=>{localStorage.setItem('idea2_step',step);},[step]);
const apiKey = 'sk-ant-api03-xR9a7';
return (
{step==='welcome' &&
setStep('ghauth')} onSkip={()=>{}}/> }
{step==='ghauth' &&
setStep('pickrepo')} onCancel={()=>setStep('welcome')}/>}
{step==='pickrepo' && {setRepo(r);setStep('analyzing');}} onBack={()=>setStep('welcome')}/> setStep('dashboard')}/> {}}/>
Jump to
{[['welcome','1'],['ghauth','2'],['pickrepo','3'],['analyzing','4'],['dashboard','5']].map(([s,n])=>(
{if(s==='analyzing'||s==='dashboard')setRepo(FAKE_REPOS[0]);setStep(s);}} style={{width:22,height:22,borderRadius:'50%',background:step===s?'#D97757':'rgba(255,255,255,0.05)',color:step===s?'#fff':'rgba(255,255,255,0.5)',fontSize:11,fontWeight:500,border:'none',cursor:'pointer',fontFamily:'var(--font-sans)'}}>{n}
))}
{localStorage.removeItem('idea2_step');setStep('welcome');setRepo(null);}} style={{marginLeft:4,padding:'4px 8px',borderRadius:12,background:'transparent',color:'rgba(255,255,255,0.4)',fontSize:10,border:'1px solid rgba(255,255,255,0.08)',cursor:'pointer',fontFamily:'var(--font-sans)'}}>Restart
{showTweaks && (
Tweaks · Idea 2
Stretch: Claude opens a PR setTweak('prStretch',!tweaks.prStretch)}/>
CTA Copy
{[['A','Direct — "Build with Claude in minutes"'],['B','Developer — "Your first API call, from your own codebase"'],['C','Action — "Skip the setup. Ship the integration."']].map(([v,label])=>(
{v}. {label}
))}
)}
);
}
Object.assign(window, {Idea2App, IDEA2_TWEAK_DEFAULTS, ConsoleChrome, Idea2Icons:{GitHubMark, ArrowRight2, ChevronRight2, CheckCircle2, LockIcon2, RepoIcon2, StarIcon2, BranchIcon2, PullRequestIcon2, FileIcon2, PlusIcon2, Sparkle2, SpinnerIcon2, KeyIcon2, CreditIcon2, BookIcon2, UsageIcon2}});