import React from 'react';
import { Button, Header, HeaderName, Content } from 'carbon-components-react';
const App: React.FC = () => {
return (
<div data-carbon-theme="white">
<Header aria-label="Carbon MCP Demo">
<HeaderName prefix="">
Carbon MCP Demo
</HeaderName>
</Header>
<Content>
<div style={{ padding: '2rem' }}>
<h1>Welcome to Carbon MCP Demo</h1>
<p style={{ marginBottom: '2rem' }}>
This demo app showcases components that can be generated using the carbon-mcp server.
</p>
<div style={{ display: 'flex', gap: '1rem', marginBottom: '2rem' }}>
<Button kind="primary">Primary Button</Button>
<Button kind="secondary">Secondary Button</Button>
<Button kind="tertiary">Tertiary Button</Button>
<Button kind="ghost">Ghost Button</Button>
</div>
<div style={{
background: 'var(--cds-ui-01)',
padding: '2rem',
borderRadius: '4px',
marginTop: '2rem'
}}>
<h2>Generated Components</h2>
<p>
Components generated by carbon-mcp will appear here.
Use the generateComponent tool to create new Carbon React components
with Storybook stories and tests.
</p>
<div style={{ marginTop: '1rem' }}>
<h3>Try it:</h3>
<pre style={{
background: '#161616',
color: '#f4f4f4',
padding: '1rem',
borderRadius: '4px',
overflow: 'auto'
}}>
{`curl -X POST http://localhost:4000/tool/generateComponent \\
-H "Content-Type: application/json" \\
-d '{
"component_name": "PrimaryCard",
"dry_run": true,
"explain": true
}'`}
</pre>
</div>
</div>
<div style={{
background: 'var(--cds-ui-02)',
padding: '2rem',
borderRadius: '4px',
marginTop: '2rem'
}}>
<h2>Available Tools</h2>
<ul>
<li><strong>generateComponent</strong> — Generate Carbon React components</li>
<li><strong>codemodReplace</strong> — Convert existing code to Carbon</li>
<li><strong>searchDocs</strong> — Search Carbon documentation</li>
<li><strong>tokenConverter</strong> — Convert design tokens</li>
<li><strong>validateComponent</strong> — Validate Carbon usage</li>
<li><strong>themePreview</strong> — Preview theme variants</li>
<li><strong>figmaSync</strong> — Sync with Figma (scaffold)</li>
</ul>
</div>
</div>
</Content>
</div>
);
};
export default App;
